The Ultimate Flutter Cheat Sheet

Flutter Cheat Sheet

Flutter is Google’s SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter’s online documentation is a great source of information, but sometimes you’d rather glance quickly at an example. This cheat sheet has some sample code. Just grab it and go!

Init

flutter create my_project

Specify organisation name

flutter create --org com.yourorg your_project
Code language: CSS (css)

Healthcheck

flutter doctor

Hello World

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello world!', home: Scaffold( body: Center( child: Text('Hello world'), ), ), ); } }
Code language: JavaScript (javascript)

Stateless Widget

import 'package:flutter/material.dart'; class Greeter extends StatelessWidget { Greeter({Key key @required this.name}) : super(key: key); final String name; @override Widget build(BuildContext context) { return Container( child: Text('Hello, $name'), ); } }
Code language: JavaScript (javascript)

Required and default props

import 'package:flutter/material.dart'; class SomeComponent extends StatelessWidget { SomeComponent({ @required this.foo, this.bar = 'some string', }); final String foo; final String bar; @override Widget build(BuildContext context) { return Container( child: Text('$foo $bar'), ); } }
Code language: JavaScript (javascript)

Stateful Widget

import 'package:flutter/material.dart'; class WidgetWithState extends StatefulWidget { @override _WidgetWithStateState createState() => _WidgetWithStateState(); } class _WidgetWithStateState extends State<WidgetWithState> { int counter = 0; increment() { setState(() { counter++; }); } decrement() { setState(() { counter--; }); } @override Widget build(BuildContext context) { return Row( children: <Widget>[ FlatButton(onPressed: increment, child: Text('Increment')), FlatButton(onPressed: decrement, child: Text('Decrement')), Text(counter.toString()), ], ); } }
Code language: PHP (php)

Combining props and state

import 'package:flutter/material.dart'; class SomeWidget extends StatefulWidget { SomeWidget({@required this.fruit}); final String fruit; @override _SomeWidgetState createState() => _SomeWidgetState(); } class _SomeWidgetState extends State<SomeWidget> { int count = 0; @override Widget build(BuildContext context) { return Container( child: Text('$count ${widget.fruit}'), ); } } class ParentWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: SomeWidget(fruit: 'oranges'), ); } }
Code language: JavaScript (javascript)

Lifecycle hooks

class _MyComponentState extends State<MyComponent> { @override void initState() { // this method is called before the first build super.initState(); } @override void didUpdateWidget(MyComponent oldWidget) { // this method IS called when parent widget is rebuilt super.didUpdateWidget(oldWidget); } @override didChangeDependencies() { // called when InheritedWidget updates // read more here https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html super.didChangeDependencies(); } @override void dispose() { // called after widget was unmounted from widget tree super.dispose(); } }
Code language: JavaScript (javascript)

Android Ink effect

InkWell( child: Text('Button'), onTap: _onTap, onLongPress: _onLongPress, onDoubleTap: _onDoubleTap, onTapCancel: _onTapCancel, );
Code language: JavaScript (javascript)

Detecting Gestures

GestureDetector( onTap: _onTap, onLongPress: _onLongPress, child: Text('Button'), );
Code language: JavaScript (javascript)

Loading indicator

class SomeWidget extends StatefulWidget { @override _SomeWidgetState createState() => _SomeWidgetState(); } class _SomeWidgetState extends State<SomeWidget> { Future future; @override void initState() { future = Future.delayed(Duration(seconds: 1)); super.initState(); } @override Widget build(BuildContext context) { return FutureBuilder( future: future, builder: (context, snapshot) { return snapshot.connectionState == ConnectionState.done ? Text('Loaded') : CircularProgressIndicator(); }, ); } }
Code language: JavaScript (javascript)

Platform specific code

import 'dart:io' show Platform; if (Platform.isIOS) { doSmthIOSSpecific(); } if (Platform.isAndroid) { doSmthAndroidSpecific(); }
Code language: JavaScript (javascript)

Hide status bar

import 'package:flutter/services.dart'; void main() { SystemChrome.setEnabledSystemUIOverlays([]); }
Code language: JavaScript (javascript)

Lock orientation

import 'package:flutter/services.dart'; void main() async { await SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, ]); runApp(App()); }
Code language: JavaScript (javascript)

Show alert

showDialog<void>( context: context, barrierDismissible: false, builder: (BuildContext context) { return AlertDialog( title: Text('Alert Title'), content: Text('My Alert Msg'), actions: <Widget>[ FlatButton( child: Text('Ask me later'), onPressed: () { print('Ask me later pressed'); Navigator.of(context).pop(); }, ), FlatButton( child: Text('Cancel'), onPressed: () { print('Cancel pressed'); Navigator.of(context).pop(); }, ), FlatButton( child: Text('OK'), onPressed: () { print('OK pressed'); Navigator.of(context).pop(); }, ), ], ); }, );
Code language: PHP (php)

Check if dev

