Best Resources to Learn Flutter & Dart

Flutter is a UI toolkit, developed by Google, and you can use it to create a beautiful native app for desktop, mobile, and web. For faster development and native performance, you can choose Flutter for building an app. Hot Reload and customizable widgets are some notable features of Flutter.

Tutorials and Courses

Online Courses and Basic Tutorials

  • Flutter – Beginners Course – It is a comprehensive course for beginners with a guide on creating Flutter-based mobile apps. However, you have to understand the Dart language to join this course. The paid course at Udemy will enable you to develop apps with the Flutter framework.
  • Dart and Flutter: The Complete Developer’s Guide – Before digging into Flutter, one needs to know about Dart. This course covers Dart language and its primary features first, then teaches about Flutter’s screens, complex animations, network requests, react programming, etc…
  • Flutter Development Bootcamp Using Dart – You can pay for this premium course, presenting you with a perfect curriculum on Flutter app development. You will know the technique of using Dart for code development. The tutorial guides you on creating the native-quality app. Thus, choose this online course to learn the Flutter setup and Flutter app development process.
  • Flutter Succinctly – You can download this free e-book on your mobile and learn the details of Flutter app development. The e-book presents you with 129 pages with information on app fundamentals and app UI. You will learn the way of using customizable widgets to build the app.
  • Flutter in Action – We have chosen it as the most reliable paid tutorial on Flutter. The book guides you on building professional mobile apps with the Dart programming language and Flutter SDK. You can find several annotations and diagrams that make your learning process easier. The tutorial also includes routing and other complicated topics.
  • Flutter Tutorials – The free tutorial guides you on the way of using the Flutter framework to develop different apps. It also includes a layout mechanism, widgets (horizontal and vertical), and animation package of Flutter. You will learn tricks of internationalizing a Flutter application.
  • Build A Chat Application With Firebase, Flutter and Provider – This Udemy course teaches you how to make a complete mobile messaging application like WhatsApp or Telegram using Flutter, Firebase and Provider Framework.
  • Official Flutter Youtube Channel – This channel is a goto place to learn things about Flutter, including usage of different widgets, and Google IO videos content.
  • Marcus Ng – He is a mobile developer who has published a lot of tutorials about how to create a design in Flutter.
  • Login with flutter_bloc – Implement a login flow with username and pass using flutter_block.
  • Tip Calculator – In this tutorial you will learn how to make a Tip Calculator. It is best to learn about form input and calculation.
  • Todo app with flutter_bloc – Create your todo app, including create todo, todo list with checkbox.
  • A complete guide to Flutter – This repo aims to guide new Flutter user through a huge list of working application using Flutter Web.
  • Navigation done right – In this article, the developer briefly describes navigation principles used in one of his popular apps and how to implement it using just the framework-provided Navigator.
  • WordPress Woocommerce app – If you want to learn about how to get data from WordPress’ Woocommerce shop and implement it as an app, you can check videos in this playlist.

Architecture Tutorials

Flutter for Games

Must-Have Libraries

  • win32 – A package that wraps some of the most common Win32 API calls using FFI to make them accessible to Dart code without requiring a C compiler or the Windows SDK.
  • fl_chart – A library to draw fantastic charts. It has several useful graphs, such as bar, line and pie charts.
  • dio – A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.
  • ezanimation – An easy to use animation library. With EzAnimation, there is no need to burden your code with TickerProviders, the complicated logic of curves, different components of animation, etc.
  • rxdart – RxDart is a reactive functional programming library for Google Dart based on ReactiveX. RxDart adds functionality from the reactive extensions specification on top of Dart’s Streams API.
  • intro_slider – Flutter Intro Slider is a flutter plugin that helps you make a cool intro for your app.
  • path_provider – Find commonly used locations on the filesystem on both Android and iOS. 
  • cached_network_image – It shows and caches images downloaded from internet. This widget now uses builders for the placeholder and error widget and uses sqflite for cache management.
  • font_awesome_flutter – Use Font Awesome icons in your app.
  • time.dart –  Type-safe DateTime and Duration calculations, powered by extensions.
  • google_fonts – The google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) from in your Flutter app.
  • flutter_svg – This package allows to draw SVG (and some Android VectorDrawable (XML)) files on a Flutter Widget.
  • flare_flutter – Flare offers powerful realtime vector design and animation for app and game designers alike. This library is Flutter runtime for Flare, depends on flare_dart.
  • clean_settings – Creating a settings screen requires the same boiler plate code over and over. This library aims to provide sane defaults while creating a setting screen.
  • battery_plus – Access various information about the battery of the device the app is running on.
  • connectivity_plus – This allows Flutter apps to discover network connectivity and configure themselves accordingly. It can distinguish between cellular vs WiFi connection.
  • device_info_plus – Get current device information from within the Flutter application.
  • package_info_plus – Provides an API for querying information about an application package.
  • sensor_plus – Access the accelerometer and gyroscope sensors.
  • share_plus – A Flutter plugin to share content from your Flutter app via the platform’s share dialog.
  • android_alarm_manager_plus –  Accessing the Android AlarmManager service, and running Dart code in the background when alarms fire.
  • android_intent_plus –  Launch arbitrary intents when the platform is Android.

