matteocrippa · April 20, 2025 03:41 · Aug 2, 2018 · Aug 1, 2018 · Aug 1, 2018 · Jul 31, 2018
diff --git a/flutter.md b/flutter.md
@@ -29,16 +29,26 @@ class _BasePageState extends State<BasePage> {
 
 When you are going to update the value you need to wrap it in `setState(() {})` function.
 
-If you want to mimic the `viewDidAppear` of iOS you can use in the State class this call
+If you want to mimic the `viewDidLoad` of iOS you can use in the State class this call
 
 ```dart
 @override
-initState() {
+void initState() {
   super.initState()
   // add here what to do, e.g. fetch data from remote
 }
 ```
 
+Instead if you want get triggered on status update:
+
+```dart
+@override
+void didUpdateWidget(CurrentType oldWidget) {
+  super.didUpdateWidget(oldWidget);
+  // here you can check value of old widget status and compare vs current one
+}
+```
+
 ### Stateless
 **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.
 

diff --git a/flutter.md b/flutter.md
@@ -29,6 +29,16 @@ class _BasePageState extends State<BasePage> {
 
 When you are going to update the value you need to wrap it in `setState(() {})` function.
 
+If you want to mimic the `viewDidAppear` of iOS you can use in the State class this call
+
+```dart
+@override
+initState() {
+  super.initState()
+  // add here what to do, e.g. fetch data from remote
+}
+```
+
 ### Stateless
 **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.
 

diff --git a/flutter.md b/flutter.md
@@ -178,7 +178,10 @@ Navigator.push(
 ### Back (Passing data)
 `Navigator.pop(context, back_value);`
 
-Edit Navigator.push<type>[…].then((type value) {}) adding future type
+### Action after navigation
+In certain cases is useful to trigger an action when a navigation is called,you can do that combinind a `then((_) {})` function in the pipe of the navigator.
+
+Also edit `Navigator.push<type>[…].then((type value) {})` adding future type.
 
 
 

diff --git a/flutter.md b/flutter.md
@@ -9,7 +9,7 @@ There are two type of basic Widget we can extend our classes: `StatefulWidget` o
 **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.
 You need to create two classes like:
 
-```
+```dart
 class BasePage extends StatefulWidget {
   State<StatefulWidget> createState() {
     return _BasePageState();
@@ -93,7 +93,7 @@ We can force the refresh of a build function using the `notifyListeners()`.
 If you have more than one model, better to create a `main.dart` model like:
 
 ```dart
-class MainModel extends Model with EnModel {}
+class MainModel extends Model with New, EnModel {}
 ```
 
 

diff --git a/flutter.md b/flutter.md
@@ -90,6 +90,12 @@ Each time the build is called the data is read back from state.
 
 We can force the refresh of a build function using the `notifyListeners()`.
 
+If you have more than one model, better to create a `main.dart` model like:
+
+```dart
+class MainModel extends Model with EnModel {}
+```
+
 
 **Centralize**
 In order to avoid to call this in all the classes, we can easily wrap our MaterialApp in `ScopeModel<EnModel>(child: MaterialApp[...], model: EnModel())`.
@@ -145,7 +151,7 @@ MediaQuery.of(context)
 
 ### Route to other page without back (eg android final)
 
-```
+```dart
 Navigator.pushReplacement(
                   context,
                   MaterialPageRoute(
@@ -156,7 +162,7 @@ Navigator.pushReplacement(
 ```
 ### Route to other page with back
 
-```
+```dart
 Navigator.push(
                   context,
                   MaterialPageRoute(
@@ -180,7 +186,7 @@ Edit Navigator.push<type>[…].then((type value) {}) adding future type
 
 ### Add left drawer
 In the drawer we can list several entries, each of those can have (or not) an Icon.
-```
+```dart
 New Scaffold(drawer: 
 	Drawer(child: 
 		Column(children: <Widget>[ 
@@ -204,20 +210,20 @@ The number in length is mandatory to be the same of the items in the TabBarView
 The pages has not to be Scaffold Widget, but directly the body because them are in the TabBarView that has already a Scaffold.
 
 ### Add drawer with tab on top like Android
-```
+```dart
 DefaultTabController(length: 2, child: Scaffold( body: TabBarView(),  appBar: AppBar(bottom: TabBar(tabs: <Widget>[ Tab(icon:, text:) ])
 ```
 
 ### Add drawer with tab on Botton like iOS
-```
+```dart
 DefaultTabController(length: 2, child: Scaffold( body: TabBarView(), bottomNavigationBar:  TabBar(tabs: <Widget>[ Tab() ])
 ```
 
 
 ## Routing
 Add in main MaterialApp a new key routes that support a map.
 
-```
+```dart
 routes: {
 	“/“:  (BuildContext context) => HomeClass()
 	“/admin”: (BuildContext context) => AdminClass()
@@ -232,7 +238,7 @@ If you set “/“ you have to remove the home value in the material app or an e
 Instead of using routes, you need to use onGenerateRoutes key.
 If a route is already defined in routes it will raise an error.
 
-```
+```dart
 onGenerateRoutes: (RouteSettings settings) {
 	final List<String> pathElements = settings.name.split(“/“);
 
@@ -259,7 +265,7 @@ Also there’s a fallback for not registered route onUnkownRoute.
 
 showDialog using an AlertDialog as Widget.
 
-```
+```dart
 showDialog(context: context, builder: (BuilderContext context) {
 	return AlertDialog(
 		title: Text(),
@@ -274,7 +280,7 @@ showDialog(context: context, builder: (BuilderContext context) {
 
 ## Modal
 
-```
+```dart
 showModalButtonSheet(context: context, builder: (BuilderContext context) {
 	return Center(
 		child: Text()

diff --git a/flutter.md b/flutter.md
@@ -86,7 +86,10 @@ return ScopeModelDescendant<EnModel>(builder: (BuildContext context, Widget chil
   return _buildWidget(model.item);
 },);
 ```
-Each time any of our data changes, the lamda will be executed.
+Each time the build is called the data is read back from state.
+
+We can force the refresh of a build function using the `notifyListeners()`.
+
 
 **Centralize**
 In order to avoid to call this in all the classes, we can easily wrap our MaterialApp in `ScopeModel<EnModel>(child: MaterialApp[...], model: EnModel())`.

diff --git a/flutter.md b/flutter.md
@@ -32,7 +32,7 @@ When you are going to update the value you need to wrap it in `setState(() {})`
 ### Stateless
 **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.
 
-## Class
+## Model
 Dart has class a nice way to create an init is using the approach like { this.param, this.param2 }.
 
 ```dart
@@ -47,14 +47,55 @@ class New {
 In order to have mandatory params you need to include `flutter/material.dart` so you can transform you class to
 
 ```dart
-class New {
+class En {
   final String element;
   final double number;
   
   New({ @required this.element, @required this.number });
 }
 ```
 
+If you wrap a param between **[]** that param is optional instead.
+
+### Scope Model
+Is a good way to share data within the app in an unique place, accessibile in any other class.
+Scope model gives you a way to keep the state of the model created above.
+So once *scope_model* has been imported you can create the model like:
+
+```dart
+class EnModel extends Model {
+}
+```
+
+When you work with item is better to **avoid** to pass back the list you are using to manage item internally, better to use a copy of that.
+So we have to use a **getter**.
+
+```dart
+class EnModel extends Model {
+  List<String> _item = [];
+  List<String> get item {
+    List.from(_item);
+  }; 
+}
+```
+
+In order later to use that, in the widget **build** you have to:
+
+```dart
+return ScopeModelDescendant<EnModel>(builder: (BuildContext context, Widget child, EnModel model){
+  return _buildWidget(model.item);
+},);
+```
+Each time any of our data changes, the lamda will be executed.
+
+**Centralize**
+In order to avoid to call this in all the classes, we can easily wrap our MaterialApp in `ScopeModel<EnModel>(child: MaterialApp[...], model: EnModel())`.
+
+So all the children of MaterialApp will have access to EnModel structure.
+
+In order to have access you will have still to use ScopeModelDescendant to wrap the Widget that will use that as above.
+
+
 ## UI
 ### Icon & Splashpage
 https://flutter.io/assets-and-images/#updating-the-launch-screen

diff --git a/flutter.md b/flutter.md
@@ -3,7 +3,7 @@ A quick cheatsheet of useful snippet for Flutter
 
 ## Widget
 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`.
+There are two type of basic Widget we can extend our classes: `StatefulWidget` or `StatelessWidget`.
 
 ### Stateful
 **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.
@@ -32,6 +32,29 @@ When you are going to update the value you need to wrap it in `setState(() {})`
 ### Stateless
 **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.
 
+## Class
+Dart has class a nice way to create an init is using the approach like { this.param, this.param2 }.
+
+```dart
+class New {
+  final String element;
+  final double number;
+  
+  New({ this.element, this.number });
+}
+```
+
+In order to have mandatory params you need to include `flutter/material.dart` so you can transform you class to
+
+```dart
+class New {
+  final String element;
+  final double number;
+  
+  New({ @required this.element, @required this.number });
+}
+```
+
 ## UI
 ### Icon & Splashpage
 https://flutter.io/assets-and-images/#updating-the-launch-screen

diff --git a/flutter.md b/flutter.md
@@ -231,3 +231,12 @@ AppBar component allow you to set _title_, _back_ and _actions_ for the status b
 
 ## Gesture
 You can turn every widget with an action wrapping inside `GestureDetector`.
+
+## Keyboard
+If you need to hide an open keyboard you need to use `FocusScope`.
+
+```dart
+FocusScope.of(context).requestFocus(FocusNode());
+```
+
+So basically you fake the current focus node a new one not connected to any form/textarea.
diff --git a/flutter.md b/flutter.md
@@ -67,6 +67,13 @@ Both `Expanded` and `Flexible` accept a `flex` param, where you can pass a weigh
 
 `Container` is a box where you can add your Widget and set some params like _margin_, _padding_, _color_, _decoration_, etc.
 
+### Size
+`MediaQuery` is a powerful tool to make adaptive UI according device feature (e.g. _screen size_, _orientation_).
+
+```dart
+MediaQuery.of(context)
+```
+
 ## Navigation
 
 ### Route to other page without back (eg android final)

diff --git a/flutter.md b/flutter.md
@@ -221,3 +221,6 @@ In order to get the value `onChanged: (value) {}`. In order to monitor the value
 AppBar component allow you to set _title_, _back_ and _actions_ for the status bar.
 `title` contains the title for widget.
 `actions` is an array of widgets that stay on the right.
+
+## Gesture
+You can turn every widget with an action wrapping inside `GestureDetector`.
diff --git a/flutter.md b/flutter.md
@@ -159,7 +159,7 @@ 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) {
+onGenerateRoutes: (RouteSettings settings) {
 	final List<String> pathElements = settings.name.split(“/“);
 
 	if(pathElements[0] != “”) {

diff --git a/flutter.md b/flutter.md
@@ -145,8 +145,8 @@ Add in main MaterialApp a new key routes that support a map.
 
 ```
 routes: {
-	“/“:  (BuilderContext context) => HomeClass()
-	“/admin”: (BuilderContext context) => AdminClass()
+	“/“:  (BuildContext context) => HomeClass()
+	“/admin”: (BuildContext context) => AdminClass()
 }
 ```
 

diff --git a/flutter.md b/flutter.md
@@ -216,3 +216,8 @@ 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`.
+
+## AppBar
+AppBar component allow you to set _title_, _back_ and _actions_ for the status bar.
+`title` contains the title for widget.
+`actions` is an array of widgets that stay on the right.
diff --git a/flutter.md b/flutter.md
@@ -105,12 +105,16 @@ Edit Navigator.push<type>[…].then((type value) {}) adding future type
 ## Sidebar
 
 ### Add left drawer
+In the drawer we can list several entries, each of those can have (or not) an Icon.
 ```
 New Scaffold(drawer: 
 	Drawer(child: 
 		Column(children: <Widget>[ 
 			AppBar(title: Text(‘Choose’), AutomaticallyImplyLeading: false ), 
-			ListTile(title: Text(’Some Text’), onTap: () {} 
+			ListTile(
+			leading: Icon(Icons.list),
+			title: Text(’Some Text’), 
+			onTap: () {} 
 ) ])
 ```
 

diff --git a/flutter.md b/flutter.md
@@ -55,7 +55,8 @@ DecorationBox(decoration: BoxDecoration());
 
 ## Layout
 
-`ListView` acts like a good stack for put elements in colums. 
+`ListView` acts like a good stack for put elements in colums.
+If it contains only an object, use `SingleChildScrollView`.
 
 Either `Column` and `Row` are ok but doesn't support scroll.
 If you want to widget in a column/row to take as much space as possible wrap it in `Expanded`.

diff --git a/flutter.md b/flutter.md
@@ -42,6 +42,8 @@ https://flutter.io/assets-and-images/#updating-the-launch-screen
 ### Colors & Themes
 
 You can acces colors using `Colors.white`.
+Each color has an extra parameter `withOpacity()` you can use to set the opacity.
+
 You can use theme colors using `Theme.of(context).accentColor`
 
 ### Styling

diff --git a/flutter.md b/flutter.md
@@ -44,13 +44,21 @@ https://flutter.io/assets-and-images/#updating-the-launch-screen
 You can acces colors using `Colors.white`.
 You can use theme colors using `Theme.of(context).accentColor`
 
+### Styling
+You can add extra style (background color, rounded corners, etc) to a widget using `DecoratedBox`.
+
+```
+DecorationBox(decoration: BoxDecoration());
+```
+
 ## Layout
 
 `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.
+If you want to widget in a column/row to take as much space as possible wrap it in `Expanded`.
+`Flexible` is also available and you can provide which priority on weight the widget will have.
+Both `Expanded` and `Flexible` accept a `flex` param, where you can pass a weight.
 
 `SizeBox` is a widget with fixed size, it is useful e.g. to add simple margin between widgets.
 

diff --git a/flutter.md b/flutter.md
@@ -54,6 +54,8 @@ Either `Column` and `Row` are ok but doesn't support scroll.
 
 `SizeBox` is a widget with fixed size, it is useful e.g. to add simple margin between widgets.
 
+`Container` is a box where you can add your Widget and set some params like _margin_, _padding_, _color_, _decoration_, etc.
+
 ## Navigation
 
 ### Route to other page without back (eg android final)

diff --git a/flutter.md b/flutter.md
@@ -47,9 +47,12 @@ You can use theme colors using `Theme.of(context).accentColor`
 ## Layout
 
 `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.
 
+`SizeBox` is a widget with fixed size, it is useful e.g. to add simple margin between widgets.
 
 ## Navigation
 

diff --git a/flutter.md b/flutter.md
@@ -190,6 +190,9 @@ showModalButtonSheet(context: context, builder: (BuilderContext context) {
 
 ## Textfield
 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`.
diff --git a/flutter.md b/flutter.md
@@ -5,8 +5,31 @@ 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`.
 
+### Stateful
 **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.
+You need to create two classes like:
 
+```
+class BasePage extends StatefulWidget {
+  State<StatefulWidget> createState() {
+    return _BasePageState();
+  }
+}
+
+class _BasePageState extends State<BasePage> {
+  int _value = 0;
+  
+  void _increment() {
+    setState(() {
+      _value++;
+    });
+  }
+}
+```
+
+When you are going to update the value you need to wrap it in `setState(() {})` function.
+
+### Stateless
 **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.
 
 ## UI

diff --git a/flutter.md b/flutter.md
@@ -6,6 +6,7 @@ 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.
 
 ## UI

diff --git a/flutter.md b/flutter.md
@@ -1,6 +1,13 @@
 # Flutter
 A quick cheatsheet of useful snippet for Flutter
 
+## Widget
+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.
+
 ## UI
 ### Icon & Splashpage
 https://flutter.io/assets-and-images/#updating-the-launch-screen
@@ -161,3 +168,4 @@ showModalButtonSheet(context: context, builder: (BuilderContext context) {
 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`.
diff --git a/flutter.md b/flutter.md
@@ -159,3 +159,5 @@ showModalButtonSheet(context: context, builder: (BuilderContext context) {
 
 ## Textfield
 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)`.
diff --git a/flutter.md b/flutter.md
@@ -13,6 +13,12 @@ https://flutter.io/assets-and-images/#updating-the-launch-screen
 You can acces colors using `Colors.white`.
 You can use theme colors using `Theme.of(context).accentColor`
 
+## Layout
+
+`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.
+
 
 ## Navigation
 
@@ -150,3 +156,6 @@ showModalButtonSheet(context: context, builder: (BuilderContext context) {
 	);
 }
 ```
+
+## Textfield
+In order to add a _title_ we need to use `InputDecoration(labelText:)`.
diff --git a/flutter.md b/flutter.md
@@ -1,14 +1,14 @@
 # Flutter
 A quick cheatsheet of useful snippet for Flutter
 
-
-## Icon & Splashpage
+## UI
+### Icon & Splashpage
 https://flutter.io/assets-and-images/#updating-the-launch-screen
 
-## Screen Size
+### Screen Size
 `Size(MediaQuery.of(context).size.width`
 
-## Colors & Themes
+### Colors & Themes
 
 You can acces colors using `Colors.white`.
 You can use theme colors using `Theme.of(context).accentColor`
@@ -66,7 +66,7 @@ New Scaffold(drawer:
 
 
 
-# Tabs
+## Tabs
 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.
 
@@ -83,7 +83,7 @@ DefaultTabController(length: 2, child: Scaffold( body: TabBarView(), bottomNavig
 ```
 
 
-# NamedRoutes
+## Routing
 Add in main MaterialApp a new key routes that support a map.
 
 ```

diff --git a/flutter.md b/flutter.md
@@ -1,4 +1,5 @@
 # Flutter
+A quick cheatsheet of useful snippet for Flutter
 
 
 ## Icon & Splashpage
@@ -7,6 +8,11 @@ https://flutter.io/assets-and-images/#updating-the-launch-screen
 ## Screen Size
 `Size(MediaQuery.of(context).size.width`
 
+## Colors & Themes
+
+You can acces colors using `Colors.white`.
+You can use theme colors using `Theme.of(context).accentColor`
+
 
 ## Navigation
 

diff --git a/flutter.md b/flutter.md
@@ -0,0 +1,146 @@
+# Flutter
+
+
+## Icon & Splashpage
+https://flutter.io/assets-and-images/#updating-the-launch-screen
+
+## Screen Size
+`Size(MediaQuery.of(context).size.width`
+
+
+## Navigation
+
+### Route to other page without back (eg android final)
+
+```
+Navigator.pushReplacement(
+                  context,
+                  MaterialPageRoute(
+                    builder: (BuildContext context) => Class(
+                          param: value,
+                        ),
+                  )),
+```
+### Route to other page with back
+
+```
+Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (BuildContext context) => Class(
+                          param: value,
+                        ),
+                  )),
+```
+
+### Back (Basic)
+`Navigator.pop(context);`
+
+### Back (Passing data)
+`Navigator.pop(context, back_value);`
+
+Edit Navigator.push<type>[…].then((type value) {}) adding future type
+
+
+
+## Sidebar
+
+### Add left drawer
+```
+New Scaffold(drawer: 
+	Drawer(child: 
+		Column(children: <Widget>[ 
+			AppBar(title: Text(‘Choose’), AutomaticallyImplyLeading: false ), 
+			ListTile(title: Text(’Some Text’), onTap: () {} 
+) ])
+```
+
+### Add right drawer 
+`New Scaffold(endDrawer:`
+
+
+
+# Tabs
+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.
+
+### Add drawer with tab on top like Android
+```
+DefaultTabController(length: 2, child: Scaffold( body: TabBarView(),  appBar: AppBar(bottom: TabBar(tabs: <Widget>[ Tab(icon:, text:) ])
+```
+
+### Add drawer with tab on Botton like iOS
+```
+DefaultTabController(length: 2, child: Scaffold( body: TabBarView(), bottomNavigationBar:  TabBar(tabs: <Widget>[ Tab() ])
+```
+
+
+# NamedRoutes
+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.
+
+### Pass value in routes
+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.
+
+
+## Alert
+
+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
+			})
+		]
+}
+```
+
+## Modal
+
+```
+showModalButtonSheet(context: context, builder: (BuilderContext context) {
+	return Center(
+		child: Text()
+	);
+}
+```