Lecture 4

User Interface (UI) Design

© Dr. Subhi Abdulrahim

(2023/6/10)
Outline [1-ch.10]

1. Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
1.1 Scaffold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
1.2 Material widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
1.2.1 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
1.2.2 Dialogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

2. Cupertino . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
2.1 CupertinoPageScaffold . . . . . . . . . . . . . . . . . . . . . . . . . . 268
2.2 Cupertino widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

3. Building layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

3.1 Platform support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
3.1.1 Single OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
3.1.2 Multiple OSes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
3.2 Responsive UIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
3.2.1 LayoutBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
3.2.2 MediaQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

2
1. Material
Def., “Flutter is Google’s UI toolkit for building beautiful, natively compiled applications
for mobile, web, and desktop from a single codebase.”

1.1 Scaffold

1.2 Material widgets

1.2.1 Buttons

1.2.2 Dialogs

2. Cupertino

3
3. Building layouts

3.2.1 LayoutBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

The LayoutBuilder widget gives information about the constraints of the parent
such as the width and the height.
LayoutBuilder is good for screen rotations and much more; It can be used:-
o To decide how to arrange the UI according to the available space.
o To adapt the UI to the dimensions of many devices such as mobile phones,
tablets and desktop.

E.g., the Grid widget automatically places elements in a grid and the number of columns
is determined by the value passed to crossAxisCount.

The following code is said to be responsive because when the width of the screen
changes, thanks to LayoutBuilder, the UI is rearranged accordingly.

4
 Example using GridView and ListTile

Scaffold(
body: LayoutBuilder(
builder: ( BuildContext context, BoxConstraints sizes ) {
if (sizes.maxWidth < 500) {
return const ListData();
}
return const GridData();
}
)
)

...

class GridData extends StatelessWidget {

const GridData();
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: ListTile(
leading: const Icon(Icons.add_box),
title: Text("Item $index"),
),
);});
}}

5
Example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);
static const String _title = 'LayoutBuilder';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);

6
 @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('LayoutBuilder Example')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// Restrict based on Width
if (constraints.maxWidth > 800) {
return _buildTripleContainers();
} else if (constraints.maxWidth > 600 &&
constraints.maxWidth <= 800) {
return _buildDoubleContainers();
} else {
return _buildSingleContainer();
}
},
),
);
}

Widget _buildSingleContainer() {
return Center(
child: Container(
height: 400.0,
width: 100.0,
color: Colors.red,
),
);
}

7
 Widget _buildDoubleContainers()
{
return Center(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 400.0,
width: 100.0,
color: Colors.yellow,
),
Container(
height: 400.0,
width: 100.0,
color: Colors.yellow,
),
],
),
);
}

Widget _buildTripleContainers()
{
return Center(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 400.0, width: 100.0,
color: Colors.green,
),
Container(
height: 400.0, width: 100.0,
color: Colors.green,
),
Container(
height: 400.0, width: 100.0,
color: Colors.green,
),
],),);
}
}//class MyStatelessWidget

8
 3.2.2 MediaQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Example:

4. Examples

Example 1: ListView with constant version

1. import 'package:flutter/material.dart';
2. main() {
3. runApp(MyApp());
4. }

5. class MyApp extends StatefulWidget {

6. @override
7. State<StatefulWidget> createState() {
8. return MyAppState();
9. }
10. }

11. class MyAppState extends State<MyApp> {

12. int counter = 0;
13. void _increment() {

9
14. setState(() => counter++);
15. }
16. @override
17. Widget build(BuildContext context) {
18. return MaterialApp(
19. home: Scaffold(
20. //---------------------
21. appBar: AppBar(title: const Text("Flutter"),
i. actions: const [
1. Padding( padding: EdgeInsets.only(right: 20),
a. child: Icon(Icons.info),)]),
22. //------------------
23. drawer: Drawer(
24. child: ListView(
a. scrollDirection: Axis.vertical,
b. children: [
i. Text("Hello $counter"),
ii. Text("Flutter $counter"),
iii. Text("counter = $counter"),],),),
25. //-------------------
26. body: Center(
a. child: Text("Wow nice book $counter"),),

27. //-------------------
28. floatingActionButton: FloatingActionButton(
a. onPressed: _increment,
b. child: const Icon(Icons.add),),
29. ));
30. }
31. }

Output:

10
11
Example 2: ListView with not-constant version
final mylist = List<int>.generate(100, (i) => i);

drawer: Drawer(
child: ListView.builder(
itemCount: mylist.length,
itemBuilder: (content, index){
return Text("${mylist[index]}");
}
),
),
Output:

Exercise 1: Implement simple AlertDialog :

12