Scribd
Upload
206 views

Flutter Cheat Sheet

Uploaded by

Hexennacht
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
206 views

Flutter Cheat Sheet

Uploaded by

Hexennacht
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 2
THE ULTIMATE FLUTTER CHEAT SHEET STRUCTURE 2 Use a Scaffold as the base layer for all your screens Scat fold( body: Widget, appBar: AppBar ) A.Column arranges things vertically quite nicely cotunn( children: () mainAxisALignnent: MainAxisALignnent.start, crossAxisALignment: CrossAxisALignnent.stretch, ) ‘and a Row is great for lining things up horizontally Row( children: [1, mainAxisALignnent: MainAxisALignnent.spacesetween, crossAxisALignment: CrossAxisALignnent.center ) IF your Row or CoLumn overflows, try replacing them with a ListView (to allow scrolling) or a Wrap to wrap to a new line Use a ListView to hold a list of items (in any axis). Similar to Row/Column but also supports scrolling. Listview( scroUlDirection: Axis.horizontal, shrinkwrap: bool, // don’t fil children: [] lazy-load itens using: itencount: 1 itenBuilder: (context, index) => Widget, Finally, say hello to the most por ular widget™, Container Container child: Widget, alignnent: ALignment.topLeft, padding: Edgernsets.alt(4), decoration: BoxDecoration() width: 150) heigh BoxDecoration has some pretty nifty properties: BoxDecoration( color: Colors.red, // background border: Border.ali(width: 2), borderRadius: BorderRadius. circular(5) boxShadow: (], gradient: LinearGradient(colors: [1), IF YOU LIKED THIS. ALIGNMENT & LavouT (fj Order brings joy. We could all use some extra joy. Center does pretty much what you'd expect: Center(child: Widget) ALign allows you to place things wherever you want: ALign( child: Widget, alignnent: ALignnent.topLeft, ) Note: To specify position by pixe's, use Positioned Expanded causes the child to expand along the main axis Expanded w big, relative adjacent Expa A Stack is perfect for drawing things on top of each other: (l, alignnent: Alignment. topLeft, ) Finally, SizedBox gives you precise control over the space available (often used as a space’ SizedBox( child: Widget, width: 150, height: 100 ) DISPLAY & Text("Aloha”, style: TextStyle) Textstyle( fontSize: 18, color: Colors. red fontNeight: FontWeight bold, fontFamily: ‘Raleway’, height: 1.5, // 1.5 + ) Use RichText to style words on the same line differently RichText( text: TextSpan(children: [ TextSpan(text: “Hi”, style: Textstyle), TextSpan(text: “there”, style: TextStyle), » ) Use Icon to quickly drop some commonly used icons Teon( Icons. tiner, size: 24, fensions, in px color: Colors. red ) Finally, Image to display your own asset Image. asset( “/assets/path. png’ width: 24, height: 24,THE ULTIMATE FLUTTER CHEAT SHEET — INPUTS & CONTROLS ww TextField displays a keyboard input field TextField( controller: TextEditingControtter, keyboardtype: TextEnputType. nunber decoration: InputDecoration, onchanged: (newVal) => {}, FlatButton shows you a button that you can press FlatButton( child: Widget, // Usually Text o} onPressed: () => 0, textColor: Colors. red, ) Note: I's besties Out LineButton and RaisedButton accept similar parameters Create your own dropdown using DropDownButton: DropDownButton( value: curValue, cted option icon: Teon(Icons.arrow_drop_dovn) , onchanged: (newVal) => (, itens: [ DropDownNenuten( value: “opti”, child: Text(“option 1”) Mo 1 ) RESPONSIVE DESIGN rh Use MediaQuery to determine what device size you're using; adjust your output accordingly. final width = HediaQuery.of (context) width; if (width [], // usually FlatButton’s ) ‘shonDialog context: context, builder: (_) => AlertDialog( barrierDismissible: bool, // hide on background tap dh Use a SnackBar isplay short-lived messages Scaffold. of (context) .showSnackBar ( SnackBar( content: Text(‘Greetings’), action: SnackBarAction ) To respond to user interactions, try a GestureDetector: GestureDetector( childTapped() , Finally, to navigate between screens use Navigator: Navigator of (context) .push( NateriatPageRoute( builder: (_) => NextScreen // Widget ) ) Note: Go back to the previous screen using -pop() part /4 Filter lists using «where, and don't forget .toList() fruits = ['apple’, ‘avocado’, ‘banana’] fruits.where((f) => f-startshith(‘a’)).toList() Common ways to iterate over a list: fruits.forEach((f) => eat(f)) // returns sult fruits map((f) => Text(f)).toList() urns ‘And if you need to access the index as well fruits.astap() -entries.map((f) => Text('${f-key} ~ ${f-value}')) toList() Use... to merge lists cotuan( children: [ Text(‘List of Itens’), itemList() // method that returns (] » ) and reduce is a great tool to add to your belt: numbers = (1, 2, 3, 5, 7, 9] numbers.reduce((sun, num) => sum + num, 0)

You might also like