bool isDev = false; assert(isDev == true); if (isDev) { doSmth(); }
Code language: JavaScript (javascript)
import 'package:flutter/material.dart'; class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: RaisedButton( child: Text('Go to SecondScreen'), onPressed: () => Navigator.pushNamed(context, '/second'), ), ); } } class SecondScreen extends StatelessWidget { void _pushSecondScreen(context) { Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen())); } @override Widget build(BuildContext context) { return Column( children: <Widget>[ RaisedButton( child: Text('Go back!'), onPressed: () => Navigator.pop(context), ), RaisedButton( child: Text('Go to SecondScreen... again!'), onPressed: () => _pushSecondScreen(context), ), ], ); } } void main() { runApp(MaterialApp( initialRoute: '/', routes: { '/': (context) => FirstScreen(), '/second': (context) => SecondScreen(), }, )); }
Code language: PHP (php)

Arrays

final length = items.length; final newItems = items..addAll(otherItems); final allEven = items.every((item) => item % 2 == 0); final filled = List<int>.filled(3, 42); final even = items.where((n) => n % 2 == 0).toList(); final found = items.firstWhere((item) => item.id == 42); final index = items.indexWhere((item) => item.id == 42); final flat = items.expand((_) => _).toList(); final mapped = items.expand((item) => [item + 1]).toList(); items.forEach((item) => print(item)); items.asMap().forEach((index, item) => print('$item, $index')); final includes = items.contains(42); final indexOf = items.indexOf(42); final joined = items.join(','); final newItems = items.map((item) => item + 1).toList(); final item = items.removeLast(); items.add(42); final reduced = items.fold({}, (acc, item) { acc[item.id] = item; return acc; }); final reversed = items.reversed; items.removeAt(0); final slice = items.sublist(15, 42); final hasOdd = items.any((item) => item % 2 == 0); items.sort((a, b) => a - b); items.replaceRange(15, 42, [1, 2, 3]); items.insert(0, 42);
Code language: PHP (php)

Make http request

dependencies: http: ^0.12.0
Code language: CSS (css)
import 'dart:convert' show json; import 'package:http/http.dart' as http; http.get(API_URL).then((http.Response res) { final data = json.decode(res.body); print(data); });
Code language: JavaScript (javascript)

Async Await

Future<int> doSmthAsync() async { final result = await Future.value(42); return result; } class SomeClass { method() async { final result = await Future.value(42); return result; } }
Code language: JavaScript (javascript)

JSON

import 'dart:convert' show json; json.decode(someString); json.encode(encodableObject);
Code language: JavaScript (javascript)

json.decode returns a dynamic type, which is probably not very useful

You should describe each entity as a Dart class with fromJson and toJson methods

class User { String displayName; String photoUrl; User({this.displayName, this.photoUrl}); User.fromJson(Map<String, dynamic> json) : displayName = json['displayName'], photoUrl = json['photoUrl']; Map<String, dynamic> toJson() { return { 'displayName': displayName, 'photoUrl': photoUrl, }; } } final user = User.fromJson(json.decode(jsonString)); json.encode(user.toJson());
Code language: JavaScript (javascript)

However this approach is error-prone (e.g. you can forget to update map key after class field was renamed), so you can use json_serializable as an alternative

Add json_annotationbuild_runner and json_serializable to dependencies

dependencies: json_annotation: ^2.0.0 dev_dependencies: build_runner: ^1.0.0 json_serializable: ^2.0.0
Code language: CSS (css)

Update your code

import 'package:json_annotation/json_annotation.dart'; part 'user.g.dart'; @JsonSerializable() class User { String displayName; String photoUrl; User({this.displayName this.photoUrl}); // _$UserFromJson is generated and available in user.g.dart factory User.fromJson(Map<String, dynamic> json) { return _$UserFromJson(json); } // _$UserToJson is generated and available in user.g.dart Map<String, dynamic> toJson() => _$UserToJson(this); } final user = User.fromJson(json.decode(jsonString)); json.encode(user); // toJson is called by encode
Code language: JavaScript (javascript)

Run flutter packages pub run build_runner build to generate serialization/deserialization code

To watch for changes run flutter packages pub run build_runner watch

Read more about json and serialization here

Singleton

class Singleton { static Singleton _instance; final int prop; factory Singleton() => _instance ??= new Singleton._internal(); Singleton._internal() : prop = 42; }
Code language: PHP (php)

Debounce

Timer _debounce; if (_debounce?.isActive ?? false) _debounce.cancel(); _debounce = Timer(const Duration(milliseconds: 500), () { someFN(); });
Code language: JavaScript (javascript)

Model

Dart has class a nice way to create an init is using the approach like { this.param, this.param2 }.

class New { final String element; final double number; New({ this.element, this.number }); }
Code language: JavaScript (javascript)

In order to have mandatory params you need to include flutter/material.dart so you can transform you class to

class En { final String element; final double number; New({ @required this.element, @required this.number }); }
Code language: JavaScript (javascript)

If you wrap a param between [] that param is optional instead.

Keyboard

If you need to hide an open keyboard you need to use FocusScope.

FocusScope.of(context).requestFocus(FocusNode());

So basically you fake the current focus node a new one not connected to any form/textarea.

We hope you found this short guide to Flutter useful. Realtor.com, eBay, BMW, Groupon, Google Assistant and The New York Times have all worked with Flutter to improve their apps. Flutter can help you create highly aesthetic and valued apps on mobile, web and desktop.

%d bloggers like this: