Best Resources to Learn Flutter & Dart: Tutorials & Courses, Tips, Cheat Sheet

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. In this post, you will find the bets resources to learn Flutter, be it online courses, blogs, or detailed tutorials.

Flutter Template Examples

This Android app is a collection of widgets and animations with source code, all built with Flutter. You can learn the basics of Flutter widgets and find source codes for many Flutter design patterns.

Dart Cheat Sheet

Understand Dart language before learning Flutter!

Declare variables

String website = 'TLTemplates';
final items = ['Item A', 'Item B', 'Item C'];
const size = [200, 300];

//dynamic type can have value of any type
var username;
username = 'tester';
username = 10000;

Working with Null

//If b is not null, set a to b. Otherwise, set a to 0.
a = b ?? 0; 
//if a is null, set 'default value' to a.
a ??= 'default value'; 
//if a is not null, access property b of object a.
a?.b 
//chain with property null check
a?.b?.aMethod() 

String interpolation

'${10 - 3}' //7

//The number's floor value is 100
double width = 100.2545;
print('The number\'s floor value is ${width.floor()}'); 

//equivalent: someObject.toString()
'$someObject' 

//escape quote with slash
String message = 'John\'s car was fixed in 2019.';

//preserving format with '''
'''
This is a long message
The 2nd line lies here
'''

//raw string with r
var str = r"This string won't decode \n or \t";

Control Flow

//if
var a = 10;
if(a > 0){
  print('positive');
} else if(a == 0) {
  print('zero');
} else {
  print('negative');
}

//when
enum Type { normal, boost, enhance, reduce }
final usedType = Type.normal;
switch (usedType) {
  case Type.normal:
    break;
  case Type.boost:
    break;
  default:
    break;
}

//for loop
for(var j = 0; j < 100; j++){

}

//while, do-while loop
var i = 0;
while(i < 10){
  i++;
}

int a = 10;
do {
  a++;
}

//for each
for(var type in Type){
  print('$type');
}

Extension methods

extension <extension name> on <type> {
  (<member definition>)*
}


print(32.toAgeString());

extension AgeHandler on int {
	String toAgeString() {
		String text = this > 1 ? 'years old' : 'year old';
		return '$this year(s) old';
	}  
}

Collections

//create list of 100 integer from 0 to 99
List<int> items = List.generate(100, (index) => index);
//loop
for (var i in items) {
  print(i);
}
for(var i = 0; i < items.length; i++){
  print(i);
} 
//add item to list using if
var cars = [
  'Huyndai',
  'Madza',
  if (isJapan) 'Toyota'
];

//set
var intSet = <int>{};
inSet.addAll([1, 2, 3, 4]);
inSet.remove(2);
inSet.add(5); //[1, 3, 4, 5]
intSet.map((number) => number*2).toList(); //[2, 6, 8, 10]
intSet.where((number) => number < 8); //[2, 6]
var halogens = {'fluorine', 'chlorine', 'bromine', 'iodine', 'astatine'};

var intersection = setOne.intersection(secTwo);
var union = setOne.union(secTwo);

//map
var strMap = Map<String, int>();
var gifts = {
  'first': 'partridge',
  'second': 'turtledoves',
  'fifth': 'golden rings'
};

gifts.keys.forEach(print); //'first', 'second', 'fifth'
gifts.values.forEach(print); //'partridge', 'turtledoves', 'golden rings'
gifts.forEach((key, value) => print('$key: $value'));

Class

//constructors
Point(this.x, this.y); //normal constructor
factory Point(int x, int y) => ...; //factory constructor
Point.fromJson(Map json) {
    x = json['x'];
    y = json['y'];
} //named constructor

//getters and setters
class MyClass {
  String job;
  String name;

  MyClass(String job, String name);

  String get display => '$name - $job';

  set title(String value) {
    if (value.isNotEmpty) {
      job = value;
    }
  }
}
//inheritance
class SubClass extends MyClass{
  bool activated;
  SubClass(String job, String name) : super(job, name);
}

