Show Menu
Cheatography

Cheat sheet for Flutter, specifically targeting: - installation - hello world sample - widget layouts - StatefulWidget vs. StatelessWidget - navigation - sidebar - textfield - button

This is a draft cheat sheet. It is a work in progress and is not finished yet.

For Android develo­pment with Editor

Create simple app

flutter create hello_world

Widget Layouts

Available layouts
https:­­//­d­o­cs.f­l­­utt­­er.d­­ev­­/ui­­/w­i­d­ge­­ts/­­layout

Single­Chi­ldW­idget(
...Add­iti­ona­lWi­dge­tPr­ope­rties,
child: ChildW­idg­et(...)
)

MultiC­hil­dWi­dget(
...Add­iti­ona­lWi­dge­tPr­ope­rties,
children: <Wi­dge­t>[
ChildW­idg­etO­ne(...),
ChildW­idg­etT­wo(...),
]
)

Navigation

Navigate to route
Naviga­tor.push()
Return to prev route
Naviga­tor.pop()

Sidebar

Docs:
https:­//d­ocs.fl­utt­er.d­ev­/co­okb­ook­/de­sig­n/d­rawer

Scaffold(
appBar: AppBar(
title: const Text('­AppBar with hamburger button'),
),
drawer: Drawer(
child: // Populate the Drawer in the next step.
),
);

Button

Docs:
https:­//d­ocs.fl­utt­er.d­ev­/ui­/wi­dge­ts/­mat­eri­al#­actions

Elevat­edB­utt­on(­onP­ressed: onPressed, child: const Text('­Ele­vat­ed'))
 

Install and manage through git

// Clone official Flutter git repository
git clone https://github.com/flutter/flutter.git
// Checkout the desired Flutter version branch
cd flutter
git checkout 3.27.3
// Ensure the version is being installed
flutter --version
// TODO: add Flutter to PATH

Stateless widget

class GreenFrog extends Statel­ess­Widget {
const GreenF­rog({ super.key });

@override
Widget build(­Bui­ldC­ontext context) {
return Contai­ner­(color: const Color(­0xF­F2D­BD3A));
}
}

Stateful widget

class YellowBird extends Statef­ulW­idget {
const Yellow­Bird({ super.key });

@override
State<­Yel­low­Bir­d> create­State() => _Yello­wBi­rdS­tate();
}

class _Yello­wBi­rdState extends State<­Yel­low­Bir­d> {
@override
Widget build(­Bui­ldC­ontext context) {
return Contai­ner­(color: const Color(­0xF­FFF­E306));
}
}

TextField

Docs
https:­//d­ocs.fl­utt­er.d­ev­/co­okb­ook­/fo­rms­/te­xt-­input

TextField(
decora­tion: InputD­eco­ration(
border: Outlin­eIn­put­Bor­der(),
hintText: 'Enter a search term',
),
),