Scribd
Upload
38 views

Basic Widgets in Flutter

This document discusses the Flutter counter app and basic widgets in Flutter. It covers: 1. Inspecting the structure of the Flutter counter app project including the entry point, libraries, and test files. 2. Basic layout widgets like Row, Column, Wrap, Stack and Positioned and how to configure their properties. 3. Common widgets like Text, Image, buttons and forms and the differences between Material and Cupertino styles. The document provides examples and explanations of key Flutter widgets and how to combine them to build basic layouts and user interfaces. It compares the Material and Cupertino design philosophies and shows examples of alternative widgets for each style.

Uploaded by

Toàn Vũ Đức
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Basic Widgets in Flutter

This document discusses the Flutter counter app and basic widgets in Flutter. It covers: 1. Inspecting the structure of the Flutter counter app project including the entry point, libraries, and test files. 2. Basic layout widgets like Row, Column, Wrap, Stack and Positioned and how to configure their properties. 3. Common widgets like Text, Image, buttons and forms and the differences between Material and Cupertino styles. The document provides examples and explanations of key Flutter widgets and how to combine them to build basic layouts and user interfaces. It compares the Material and Cupertino design philosophies and shows examples of alternative widgets for each style.

Uploaded by

Toàn Vũ Đức
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Inspect Flutter Counter App

Module 02: Basic layouts in Flutter

Component of
Flutter Basic Widgets in Flutter

Material and Cupertino

2.1 Inspect Flutter Counter App

2
Intro to the Counter app

3
Flutter project structure

Compiled Android App.

Compiled IOS App.

Entry point of the project.

Writing test.

(*)Manage meta data and dependencies.

4
Application entry point and import library

5
The build method
• MyApp is a widget inherited
StatelessWidget.

• Each widget has a method build.


• MaterialApp is a built-in of Flutter.

2.2 Basic layouts in Flutter

7
The example
Everything in Flutter is Widget. Use Row and Column elements to create layout structure.

An example from Flutter.Dev

8
Row - MainAxisAlignment
start spaceBetween

center spaceAround

end spaceEvenly

9
Row - CrossAxisAlignment
start end

center stretch

10
Column - MainAxisAlignment
start center end spaceBetween spaceAround spaceEvenly

11
Column - CrossAxisAlignment
start center end stretch

12
Row/Column - MainAxisSize
Row Column
min max
min

max

13
Expanded

ex:1 ex:1 ex:1 w:80 ex:1 ex:1

ex:1 ex:2 ex:1 w:80 ex:1 w:80

14
fl
fl
fl
fl
fl
fl
fl
fl
fl
Wrap
Without Wrap With Wrap

Error layout Error layout

15
Wrap - Horizontal

(spacing)

(runSpacing)

.direction: Axis.horizontal

16

Wrap - Vertical

(spacing)

(runSpacing)

.direction: Axis.vertical

17

Stack and Positioned


1 2
. t: StackFit.expand

(1): Positioned (top: 0, left: 0).

(2): Positioned (top: 0, right: 0).


5

(3): Positioned (bottom: 0, left: 0).

(4): Positioned (bottom: 0, right: 0).

(5): Positioned (bottom: 0, right: 0, top: 0, left: 0). 3 4

18
fi

2.3 Basic Widgets in Flutter

19
MaterialApp Widget
• It leans on Material style guidelines.

• Provides a ton of bene ts that effect its entire widget sub-tree: Theme, Router,
Localization, Navigator, …

• There is no drawback to using MaterialApp, even if you don’t want to use Material
Design guidelines.

• Normally, it is a root of your app.

20

fi

Scaffold Widget
•Scaffold is designed to make
applications (that follow Material
guidelines) as easy as possible to build.

•Per the Flutter docs, it de nes the “basic


Material Design visual layout,” which
means it can make your app look like
this pretty easily.

•Constructor method: it has over 10


named arguments.

21

fi

Text
• A run of text with a single style.
• The style widget is optional to decoration.

Hello, Thea!
How are you feel today?

22

Rich Text
• A run of text with a multiply style.

Hello, Thea!

How are you feel today?

23
Image
• Several constructors are provided:

• Image.asset(‘assets/image/
dart_lang.png’)

• Image.network(‘https://edu.200lab.io/
dart_lang.png’)

• Image. le(File le)

24
fi
fi

ElevatedButton
• A material Design “elevated button”

Click me

25
ElevatedButton.icon
• A material Design “elevated button”

Click me

26
TextButton

Click me

27
2.4 Material and Cupertino

28
What is Material design?

29
What is Cupertino design?
• Clarity

• Depth

• Deference

30

Material vs Cupertino

TabBar CupertinoTapBar

31
Material vs Cupertino

TextField CupertinoTextField

32
Material vs Cupertino

Switch CupertinoSwitch

33
Code time

34
Practice 1: Choice one in two design

35
Challenge

36

You might also like