//chain methods
//equivalent: user.age = 10;user.name = 'Tester'
user..age = 10..name = 'Tester';

Flutter Cheat Sheet

Container

Container

Container(
  width: 100,
  height: 100,
  color: Colors.red,
)

SizedBox

SizedBox(
	width: 100,
	height: 100,
	child: Container(
	  color: Colors.red,
	),
)

ConstrainedBox

ConstrainedBox(
  constraints: BoxConstraints.expand(),
  child: Container(
    color: Colors.red,
))

Horizontal Layout

Row

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    )
  ],
)

Vertical Layout

Column

Column(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
	children: [
	  Container(
	      width: 100,
	      height: 100,
	      color: Colors.red,
	    ),
	    Container(
	      width: 100,
	      height: 100,
	      color: Colors.green,
	    ),
	    Container(
	      width: 100,
	      height: 100,
	      color: Colors.blue,
	    )
	],
)

Relative / Absolute Layout

Stack

Stack(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
      Container(
        width: 60,
        height: 60,
        color: Colors.blue,
      )
    ],
)

Align

Align(
    alignment: Alignment.topLeft,
    child: Container(
      width: 80,
      height: 80,
      color: Colors.blue,
      child: Center(child: Text('topLeft')),
    ),
)

Positioned

Stack(
    children: [
      Positioned(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
      Positioned(
        left: 100,
        child: Container(
          width: 80,
          height: 80,
          color: Colors.green,
        ),
      ),
      Positioned(
        bottom: 0,
        child: Container(
          width: 60,
          height: 60,
          color: Colors.blue,
        ),
      )
    ],
  )

Navigation

Drawer

Scaffold(
      appBar: AppBar(title: Text('Drawer')),
      drawer: Drawer(),
    )

Bottom Bar

Scaffold(
  appBar: AppBar(title: Text('Bottom Navigation')),
  backgroundColor: Colors.blueGrey,
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
)

Item List

ListView

ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.blue[600],
        child: const Center(child: Text('Item A')),
      ),
      Container(
        height: 50,
        color: Colors.blue[500],
        child: const Center(child: Text('Item B')),
      ),
      Container(
        height: 50,
        color: Colors.blue[100],
        child: const Center(child: Text('Item C')),
      ),
    ],
)

GridView

GridView.count(
    crossAxisCount: 2,
    children: <Widget>[
      Container(
        color: Colors.red,
      ),
      Container(
        color: Colors.green,
      ),
      Container(
        color: Colors.blue,
      ),
    ],
  )

SliverList

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Header'),
      backgroundColor: Colors.blue,
      expandedHeight: 300.0,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network('https://cdn.pixabay.com/photo/2017/12/13/16/40/background-3017167_960_720.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(
            height: 50,
            color: Colors.orange[600],
            child: const Center(child: Text('Item A')),
          ),
          Container(
            height: 50,
            color: Colors.orange[500],
            child: const Center(child: Text('Item B')),
          ),
          Container(
            height: 50,
            color: Colors.orange[100],
            child: const Center(child: Text('Item C')),
          ),
        ],
      ),
    )
  ]
)

Learn Flutter with 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. This is the best course to learn Flutter for beginners.
  • 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.
  • Suragch – A variety of articles about Flutter and Dart development with an emphasis in explaining difficult topics to new learners.
  • Flutter Clutter – This site has a collection of tutorials, troubleshooting and answers to common questions regarding app development with Flutter. The owner uploads tutorials and flutter basics on a regular basis.

Architecture Tutorials

Flutter for Games

