MA - 4 User Interface (UI) Design

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
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
6
@override
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,
),
Container(
height: 400.0, width: 100.0,
),
],),);
}
}//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

MA - 4 User Interface (UI) Design

Uploaded by

Copyright:

Available Formats

MA - 4 User Interface (UI) Design

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MA - 4 User Interface (UI) Design

Uploaded by

Copyright:

Available Formats

Lecture 4

User Interface (UI) Design

© Dr. Subhi Abdulrahim

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

1.2 Material widgets

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

class GridData extends StatelessWidget {

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

class MyApp extends StatelessWidget {

Example 1: ListView with constant version

5. class MyApp extends StatefulWidget {

11. class MyAppState extends State<MyApp> {

Exercise 1: Implement simple AlertDialog :

You might also like