Lecture 3

Widget Every Where

© Dr. Subhi Abdulrahim

Outline

1- Widgets
 Text,
 Row,
 Column,
 ListView,
 Container,
 Stack Positioned
2- Stateless and Stateful widgets
3- Good Practices

2
1. Widgets:

Def.,
 In Flutter everything that appears on the screen is called "widget"
 When you create user interfaces in Flutter you make a composition of widgets
by nesting them one inside the other.
 Anything appearing on the screen or interacting with it is a widget.

Example 1:

Widgets everywhere!
A Flutter application is just a combination of widgets.
 Visible Screen(s):
o Text(s)
o Button(s)
o Material Design(s)
o Application Bar(s)
 Invisible Container(s) and Layout(s)

3
1.1 Text <Widget>

Properties of Text widget:

Dart:

Text(
'Hello World!’,
style: Theme.of(context).textTheme.headlineMedium,
),

Flutter:

4
1.2 TextButton <Widget>

TextButton’s Properties:

Dart:

TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
onPressed: () => {},
child: const Text('Click me!',
),
),

Flutter:

5
1.3 Row <Widget>

Properties of Row widget:

Example 2:
Design the Counter App as shown in the following Fig.

6
 Dart:

body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Hello World! $_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
onPressed: _decrementCounter,
child: const Text('-1',),
), //TextButton

TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
), //ButtonStyle
onPressed: _incrementCounter,
child: const Text('+1',),
), //TextButton
],
), //Row
],
), //Column

7
1.4 Column <Widget>

Example 3:

8
1.5 ListView <Widget>

Properties of ListView

25. class MyApp extends StatelessWidget {

26. const MyApp({Key? key}) : super(key: key);
27. @override
28. Widget build(BuildContext context) {

9
29. const title = 'MyAwesome App';
30. return MaterialApp(
31. title: title,
32. home: Scaffold(
33. appBar: AppBar(title: const Text(title),),
34. body: MyListView(),),);
35. }
36. }
37. class MyListView extends StatelessWidget {
38. MyListView();
39. final ListDataItems item = ListDataItems();
40. @override
41. Widget build(BuildContext context) {
42. return ListView.builder(
43. itemCount: item.monthItems.length,
44. itemBuilder:(context,index){
45. return MyListTile(item.monthItems[index]);},
46. );}
47. }
48. class MyListTile extends StatelessWidget {
49. const MyListTile(this.item);
50. final ListTileItem item;
51. @override
52. Widget build(BuildContext context) {
53. return ListTile( title: Text(item.monthItem),
54. onTap: () {
55. ScaffoldMessenger.of(context).showSnackBar(
56. SnackBar(
57. content: Text('You selected ${item.monthItem}'),),);
58. },
59. );
60. }
61. }

10
1.1 Container

1.2 Stack and Positioned

11
 2- Stateless and Stateful widgets

 A class becomes a Flutter widget when it subclasses StatelessWidget or

StatefulWidget and overrides the Widget build(...); abstract method. That’s it: the
main task of a widget is laying out other widgets on the tree using the build()
method.
If the widget is immutable or if it’s "dynamic", in the sense that something might
change during the time. The decision translates into Dart code by extending one of these
two classes.
 StatelessWidget: use this kind of widget when you need to create a piece of
UI that is not going to change over the time.
 StatefulWidget: Use this kind of widget when you need to create a piece of
UI that is going to change over the time. such as the received response of an
HTTP request or the callback triggered by a button tap.

12
 Stateless Widgets:

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return OneOrMoreWidgets;
}
}

Example 1:- Simple StatelessWidget

13
 Stateful Widgets:

class MyApp extends StatefulWidget {

@override
State<StatefulWidget> createState(){
return MyAppState();
}
}
class MyAppState extends State<MyApp>{
@override
Widget build(BuildContext context){
return OneOrMoreWidgets;
}
}

Example 2:- Simple StatefuleWidget

14
3- Good Practices

15