Must-Have Libraries

  • Flutter Plugins: This repository consists of plugins developed by official Flutter Team. They handle backbone features of a mobile app such as Alarm Manager, Firrbase service, WebView, Video Player, Maps, etc.
  • 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.
  • Charts – This plugin is developed by Google team. It supports over 50 types of charts and designs.
  • 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 fonts.google.com 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.
  • Sqflite: SQLite Flutter plugin. It supports transactions and batches, automatic version managment during open, helpers for insert/query/update/delete queries, and DB operation executed in a background thread on iOS and Android.
  • shared_preferences: Wraps NSUserDefaults (on iOS) and SharedPreferences (on Android), providing a persistent store for simple data.
  • Login: This supports login with FaceID, TouchID, and Fingerprint Reader on Android.
  • Flutter Location: This plugin handles getting location on Android and iOS. It also provides callbacks when location is changed.
  • QR Code Reader: QR Code reader via camera
  • Battery: This plugin allows app to access to various information about the battery.
  • Zebra EMDK: Use Zebra EMDK to access Barcode Scanner API.
  • Proximity Sensor Plugin: A plugin to access the proximity sensor of your device
  • Geolocation: This is a fully featured geolocation plugin which supports Manual and automatic location permission management, current one-shot location, continuous location updates with foreground and background options.
  • Local Notifications: This help dipslay local notifications. It can display basic notifications, schedule when notifications should appear, show a notification periodically or at a specified time.
  • Google Mobile Vision: This is an implementation of Google Mobile Vision.
  • Offline: A tidy utility to handle offline/online connectivity.
  • 3D Object: Renders a wavefront .obj on to a canvas.
  • Speech Recognition: A flutter plugin to use the speech recognition iOS10+ / Android 4.1+
  • Chewie: The video_player plugin provides low-level access to video playback. Chewie uses the video_player under the hood and wraps it in a friendly Material or Cupertino UI.
  • Audio Plugin: Play audio files.

Starter Kits / Templates

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.

ProKit

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

Shoppers

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

FluxNews

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

  • Flutter App and UI Templates – This page list all common layout widgets used in Flutter, and a collection of template boilerplate for certain designs.
  • 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.

Tools

FlutLab
  • 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.
  • Repix.app – Create beautiful screenshots for App Store and Play Store.
  • Previewed.app – Create intro videos, screenshots for your app and for FREE.

Blog Posts

Designing complex layouts for applications can take time. Sometimes you want to show a page before it is finished, but you do not want to show a blank page. Flutter provides a widget that can be used to put something...

FadeTransition is a neat Flutter widget that animates the opacity of its child. This widget can be set with a fading animation to reveal or hide a widget. To change the animation for a child widget, you must pass in...

If you want to animate decoration property of a widget, you can use DecoratedBoxTransition. It is the animated version of DecoratedBox widget. Besides using AnimatedContainer to animate a Container's property, we can also use DecoratedBoxTransition. import 'package:flutter/material.dart'; class Homepage extends...

