Widget
Widgets
are the building blocks. Similar to components in react.jsUI as Code
: build a widget tree with a combination of nested widgetsMaterial Design
- It's the
Design System
create and heavily used by Google - Material Design is built into Flutter (but you can also change to Cupertino - apple design)
- It's a good pratice to keep one widget per file
- Widgets by category: https://docs.flutter.dev/development/ui/widgets
- Widgets searchable: https://api.flutter.dev/
StatelessWidget
.build()
renders the UI.External data
can be provided by passing value to the widget constructor- No internal state
StatefulWidget
- Has an
internal state
- As soon that the internal state is changed using
setState()
the widget is rerendered automatically setState()
calls.build()
of the widget again. But flutter is smart enough to update only the nested widgets that have been changed- Repainting a widget is different from recreating a widget
Buttons
ElevatedButton
TextButton
OutlinedButton
FloatingActionButton
-
IconButton
-
Deprecated buttons
RaisedButton
-> ElevatedButtonFlatButton
-> TextButtonOutlineButton
-> OutlinedButton