![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642266/1_gqBLqChWtWLq33DvWm6Nog.png)
What is Flutter
- Mobile Application Development Framework Developed by Google
- Uses the programming language Dart (also developed by Google)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642368/Powered_by_google.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642345/dart.png)
- open source programming language developed by Google
- Object-oriented and similar in syntax to Java, C# and C++
Native
Unlike many other mobile frameworks, Flutter compiles your Dart ahead-of-time down to native code for each platform.
Hybrid App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643184/hybrid.png)
Javascript Hybrid
(ie React Native)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643185/1_8ugYUcmOYnoDx7d99qkEjQ.png)
Flutter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643187/flutter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643190/hybrid.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643191/1_8ugYUcmOYnoDx7d99qkEjQ.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643192/flutter.png)
hybrid
React Native
Flutter
Flutter composition
- Widgets
- Stateless
- Stateful
- BuildContext
Widgets
- A widget is a class that represents a specific functionality or feature within the app
- Different widgets for each layout element as well as properties for manipulating them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642927/Screen_Shot_2019-01-03_at_2.21.21_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642928/Screen_Shot_2019-01-03_at_2.20.33_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642929/Screen_Shot_2019-01-03_at_2.20.48_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642932/Screen_Shot_2019-01-03_at_2.21.01_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642939/Screen_Shot_2019-01-03_at_2.22.25_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642940/padding.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642960/Screen_Shot_2019-01-03_at_2.41.29_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642966/Screen_Shot_2019-01-03_at_2.43.44_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643032/sample-flutter-layout-7bdb948be7c6a2da3d929b70218aa501823e04bfecc933bd3144531ab7c0b935.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643007/Screen_Shot_2019-01-03_at_3.03.28_PM.png)
hierarchical
Just like with web development, building a Flutter app consists of nesting elements inside one another.
Flutter doesn't use a templating language like HTML so you build the template by nesting classes.
STateLess Widget
A simple widget with properties that don't change
Describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely
Can have stateful widgets nested inside
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5642874/stateless_widgets.png)
https://flutterdoc.com/stateful-or-stateless-widgets-42a132e529ed
StateFul
A more complex widget with properties that will change during it's life, due to user input or something else like data returned from an API call
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643131/Screen_Shot_2019-01-03_at_4.14.26_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643132/Screen_Shot_2019-01-03_at_4.14.11_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643136/Screen_Shot_2019-01-03_at_4.24.39_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643137/Screen_Shot_2019-01-03_at_4.24.33_PM.png)
Build
All widgets need to override the build method. This method needs to return a Widget.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643235/Screen_Shot_2019-01-03_at_6.04.21_PM.png)
Building a TODO List app
MaterialApp
Provides a comprehensive set of Material Design Widgets that we can use to easily scaffold our application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643012/widgets.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643026/1_wUCqvq-3Sp2Vbx0TmTdzdg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643154/Screen_Shot_2019-01-03_at_4.36.59_PM.png)
Main
main() is the entry point of a Dart Application. The Flutter framework gives us runApp(), the point of entry for our Flutter App.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643156/Screen_Shot_2019-01-03_at_4.37.09_PM.png)
Our app is a stateless widget with stateful widgets nested inside.
If you need to keep track of any global variables, you should use a stateful Widget instead
Home Page
The Home page is a stateful widget that encompasses all other items in the app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643141/Screen_Shot_2019-01-03_at_4.29.43_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643142/Screen_Shot_2019-01-03_at_4.30.07_PM.png)
Scaffold
A widget used to implement the basic material design visual layout structure
This class provides APIs for showing drawers, snack bars, and bottom sheets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643150/Screen_Shot_2019-01-03_at_4.34.17_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643169/Screen_Shot_2019-01-03_at_4.34.34_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921703/images/5643146/Screen_Shot_2019-01-03_at_4.30.24_PM.png)
Resources
Flutter
By Michael Busby
Flutter
- 1,635