AnimatedSize is a Flutter animation widget that allows to animate its child's size during a period. AnimatedSize doesn't work well on animation reversing. This might be a bug. import 'package:flutter/material.dart'; class Homepage extends StatefulWidget { const Homepage({Key? key}) : super(key:...

AnimatedModalBarrier widget prevents users to interact with its child, which is a widget behind it. In this AnimatedModalBarrier example, we try showing a barrier that hide the content. import 'package:flutter/material.dart'; class Homepage extends StatefulWidget { const Homepage({Key? key}) : super(key:...

AnimatedPositioned is an animated version of Positioned widget. It can transition the child's position when there is a change in its child's position values. The widget requires to be a child of Stack widget to make it work. import 'package:flutter/material.dart';...

PhysicalModel properties can be animated with its animated widget version, AnimatedPhysicalModel. The widget can animate borderRadius, elevation, and color (if the Color property is set). This post will introduce an AnimatedPhysicalModel example of animating all values which are possible to...

Have you ever tried to animate the opacity of a Flutter widget? It's actually super easy with AnimatedOpacity widget. AnimatedOpacity is an animated version of Opacity widget. The widget is a great way to keep your child's opacity level animation...

When designing a Flutter app, the layout of the site is crucial. Creating an attractive and user-friendly design can help to boost user interaction. But how do you know what layout will work best for you? There are many options...

Dismissible is a widget that can be dismissed by dragging in the indicated direction. With Dismissible widget, it is as easy to dismiss a widget on your screen as if you were dragging the object away with your finger. In...

AnimatedCrossFade widget in Flutter can cross-faded between two given children and animates itself between their sizes. Basically, it provides fade transition effects between two widgets. AnimatedCrossFade import 'dart:math'; import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class...

To make an app's UI alive, we use animations which is a complex procedure. Ways of Animation Implementation There are 2 different ways of implementing animations you can use when creating animations in Flutter. From fluter.dev Implicit Animations This type...

A template is a prebuilt project that offers everything you need for building your app - design resources, code samples, and more. Flutter templates can be used to kick-start a project with a variety of fully-functional screens and accompanying business...

AnimatedContainer is an animated version of Flutter Container. It gradually changes its values over a defined duration. This widget automatically animate between the old and new values of properties such as height, box decoration when they change. Bar chart animation Each...

AnimatedAlign can automatically transition the child's position over a given duration whenever the given alignment changes. import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { Alignment _alignment = Alignment.center; void _move(Alignment...

These packages are useful when one wants to load an URL within an app without opening OS's browser like Chrome or Safari. easy_web_view Easy Web Views is a widget that shows HTML content like a web browser. It supports web,...

Dart offers dart:io package for reading file. To traverse an XML file, we need more than that package. xml xml is a Dart library for parsing, traversing, querying, transforming and building XML documents. var xmlString = '<?xml version="1.0"?> <root> <item>...

There are several way to add shadow to a Container. BoxDecoration with BoxShadow Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(16), boxShadow: [ BoxShadow( color: Colors.blueGrey, blurRadius: 4, offset: Offset(4, 8), // Shadow position ), ], ),...

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 such as dialogs or cards. ElevatedButton replaces RaisedButton widget. Basic...

Color Mixer is a minimalist game made with Flame engine. It is a simple game template developed to try some features of the under development game engine. How to play: Tap 2 color cards in the bottom to mix them...

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: false, builder: (_) => AlertDialog( title: Text('Result'), content: Text('Dialog content'),...

Many developers who fall in love with Flutter might ask a question about the capability of Flutter in game development some times. The good news is that there are libraries which have been developed to allows game creation in Flutter....

PageView can be used to show a scrollable list that works page by page. Each child of a page view is forced to be the same size as the viewport. Basics Display a list of 3 pages with scroll direction...

Running a task once a while is a common task in most features. Timer Timer is a count-down timer that can be configured to fire once or repeatedly. import 'dart:async'; import 'package:flutter/material.dart'; import 'package:jiffy/jiffy.dart'; class TimerPage extends StatefulWidget { final...

Jiffy is a Dart date time package for parsing, manipulating, querying and formatting dates. Install the package jiffy: ^4.0.0 Basic usage //create Jiffy object from string or map Jiffy("2021-03-25"); // A calendar date part Jiffy("2021/03/25"); // A calendar date part...

CustomPainter is an interface used by CustomPaint and RenderCustomPaint. This interface is the solution when we need to create a highly customized user interface. Draw a shape We use CustomPaint to draw on. CustomPaint( painter: CenterCircle(), child: Center( child: Text('Loading...'), ), )...

BottomNavigationBar is sticky at the bottom of an app to allow user to switch among a small number of views. The total number of views should be between 3 and 5. Basic BottomNavigationBar Here is minimum requirements for a BottomNavigationBar...

Align widget aligns its child within itself and optionally sizes itself based on the child's size. Since Align wraps any widget based on the Alignment direction to its parent widget, we prefer using Stack as its parent when we need...

Opposite of Row is Column, which can display its children in a vertical array. Column with 3 containers center using MainAxisAlignment.center. Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 120, height: 120, color: Colors.blue, ), Container( width: 120, height: 120, color:...

A row can display its children in a horizontal array. If you want to display widget into columns or display an icon to the left of a label, you can use Flutter Row widget. Row with 3 columns and aligned...

Container is a widget that combines common painting, positioning, and sizing widgets. Flutter Container widget is used frequently in a Flutter app's screen. Container( padding: const EdgeInsets.all(16.0), color: Colors.blue, width: 100.0, height: 100.0, child: Text('100.0'), ) Make container fill the...

video_player is a package which displays inline video with other Flutter widgets on Android, iOS, and web. Install the package by adding this line to pubspec.yaml: video_player: ^1.0.1. Next step is to allow internet permission to Android and iOS <key>NSAppTransportSecurity</key>...

sketcher package provides a widget which allows use to ,make hand writing over it. Start by including the sketcher package with sketcher: ^1.0.4. Then the drawing widget can be shown in a screen by add Sketch widget to a parent widget....

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 implement in an app with many pages of the same...

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 provides a variety of options for customizing the tree's theme...

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 dependency to pubspec.yaml before using code below. drawing_animation: ^0.1.4 import...

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 to apply custom animation. Flip Card To create a flip...

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 either Android or iOS, you need to add permissions to...

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, Widget child} ) ImageFilter.blur constructor This constructor creates an image...

There are many image libraries written for Flutter which will help developers make Flutter apps related to image easier. ImageEditorPro - This library offers simple, easy support for image editing. You can use custom paints, text, filters, emoji and sticker...
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 that we forget to write code with good style. That's...

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 to animate ClipPath, read this post. Wave ClipPath( clipper: WaveShape(),...

SVG stands for Scalable Vector Graphics, and is a language that can be used to create vector graphics. SVG files are made up of XML code which defines the drawings as shapes and paths. These lines can then be filled...

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 which can generate lorem ispum text and set placeholder. Lorem...

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. kToolbarHeight is the height of the toolbar component of the...

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 feature in a page in your Flutter project. See also:...

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 the best Flutter animation libraries below to use in your...

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 simple AppBar with action buttons @override Widget build(BuildContext context) {...
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 for building interactive areas, which can replace the material's Inkwell. It allows...

It's been a while since the world has seen a radical shift in how content is displayed on screens, but that time may be coming soon. The mobile era introduced us to responsive design as the norm for viewing content...

There are 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 widget or to put it into a new row, we...

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 table const tableStudent = SqfEntityTable( tableName: 'category', primaryKeyName: 'id', primaryKeyType:...

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 with different notches is hard. So Google introduced SafeArea widget,...

This post will introduce some ways to make a Flutter widget center horizontally and vertically within a screen. Use Center widget Center is a widget that make its child center-aligned within itself. Center widget will be as big as possible...
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 packages: encrypt encrypt is a set of high-level APIs over...

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 easier. We need 2 packages, http and dart:convert, to handle...

Chart and graphs are often used to illustrate a point or communicate information visually. They can be very helpful in learning about different topics, as they allow for quick comparisons between multiple data sets. Flutter doesn't lack number when it...

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 colors in a Flutter app. These colors can be combined to define a theme. Color.fromRGBO() - This method creates a...
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 & Flutter plugins use these protocols to communicate with Odoo....

Following are the best packages to add Maps services like Google Maps to your apps. google_maps_flutter This is a Flutter widget which displays Google Maps. Completer<GoogleMapController> _controller = Completer(); GoogleMap( mapType: MapType.hybrid, initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) { _controller.complete(controller); },...
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 base. Firebase is the go to solution of many developers...

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 create flutter widgets or pdf barcodes. There are many 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 app as a widget. fluttertoast fluttertoast is flexible in implementation...
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 following approach is what I use in this quiz web...

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://www.tldevtech.comOpen URL in the default browsermailto:<email address>?subject=<subject>&body=<body>, e.g. mailto:[email protected]?subject=Contact&body=New%20pluginCreate email totel:<phone number>, e.g. tel:+1 555 111...

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 image easily. Steps to include and display images in assets...

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 framework which can be used to build native-looking Android and...

When styling a Flutter app you can't forget about font family, emoji and icon. They will bring life to an app. google_fonts fonts.google.com is a popular solution for free stylish font on web. This official package, google_fonts, allows you to easily...

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 weekRangePicker for random rangeMonthPicker for month Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate,...

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'; const PaperSize paper = PaperSize.mm80; final profile = await CapabilityProfile.load();...

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 StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState...

BottomAppBar is a container that is typically used with Scaffold's bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton. We need more than that, with beautiful icons and animations. A Bottom Sheet shows...

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 to actions such as Add New, Refresh, Next Step, etc......

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 how to use some major features of the app. Following...
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 function of the app state and to provide the ability...

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 apps. auto_size_text Text is bound by font size. This widget...

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 how to create a circle image downloading from an URL....

 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, SharedPreferences on Android, etc.) Example import 'package:shared_preferences/shared_preferences.dart'; class SharedPrefs {...

blinking_text is a simple Flutter plugin to create blinking text. Note: It supports all Text widget's properties except Text.rich constructor. Install View on https://pub.dev/packages/blinking_text. dependencies: blinking_text: ^0.0.4+1 Properties Besides Text's properties, the BlinkText supports 4 more properties for blinking animation:...
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 which only works on new version of Android and iOS....
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, Android, Web, & macOS. FlutterTts flutterTts = FlutterTts(); Future _speak()...
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 below in pubspec.yaml dependencies: flutter: sdk: flutter clipboard_manager: ^0.0.4 clipboard:...

Wave animation has grown into a popular way to express things visually on the internet. It is an excellent way for people to tweet, post videos, or share gifs with friends. This type of animation can be done in many...

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 StatefulWidget { @override _StackPageState createState() => _StackPageState(); } class _StackPageState...

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 playing around with writing an desktop app. Warning: Work in progress! This...
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 by 2 ways. FocusScope.of(context).requestFocus(new FocusNode()); FocusScopeNode currentFocus = FocusScope.of(context); FocusManager.instance.primaryFocus.unfocus();
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 file. DeviceInfoPlugin class in this package can provide device and...

Do you need to develop cross-platform mobile apps in no time? Then the amazing Flutter framework is the place to be. This framework is a powerful tool in building apps, websites, and desktop software. Flutter is free, open-source, and offers...
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 is called. Simple usage EnhancedFutureBuilder( future: _futureResults(), rememberFutureResult: false, whenDone:...
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!: if (data[0] is String) print(data[0]); if (data[1] is int) print(data[1]);...
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 it without rebuilding the entire tree. It is fine for...
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 = Base64Decoder().convert(product.image); Display it with Image.memory Container( height: 80, width: 80,...

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 affects background color of all screens if there is no...

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 where we build the widget as soon as the result...
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 setters if needed. class Sale { final int id; final...

There is a library called Flutter Launcher Icons which has been developed to help developers quickly generate launcher icons for both Android and iOS versions of the app. You can get the latest version of the library on pub.dev. It...
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 be in a sub-folder of assets folder and defined in...
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 a parameter. Use VoidCallBack VoidCallBack is used when send parameter...

DropDownButton is a widget that you can use to implement a menu in your app. It’s an easy way to add buttons and other items for the user to interact with, without having to create complex layouts or write code....

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 for selecting another item.FlatButton (Deprecated, replaced by TextButton) - A...

Font Awesome is an alternative to traditional old image icons, which is used by many app developers. The FontAwesome team has been working hard to create a library of scalable vector icons that can be used in web design. The...

Tips

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.

Container(
  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;
Column(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
	children: [
	  Text('User choose condition below'),
	  if (shouldBlink) ...[
	    Center(
	      child: BlinkText(
	        'Blink Animation',
	        style: TextStyle(fontSize: 24),
	        beginColor: Colors.red,
	        endColor: Colors.blueAccent,
	        textDirection: TextDirection.ltr,
	        duration: Duration(seconds: 1),
	      ),
	    ),
	  ] else
	    ...[
	      Text('No blinking allowed')
	    ]
	],
)

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

Account()
	..username = 'TLTemplates'
	..password = $hashed
	..setActive();

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.

Row(
  children: [
    Text('Text'),
    Spacer(),
    Text('Text'),
    Spacer(),
    Text('Text'),
    Spacer(),
    Text('Text'),
    Spacer(),
    Text('Text'),
  ],
),

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.

4 thoughts on “Best Resources to Learn Flutter & Dart: Tutorials & Courses, Tips, Cheat Sheet”

Leave a Comment

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