10/26/22, 7:34 AM Flutter cheat sheet

How to do this in Flutter?

 Star 263 Follow 1,799 followers

Flutter and dart cheat sheet

Built with and by LESNITSKY

Contributions are very welcome!

https://howtodothisinflutter.com/#table-of-contents 1/18
10/26/22, 7:34 AM Flutter cheat sheet

Table of contents
⏫ ToC
Init
Healthcheck
Hello World
Stateless Widget
Required and default props
Stateful Widget
Combining props and state
Lifecycle hooks
Android Ink effect
Detecting Gestures
Loading indicator
Platform specific code
Hide status bar
Lock orientation
Show alert
Check if dev
Navigation
Arrays
Make http request
Async Await
JSON
Singleton
Debounce

Init

flutter create my_project

Specify organisation name

flutter create --org com.yourorg your_project

https://howtodothisinflutter.com/#table-of-contents 2/18
10/26/22, 7:34 AM Flutter cheat sheet

Healthcheck
⏫ ToC
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'),

),

),

);

Stateless Widget

import 'package:flutter/material.dart';

class Greeter extends StatelessWidget {

https://howtodothisinflutter.com/#table-of-contents 3/18
10/26/22, 7:34 AM Flutter cheat sheet

Greeter({Key key @required this.name}) : super(key: key);

final String name;

⏫ ToC

@override

Widget build(BuildContext context) {

return Container(

child: Text('Hello, $name'),

);

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

);

https://howtodothisinflutter.com/#table-of-contents 4/18
10/26/22, 7:34 AM Flutter cheat sheet

Stateful Widget
⏫ ToC
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()),

],

);

https://howtodothisinflutter.com/#table-of-contents 5/18
10/26/22, 7:34 AM Flutter cheat sheet

Combining props and state

⏫ ToC

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

);

https://howtodothisinflutter.com/#table-of-contents 6/18
10/26/22, 7:34 AM Flutter cheat sheet

Lifecycle hooks
⏫ ToC
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/Inher

super.didChangeDependencies();

@override

void dispose() {

// called after widget was unmounted from widget tree

super.dispose();

Android Ink effect

InkWell(

child: Text('Button'),

onTap: _onTap,

https://howtodothisinflutter.com/#table-of-contents 7/18
10/26/22, 7:34 AM Flutter cheat sheet

onLongPress: _onLongPress,

onDoubleTap: _onDoubleTap,

onTapCancel: _onTapCancel,

⏫ ToC
);

Detecting Gestures

GestureDetector(

onTap: _onTap,

onLongPress: _onLongPress,

child: Text('Button'),

);

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,

https://howtodothisinflutter.com/#table-of-contents 8/18
10/26/22, 7:34 AM Flutter cheat sheet

builder: (context, snapshot) {

return snapshot.connectionState == ConnectionState.done

? Text('Loaded')

⏫ ToC
: CircularProgressIndicator();

},

);

Platform specific code

import 'dart:io' show Platform;

if (Platform.isIOS) {

doSmthIOSSpecific();

if (Platform.isAndroid) {

doSmthAndroidSpecific();

Hide status bar

import 'package:flutter/services.dart';

void main() {

SystemChrome.setEnabledSystemUIOverlays([]);

Lock orientation

https://howtodothisinflutter.com/#table-of-contents 9/18
10/26/22, 7:34 AM Flutter cheat sheet

import 'package:flutter/services.dart';

void main() async {

⏫ ToC
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,

]);

runApp(App());

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(

https://howtodothisinflutter.com/#table-of-contents 10/18
10/26/22, 7:34 AM Flutter cheat sheet

child: Text('OK'),

onPressed: () {

print('OK pressed');

⏫ ToC
Navigator.of(context).pop();

},
),

],

);

},

);

Check if dev

bool isDev = false;

assert(isDev == true);

if (isDev) {

doSmth();

Navigation

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

),

);

https://howtodothisinflutter.com/#table-of-contents 11/18
10/26/22, 7:34 AM Flutter cheat sheet

⏫ ToC
class SecondScreen extends StatelessWidget {

void _pushSecondScreen(context) {

Navigator.push(context, MaterialPageRoute(builder: (context) =>

}

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

},

));

https://howtodothisinflutter.com/#table-of-contents 12/18
10/26/22, 7:34 AM Flutter cheat sheet

Arrays
⏫ ToC
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);

https://howtodothisinflutter.com/#table-of-contents 13/18
10/26/22, 7:34 AM Flutter cheat sheet

final reduced = items.fold({}, (acc, item) {

acc[item.id] = item;

return acc;

⏫ ToC
});

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

Make http request

dependencies:

http: ^0.12.0

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

});

https://howtodothisinflutter.com/#table-of-contents 14/18
10/26/22, 7:34 AM Flutter cheat sheet

Async Await
⏫ ToC
Future<int> doSmthAsync() async {

final result = await Future.value(42);

return result;

class SomeClass {

method() async {

final result = await Future.value(42);

return result;

JSON

import 'dart:convert' show json;

json.decode(someString);

json.encode(encodableObject);

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'],

https://howtodothisinflutter.com/#table-of-contents 15/18
10/26/22, 7:34 AM Flutter cheat sheet

photoUrl = json['photoUrl'];

Map<String, dynamic> toJson() {

⏫ ToC
return {

'displayName': displayName,

'photoUrl': photoUrl,

};

final user = User.fromJson(json.decode(jsonString));

json.encode(user.toJson());

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_annotation , build_runner and json_serializable to

dependencies

dependencies:

json_annotation: ^2.0.0

dev_dependencies:

build_runner: ^1.0.0

json_serializable: ^2.0.0

Update your code

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()

class User {

String displayName;

String photoUrl;

https://howtodothisinflutter.com/#table-of-contents 16/18
10/26/22, 7:34 AM Flutter cheat sheet

User({this.displayName this.photoUrl});

⏫ ToC
// _$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

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;

https://howtodothisinflutter.com/#table-of-contents 17/18
10/26/22, 7:34 AM Flutter cheat sheet

Debounce
⏫ ToC
Timer _debounce;

if (_debounce?.isActive ?? false) _debounce.cancel();

_debounce = Timer(const Duration(milliseconds: 500), () {

someFN();

});

Built with and by LESNITSKY

Contributions are very welcome!

MIT © Lesnitsky

https://howtodothisinflutter.com/#table-of-contents 18/18