3. WIDGET STATE
State is information that
can be read synchronously when the widget is built
might change during the lifetime of the widget
StatefulWidget
StatelessWidget
Click to add text
4. STATELESS WIDGET
A widget that does not require mutable state.
Stateless widget are useful when the part of the user interface you are describing
does not depend on anything other than the configuration information in the object
itself
In simple words, Stateless widgets cannot change their state during the runtime of
the app, which means the widgets cannot be redrawn while the app is in action.
TIPS: You can quickly build a Stateless Widget in VS Code or Android Studio by using
the shortcut “stless”.
StatelessWidget class - widgets library - Dart API (flutter.dev)
6. STATEFUL WIDGET
A widget that has mutable state.
They are the widgets which can change their state multiple times and can be redrawn
on to the screen any number of times while the app is in action.
Tip: you can quickly build a Stateful Widget in VS Code or Android Studio by using
the shortcut “stf”.
Stateful widgets are useful when the part of the user interface you are describing can
change dynamically, e.g. due to having an internal clock-driven state, or depending
on some system state
StatefulWidget class - widgets library - Dart API (flutter.dev)
Implementation due in next week.
7. SAFE AREA
A widget that insets its child by sufficient padding to avoid intrusions by the
operating system.
For example, this will indent the child by enough to avoid the status bar at the top of
the screen.
SafeArea class - widgets library - Dart API (flutter.dev)
body: SafeArea(
child: Center(),
))
8. CONTAINER
One of the most used Widgets — and for good reasons:
Container as a layout tool
When you don’t specify the height and the width of the Container, it will match its child’s size
Code :
Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
color: Colors.yellowAccent,
child: Text("Hi"),
),);
19. SIZE BOX
Use to give spacing between childrenSizedBox as padding
When in need of adding padding or margin, you might choose Padding or Container
widgets. But they can be more verbose and less readable than adding a Sizedbox
Column(
children: <Widget>[
Icon(Icons.star, size: 50),
const SizedBox(height: 100),
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
],
),
22. CIRCLEAVATAR
A circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the
user's initials
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
CircleAvatar class - material library - Dart API (flutter.dev)
23. CARD
A material design card: a panel with slightly rounded corners and an elevation shadow.
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album, size: 45),
title: Text('Sonu Nigam'),
subtitle: Text('Best of Sonu Nigam Song'),
), ], ), );
Card class - material library - Dart API (flutter.dev)
24. LISTTILE
A single fixed-height row that typically contains some text as well as a leading or
trailing icon
ListTile(
leading: FlutterLogo(),
title: Text('One-line with'),
)
ListTile class - material library - Dart API (flutter.dev)
25. USEFUL LINKS
Flutter Layout Cheat Sheet. Do you need simple layout samples for… | by
Tomek Polański | Flutter Community | Medium
Material Design Color Palette Generator - Material Palette
Browse Fonts - Google Fonts