Starter Kits / Templates


Flutter E-Commerce UI KIT

E-Commerce UI kit can be used for e-commerce applications in android and ios devices. It contains 32 Screens with a different type of UI, E-Commerce UI kit can save your time to code all Front end layout.


It is the ultimate library of Flutter UI app templates which is perfect for business like ecommerce store app, bus and travel booking app, hotel booking app, grocery delivery and food delivery app, online education and online learning app, digital wallet app, health and gym app, movie streaming and much more


A Flutter E-Commerce app created using Firebase, Stripe and Razorpay.


This kit can turn your WordPress website into a news app.

Fluxstore WooCommerce

Fluxstore WooCommerce is an universal e-commerce app inspired by the Flutter framework. If your business has already had the website that built based on WooCommerce, then it is easy to integrate with Fluxstore by just a few steps, and quickly release the final app to both Appstore and Google Play store

Travel Hour with Admin Panel

Travel Hour is a complete travel guide app based on a country, it has also an admin panel. The app uses Google maps and Its APIs to get nearby data like hotels and restaurants and show routes between the source and destination. The template contains 50+ screens.

Starter Kits

  • first_app – Various elements and features are put together into this single app. It offers global UI theme, separation of business logic in models and providers, use of scoped_model for app state management, unit test, custom icons for both iOS and Android, Firebase Analytics & Crashlytics for tracking, and many more.
  • flutter-starter-kit – A Flutter starter application that utilizes the BLoC Pattern. 
  • Flutter Starter  – This is a starter-kit for production-level apps, including folder structure, API call, style guide, state management, router, and testing.


  • FlutterFlow – FlutterFlow is an app visual builder which helps building Flutter applications. Just drag and drop the required widgets then download source code to your computer or publish it to app stores.
  • FlutLab – This is a playground for writting Flutter app. It offers an emulator to see the output as well.
  • FigmaToCode – Figma To Code can generate responsive layouts in Tailwind and Flutter from Figma design.
  • AppWrite – This is an end-to-end backend server that is aiming to abstract the complexity of common, complex, and repetitive tasks required for building a modern app.
  • cpainterhelper – A simple script that lets you convert adobe illustrator paths to code compatible with Flutter’s CustomPainter.
  • – Create beautiful screenshots for App Store and Play Store.
  • – Create intro videos, screenshots for your app and for FREE.

