A quick cheatsheet of useful snippet for Flutter

A widget is the basic type of controller in Flutter Material. There are two type of basic Widget we can extend our classes: StefulWidget or StatelessWidget.

StatefulWidget are all the widget that interally have a dynamic value that can change during usage. It can receive an input value in the constructor or reference to functions.

StatelessWidget are components that are rendered and keep that value. A refresh by a parent is needed to update the content. It can receive a value from the constructor.

https://flutter.io/assets-and-images/#updating-the-launch-screen

Size(MediaQuery.of(context).size.width

You can acces colors using Colors.white. You can use theme colors using Theme.of(context).accentColor

ListView acts like a good stack for put elements in colums. Either Column and Row are ok but doesn't support scroll. Expandable is a container that use all available space in the view.

Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => Class(
                          param: value,
                        ),
                  )),

Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => Class(
                          param: value,
                        ),
                  )),

Navigator.pop(context);

Navigator.pop(context, back_value);

Edit Navigator.push[…].then((type value) {}) adding future type

New Scaffold(drawer: 
	Drawer(child: 
		Column(children: <Widget>[ 
			AppBar(title: Text(‘Choose’), AutomaticallyImplyLeading: false ), 
			ListTile(title: Text(’Some Text’), onTap: () {} 
) ])

New Scaffold(endDrawer:

Body of Scaffold needs to have TabBarView to manage switch between tabs contents. The number in length is mandatory to be the same of the items in the TabBarView and TabBar tabs.

The pages has not to be Scaffold Widget, but directly the body because them are in the TabBarView that has already a Scaffold.

DefaultTabController(length: 2, child: Scaffold( body: TabBarView(),  appBar: AppBar(bottom: TabBar(tabs: <Widget>[ Tab(icon:, text:) ])

DefaultTabController(length: 2, child: Scaffold( body: TabBarView(), bottomNavigationBar:  TabBar(tabs: <Widget>[ Tab() ])

Add in main MaterialApp a new key routes that support a map.

routes: {
	“/“:  (BuilderContext context) => HomeClass()
	“/admin”: (BuilderContext context) => AdminClass()
}

Then in every part of the app you can call .pushReplacementNamed(‘/admin’, context); Note: If you set “/“ you have to remove the home value in the material app or an error will raise.

Instead of using routes, you need to use onGenerateRoutes key. If a route is already defined in routes it will raise an error.

onGenerateRoutes: (RouteSetting settings) {
	final List<String> pathElements = settings.name.split(“/“);

	if(pathElements[0] != “”) {
		return null;
	}
	if(pathElements[1] == ‘product’) {
		final int index = int.parse(pathElements[2]);
		return MaterialPageRoute<bool>(builder: (BuilderContext context) => ProductPage(_products[index]))
	}
	return null;
}

In this scenario the main file has to be converted in StatefulWidget to centralise where the variables are stored. In the example I set MaterialPageRoute to return a bool, but we can se that to every other type.

Then you can call .pushNamed(context, ‘/product/‘ + index.toString())

Also there’s a fallback for not registered route onUnkownRoute.

showDialog using an AlertDialog as Widget.

showDialog(context: context, builder: (BuilderContext context) {
	return AlertDialog(
		title: Text(),
		content: Text(),
		actions: <Widget> [
			FlatButton(child: Text(), onPressed: () {
				Navigator.pop(context); // close the dialog
			})
		]
}

showModalButtonSheet(context: context, builder: (BuilderContext context) {
	return Center(
		child: Text()
	);
}

In order to add a title we need to use InputDecoration(labelText:). In order to set a custom keyboard use InputDecoration(keyboardType: (true|false)). In order to handle password use InputDecoration(obscureText: (true|false). In order to get the value onChanged: (value) {}. In order to monitor the value you need a StatefulWidget.