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.

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.

Table of Contents
Dart Cheat Sheet

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 or ";

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),