Skip to content

Widget

  • Widgets are the building blocks. Similar to components in react.js
  • UI as Code: build a widget tree with a combination of nested widgets
  • Material 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 -> ElevatedButton
  • FlatButton -> TextButton
  • OutlineButton -> OutlinedButton