FLUTTER: WIDGET

- LAYOUT
Learning Objective:
• Understand the concept of UI layout and design
• Create ListView and GridView on the UI
• Understand and apply the ListView.Builder and GridView.Builder
• Implement other widgets on the List and Grid view
 Layout in Flutter

■ All layout models are part of widgets

■ Layout is used to create complex widget – in combination with other UI elements
■ Would compose of rows, columns and grids
■ Require override Widget build() - ! Compulsory to define !
■ Optional to be nested within MaterialApp() as root
■ Followed by Scaffold() or Container() as the parent widget
Layout Structure - Example
 Laying using MaterialApp()
■ The layout would follow Material Design guideline
■ Has predefined properties: AppBar, Drawer, SnackBar etc
■ Has navigation properties – for managing stack pages or UI screen(push & pop)
■ Allow to define the Theme for entire app
■ Support Localization and Internationalization – manage translation of different languages
Using MaterialApp() Example:
1. class MyApp extends StatelessWidget {
2. const MyApp({super.key});

3. @override
4. Widget build(BuildContext context) {
5. return MaterialApp(
6. title: 'Flutter layout demo',
7. home: Scaffold(
8. appBar: AppBar(
9. title: const Text('Flutter layout demo'),
10. ),
11. body: const Center(
12. child: Text('Hello World'),
13. ),
14. ),
15. );
16. }
17. }
Laying using non-MaterialApp()
■ Need to custom the UI – may create customized UI
■ Do not have to follow Material Design principles
■ Need to custom the navigation – need to manage page and route transition
■ Does not have material components/properties : AppBar, Drawer etc
■ Need to define the theme and the styles for every components and UI screen
Without using non-materialApp() example
1. class MyApp extends StatelessWidget {
2. const MyApp({super.key});

3. @override
4. Widget build(BuildContext context) {
5. return Container(
6. decoration: const BoxDecoration(color: Colors.white),
7. child: const Center(
8. child: Text(
9. 'Hello World',
10. textDirection: TextDirection.ltr,
11. style: TextStyle(
12. fontSize: 32,
13. color: Colors.black87,
14. ),
15. ),
16. ),
17. );
18. }
19. }
 ListView
■ Display the item in a single dimensional list
■ Commonly used to display back multiple record of item and UI elements
■ Automatically enable scrolling when item is too long
1. class MyApp extends StatelessWidget {
2. const MyApp({super.key});
3. @override
4. Widget build(BuildContext context) {
5. const title = 'Basic List';
6. return MaterialApp(
7. title: title,
8. home: Scaffold(
9. appBar: AppBar(
10. title: const Text(title),
11. ),
12. body: ListView(
13. children: const <Widget>[
14. ListTile(
15. leading: Icon(Icons.map),
16. title: Text('Map'),
17. ),
18. ListTile(
19. leading: Icon(Icons.photo_album),
20. title: Text('Album'),
21. ),
22. ListTile(
23. leading: Icon(Icons.phone),
 Dynamic ListView
■ Dynamically generate list from stored data
■ Iterate data from array, linked list etc to display the UI elements
■ Use ListView.Builder()
■ itemBuilder can be used with other layout element such Card()
Widget _buildListView() {
return Expanded(
child: ListView.builder(
itemCount: expenses.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8.0),
child: ListTile(
title: Text(expenses[index].description),
subtitle: Text('Amount: ${expenses[index].amount}'),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => _removeExpense(index),
),
),
);
},
),
);
}
 GridView
■ Display the widget in two-dimensional list
■ Has pre-fabricated/pre-define list and may customize the grid
■ Automatically make the UI scrollable when the contents are too long
■ May custom the number of X axis(crossaxis) count
1. class MyApp extends StatelessWidget {
GridView Example
2. const MyApp({super.key});

3. @override
4. Widget build(BuildContext context) {
5. const title = 'Grid List';
6. return MaterialApp(
7. title: title,
8. home: Scaffold(
9. appBar: AppBar(
10. title: const Text(title),
11. ),
12. body: GridView.count(
13. // Create a grid with 2 columns. If you change the
scrollDirection to
14. // horizontal, this produces 2 rows.
15. crossAxisCount: 2,
16. // Generate 100 widgets that display their index in the
List.
17. children: List.generate(100, (index) {
18. return Center(
19. child: Text(
20. 'Item $index',
21. style: Theme.of(context).textTheme.headlineSmall,
 Dynamic GridView
■ Dynamically generate the grid from stored data
■ Iterate each array/arraylist/etc to display UI elements
■ Make use of GridView.Builder()
■ SliverGridDelegateWithFixedCrossAxisCount() – Specify the number of column
■ itemCount – Determine the number of item to iterate
Widget _buildGridView() {
return Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: expenses.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8.0),
child: ListTile(
title: Text(expenses[index].description),
subtitle: Text('Amount: ${expenses[index].amount}'),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => _removeExpense(index),
),
),
);
},
),
);
}
Sleepy? Let do some exercises
■ What is the important method that generate the UI?
■ What is the method name that performs as a loop in ListView and GridView?
■ How to set the number of column in the grid view?