Our Tutorials

  • Flutter Drawer Widget Example - Gmail Side Navigation
    A Drawer is a material design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application. It is an easy way to...
  • Best Tree View Packages for Flutter
    In Flutter, we use a tree view as a graphical control widget that presents a hierarchical view of its children. Here are the best packages to display tree view in Flutter flutter_treeview  fluttre_treeview...
  • drawing_animation examples
    drawing_animation is a Dart package which can gradually painting SVG path objects on a canva. In this example, we will try animate the drawing of the potion below. Add the...
  • Flutter AnimatedSwitcher Widget Examples: Flip Card
    AnimatedSwitcher widget replaces its previously set as child with a new widget using transition animation. By default, fade animation is used to switch widgets. We can use AnimatedSwitcher's transitionBuilder property...
  • 5 Best Bluetooth Packages for Flutter
    Developers need to work with Bluetooth communication in many cases such as connecting to a printer or a headphone. Following are the best Flutter Bluetooth packages. To use Bluetooth in...
  • Flutter ImageFiltered Widget Examples
    ImageFiltered is an widget which applies filter from ImageFilter class to its child. Using ImageFiltered widget, you can apply effects to images. ImageFiltered constructor const ImageFiltered( {Key key, @required ImageFilter imageFilter,...
  • 8 Best Images Packages for Flutter
    There are many image libraries written for Flutter which will help developers make apps related to image easier. ImageEditorPro - This library offers simple, easy support for image editing. You...
  • Packages to ensure good code style with lint in Flutter
    If you are new to Dart and Flutter, you must read Effective Dart: Style to write good code with good style. During the development process, there might be many times...
  • Create Stack Layout with Waves at Top and Bottom in Flutter
    This article introduce how to create a screen with wave as background. We will create this layout using Stack and ClipPath for the waves. import 'package:flutter/material.dart'; class WaveBackgroundPage extends StatefulWidget...
  • Flutter ClipPath Examples
    ClipPath in Flutter is a widget that clips its child using a path. We use ClipPath to make the child widget appear masked in our designed shape. If you want...
  • 4 Best Flutter Packages to Handle SVG
    SVG is not supported out of the box by Flutter. That's why we need some packages to work with a SVG file. path_parsing This package is a pure Dart parsing...
  • 4 Best Flutter Packages to Generate Lorem Ipsum and Placeholder
    Lorem Ipsum is simply dummy text used in many programming applications, while placeholder is shown before rendering a widget in order to keep space. Following are the best Flutter packages...
  • Create Round Bottom AppBar in Flutter
    In this article, we will try creating an AppBar with round bottom. Use AppBar's shape If you want to adjust the height of the AppBar, just modify the barHeight property....
  • Flutter Template and Boilerplate Generator
    This tool is a collection of Flutter boilerplate codes, including custom widgets and pages. You can use the layout for idea of a page or use component for a small...
  • 10 Best Flutter Animation Libraries
    Working with animation in Flutter is fun. There are many ways to make your UI alive. If you don't want to use the built-in animation widgets, you can choose among...
  • Flutter AppBar and Examples
    Appbar is a widget that contains the toolbar in a Flutter application. An app bar contains different toolbar widgets like menu button, actions, icon buttons and many more. Add a...
  • 4 Best Flutter Gesture Detector Packages
    If you wan to detect a user' advanced gesture and the built-in GestureDetector can't handle your use case, you can check our following gesture detector packages. tap_builder TapBuilder is a widget...
  • Flutter LayoutBuilder Widget Example for Responsive UI
    Nowadays an app is required to have suitable layout for each screen size, esp. when Flutter can produce apps with the same code base. Flutter offers LayoutBuilder widget which can...
  • Flutter ElevatedButton Examples
    ElevatedButton is a Material Design's elevated button which can be used to add dimension to otherwise mostly flat layouts. It is advised to avoid using this widget on already-elevated content...
  • Flutter Wrap Widget Examples
    There many many times we need to adjust widths of children widgets to make them fit to a device's screen size. If we aren't sure whether to keep display a...
  • 4 Best Flutter ORM and Database Packages
    Following are the best ORM frameworks for Flutter. sqfentity QFEntity is an ORM framework for CRUD operations and JSON data synchronization to your local SQLite database from the web. //Create...
  • Flutter SafeArea Widget Examples - Avoid the Notch
    The notch was introduce first in iPhone X, then was implemented in almost every Android phones. It comes in different shapes and sizes. Programming an app to make it suit...
  • Make Widget Center at Middle of Screen in Flutter
    This post will introduce some ways to make a widget center horizontally and vertically within a screen. Use Center widget Center is a widget that make its child center-aligned within...
  • 4 Best Encryption Packages for Flutter
    Encryption is an important topic when it comes working with sensitive data. The first rule of cryptography club is to never invent a cryptography system yourself. Following are the best Flutter encryption...
  • Fetch JSON data from the internet in Flutter
    Fetching JSON data from an API is necessary task for most apps. Fortunately, Dart and Flutter provide some built-in packages to make working with external data and read JSON string...
  • 6 Best Flutter Packages to Create Charts and Graphs
    Flutter doesn't lack number when it comes to visual data packages. fl_chart This is a powerful Flutter chart library which supports Line Chart, Bar Chart, Scatter Chart and Pie Chart....
  • Flutter Color Generator
    This simple tool can be used to generate main color and its shades for Flutter The result can be used in Color.fromRGBO() and Color.fromARGB() to define color in a Flutter app. Color.fromRGBO() - This method creates...
  • Best Flutter Packages to Work with Odoo
    Odoo is an open source ERP which can be connect from outside to perform some database operations. Part of its Models API is available over XML-RPC and JSON-RPC. These Dart...
  • 8 Best Flutter Maps Packages
    Following are the best packages to add Maps services like Google Maps to your apps. google_maps_flutter This is a widget which display Google Maps. Completer<GoogleMapController> _controller = Completer(); GoogleMap( mapType:...
  • 5 Best Flutter Packages to Work with Firebase
    Firebase is Google's backend as a service for mobile application development. It provides developers with a variety of tools and services to help them develop quality apps, and grow their user...
  • 6 Best Barcode and QR Packages for Flutter
    Following are the best Flutter libraries for generating and scanning barcodes: Create barcode barcode barcode is a Dart library which can generate generic drawing operations. It is the base to...
  • 5 Best Flutter Toast Packages
    Toast is an import UI element in an Android app. It is used to notify users about result of an operation. These Flutter Toast packages adds this element to Flutter...
  • Pass Arguments in Flutter's Named Routes
    Navigator is the class behind navigating between the various routes of an application in Flutter. Navigator.pushNamed() method is used to navigate to a route with pre-defined name, hence named routes. The...
  • Open Link in Flutter
    url_launcher  is an official Flutter plugin for launching a URL in iOS, Android, web, Windows, macOS, and Linux. List of common schemes supported on mobile: http:<URL> , https:<URL>, e.g. https://tltemplates.comOpen URL in the...
  • How to display asset images in Flutter
    A Flutter app can include asset (sometimes called resources) files which is bundled and deployed with your app, and is accessible at runtime. The Image class provides a constructor to display asset...
  • 2 Best Dart Frameworks
    Dart language is a client-optimized language for fast apps on any platform, made by Google. It is a programming language optimized for developing user interfaces. Flutter Flutter is an open-source...
  • 4 Best Font Icon and Emoji Packages for Flutter
    When styling a Flutter app you can't forget about font family, emoji and icon. They will bring life to an app. google_fonts is a popular solution for free stylish...
  • 6 Best Date Picker and Calendar Libraries for Flutter
    There are many cool date picker and calendar libraries for Flutter. Following are the best ones: flutter_date_pickers This package provides day, week, range and month date pickers. DayPicker for one dayWeekPicker for whole...
  • 3 Best Flutter Printer Libraries
    These Flutter printer libraries will help making an app which allows document or receipt printing easier. esc_pos_printer ecs_pos_printer allows to print documents using an ESC/POS thermal WiFi/Ethernet printer. import 'package:esc_pos_printer/esc_pos_printer.dart';...
  • How to Create Flutter Blinking Icon
    In this post, we will learn how to use AnimatedBuilder to make a Flutter blinking icon. If you want to create blinking text, read this post first. class HomePage extends...
  • Best Bottom Navigation and Bottom Sheet Libraries for Flutter
    BottomAppBar is a container that is typically used with Scaffold. bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton. We need more than...
  • 5 Best Flutter Floating Action Button Libraries
    A floating action button (FAB) is a circular icon button that floats over content to promote a primary action in a Flutter application. It is often used to add quick access...
  • 4 Best Splash and Introduction Screen Libraries for Flutter
    Splash and Introduction screens are kind of important in an app. While splashing screen helps users notify our the developer's brand, introduction one helps user understand about the app and...
  • 3 Best Flutter Route and Navigator Libraries
    Google has introduced Navigator 2.0, the latest version of Flutter's official router and navigation. Its API adds new classes to the framework in order to make the app’s screens a...
  • 7 Best Flutter Text Libraries
    Text is one of the most popular widgets in Flutter. There are many features we want the widget can support. Therefore, we need these best Text libraries for our Flutter...
  • Create Circle Image in Flutter
    In most UI/UX you will see image getting displayed in a circular shape. In this post, we are going to create a circle image in a Flutter app. Below is...
  • Flutter SharedPreferences and Other Useful shared_preferences Libraries
     Shared Preferences is a way to store data key-value pair in the Android and iOS. shared_preferences The plugin wraps platform-specific persistent storage for simple data (NSUserDefaults on iOS and macOS,...
  • blinking_text - Add Blinking Animation to Flutter Text
    blinking_text is a simple Flutter plugin to create blinking text. Note: It supports all Text widget's properties except constructor. Install View on dependencies: blinking_text: ^0.0.4+1 Properties Besides Text's...
  • 2 Best Picture-In-Picture Libraries for Flutter
    Picture-In-Picture (PIP) is a special type of multi-window mode mostly used for video playback. This mode display a popup in the corner which plays a video, PIP is a new feature...
  • 4 Best Text-to-Speech and Speech-to-Text Libraries for Flutter
    These Flutter Text-to-Speech libraries will allow developers to bring TTS feature to their apps easily. flutter_tts flutter_tts is a plugin for Text to Speech. It supports many platforms, including iOS,...
  • How to use clipboard in Flutter
    Copying data to clipboard and pasting data from clipboard is quite simple in Flutter. However, you still need to install a necessary plugin to access clipboard. Install all of libraries...
  • Add Wave Animation in Flutter
    Wave animation is kind of cool to use in an app. It is the base to make a liquid animation. I posted a wave animation example here. Here is our...
  • Open Menu with Animation in Flutter
    This post will introduce about how to open menu with scale animation while make the main page smaller. This animation is introduced in this video. import 'package:flutter/material.dart'; class StackPage extends...
  • Add Desktop support for Flutter and write your first app
    Desktop support allows developers to write app which can be run on Windows, macOS, and Linux. Even though it is not ready for production yet, it won't keep us from...
  • How to hide keyboard in Flutter
    Working with TextField and Textformfield requires us to handle keyboard popup's behavior. Dismissing it at the right time can smooth a user's form input process. We can hide the keyboard...
  • device_info - Detect platform and OS version in Flutter
    device_info is a package which allows developers to get Android and iOS system information. Install the package: device_info: ^1.0.0 Then its classes can be imported with package:device_info/device_info.dart in a Dart...
  • Amazing Apps Built with Flutter
    Do you need to develop native applications in no time? Then the amazing Flutter framework is the place to be. This cross-platform mobile app framework is a powerful tool in...
  • enhanced_future_builder - Cache FutureBuilder Result without Refreshing FutureBuilder with setState
    enhanced_future_builder is a small library which wraps around FutureBuilder to improve its readability. It can also be used as an easy solution to prevent FutureBuilder from keep reloading whenever setState...
  • Evaluate a variable's data type in Dart
    is and is! operators can be used to determine a variable's data type or class. Example var data = ["Hello", 5, 5.12, [], {}, User('username', 'password')]; Using is and is!:...
  • How to Dynamically Change Page Title in Flutter Web
    When building an app you can set its title by using MaterialApp's title property. MaterialApp( title: 'App Title', home: MyHomePage(), ) Using title means you won't be able to change...
  • Convert BASE64 String into Image in Flutter
    Some backend systems save image as BASE64 string instead of its URL. Here is how to convert it into an image in Flutter. Convert BASE64 to image Uint8List _image =...
  • How to Change Background Color of a Screen in Flutter
    In most cases we use Scaffold as root of an app's home. There are 2 ways we can modify it Use ThemeData We can background color via scaffoldBackgroundColor. This approach...
  • Flutter FutureBuilder with ListView Example
    FutureBuilder is a Flutter widget that builds itself based on the latest snapshot of a future operation. This widget waits for an async function's result and calls the builder function...
  • Dart getters and setters examples
    In Object-Oriented Programming, getters and setters are special methods that provide access to an object’s properties. Each property has their implicit getters and setters. You can create your own getters and...
  • How to Add Launcher Icon to Your Flutter App
    There is a library called Flutter Launcher Icons which has been developed to help developers quickly generate launcher icons for both Android and iOS. You can get the latest version...
  • Read and Write a Text File or Multiple Files in Flutter
    With certain types of data, a text file can be preferred to other solution such as Shared Preferences, SQLite. The file we are going to read and write needs to...
  • Pass a method as a parameter to a widget in Flutter
    When we create custom widgets like TextField and RaisedButton, we need to send onChanged and onPressed callback to these custom widgets. There are 2 ways to pass a method as...
  • Flutter DropDownButton
    DropdownButton widget consists a list of DropdownMenuItem. It shows the currently selected item and an arrow that opens a menu for selecting another item. A simple DropdownButton A simple widget...
  • Flutter AlertDialog
    An alert dialog which consists of an optional title and an optional list of actions informs the user about situations that require acknowledgement. Open an dialog showDialog( context: context, barrierDismissible:...
  • Flutter Button
    There are many types of buttons as widgets in Flutter. ButtonBar - A horizontal arrangement of buttons.DropdownButton - Shows the currently selected item and an arrow that opens a menu...
  • Add Font Awesome Icons to Flutter App
    Font Awesome is an alternative to traditional old image icons, which is used by many app developers. Adding Font Awesome icons to a Flutter app is easy, thanks to font_awesome_flutter library....


Enable CanvasKit / Skia in Flutter Web

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true
flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

Quickly create Stateless and Stateful widgets

Android Studio can generate boilerplate for these two widgets if users type stless and stful to get Autocomplete Suggestion.

Use const before Constructor to avoid rebuilding a widget

If you want to prevent unwanted widget rebuilds always use const constructor.

  width: double.infinity,
  height: 300,
  decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: const Radius.circular(10.0),
          bottomRight: const Radius.circular(10.0))),
  child: Text('Container')

Spread Operator

The Dart 2.3 introduced Spread operator (...), which is useful for nested conditional UI Widget.

var a = [0,1,2];
var b = [...a,3];
print(b); //[0,1,2,3]
bool shouldBlink = true;
	children: [
	  Text('User choose condition below'),
	  if (shouldBlink) ...[
	      child: BlinkText(
	        'Blink Animation',
	        style: TextStyle(fontSize: 24),
	        endColor: Colors.blueAccent,
	        textDirection: TextDirection.ltr,
	        duration: Duration(seconds: 1),
	  ] else
	      Text('No blinking allowed')

Use Cascade Operator (..) tp chain properties and methods

	..username = 'TLTemplates'
	..password = $hashed

Check null with ?? operator

?? operator can be used to check if a variable is null and set a default value for that variable.

final endColor = widget.endColor ?? Colors.transparent;

Use SafeArea widget to avoid phone’s notch and app bar

SafeArea widget can keep notification bars and phone notches from overlapping with your app’s UI.

Use Spacer widget to responsively adding space between widgets

Putting a Spacer widget among widgets will help create equal spaces among them. These spaces are resized according to current screen size as well.

  children: [

Use pre-defined TextStyle

Styling individual Text widget is a repetitive task. You can use Theme.of(context).textTheme to use the pre-defined text style.

Text('headline', style: Theme.of(context).textTheme.headline1,),
Text('Body Text', style: Theme.of(context).textTheme.bodyText1,),

Bulk declaration

Variables of the same type can be defined all at once.

double width,height,degree,fontSize;
int age = 30,size = 24;

Delay an action

An object of Future class represents a delayed computation.

Future.delayed(Duration(seconds: 3), () {
  print('This is executed after 3 seconds');

Flutter logs

There is a command to log the output of the running flutter app, which is flutter logs. You can execute this command line in multiple terminal windows/tabs in Android studio, which allows you to look back in the history of the log output of the previous app run.

3 thoughts on “Best Resources to Learn Flutter & Dart”

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.