FLUTTER
WIDGETS
ABEDALRAHEEM AL S AQQ A
Lesson 1: introduction to widgets
Flutter is Google’s UI toolkit for crafting beautiful,
natively compiled iOS and Android apps from a
single code base.
To build any application we start with widgets –
The building block of flutter applications. Widgets
describe what their view should look like given
their current configuration and state. It includes a
text widget, row widget, column widget, container
widget, and many more.
Widgets: Each element on a screen of the Flutter app is a
widget. The view of the screen completely depends upon
the choice and sequence of the widgets used to build the
app. And the structure of the code of an app is a tree of
widgets.
Lesson 2:Category of Widgets:
in which the flutter widgets
There are mainly 14 categories
are divided. They are mainly segregated on the basis of the
functionality they provide in a flutter application.
Accessibility: These are the set of widgets that make
a flutter app more easily accessible.
Animation and Motion: These widgets add
animation to other widgets.
Assets, Images, and Icons: These widgets take charge
of assets such as display images and show icons.
Async: These provide async functionality in the
flutter application.
Basics: These are the bundle of widgets that are
absolutely necessary for the development of any
flutter application.
Cupertino: These are the ios designed widgets.
Input: This set of widgets provides input functionality in a
flutter application.
Interaction Models: These widgets are here to manage touch
events and route users to different views in the application.
Layout: This bundle of widgets helps in placing the other
widgets on the screen as needed.
Material Components: This is a set of widgets that mainly
follow material design by Google.
Painting and effects: This is the set of widgets that apply
visual changes to their child widgets without changing
their layout or shape.
Scrolling: This provides scrollability of to a set of other
widgets that are not scrollable by default.
Styling: This deals with the theme, responsiveness, and
sizing of the app.
Text: This displays text.
Lesson 3:Types of Widgets
There are broadly two types
of widgets in the flutter:
Stateless Widget: Means there
is nothing change on my app
Stateful Widget: I can see changes on my app ( this will be
discuss later )
now to create our app we will use the following steps :-
1- we will create a folder
2- inside the folder, we will open the CMD -Terminal
3- type the below command
Flutter create myapp
4- cd to myapp folder
5- code .
we can type cmd to open the
cmd for our folder the one that
we created to contain our app
hit enter after typing the above command
flutter create myapp
type :
cd myapp
then hit enter
now i am inside my app directory
now type :
code .
to open the vs code to
start coding our app
now lets go to lib folder and then to our main.dart file
i deleted everything
inside my main file
and just created the
void main ()
just added the stateless widget as we learned as this widget means that
nothing will be changed on my app later on I will add few things such as text ,
images and button etc..
but I have many errors on my app that's because I didn't
import the needed package to run my app :(
see the next slide to see how to solve it
now i will select at which platform my app will be opened
see next slide
I will select my emulator that one that was installed by the
help of android studio
see next slide
but nothing will be displayed in my app !!!!!
this is because we didn't ask the void main to run my app
now let's run the app to see the results if we click on run
app
really ???? this is what we want
blank screen with nothing on it ?!
relax w
e will f
ix it by
doing t
he follo
steps wing
we neeeeed not to return a container !!
instead we will return a materialApp
this
still
not
solv
e ou
r iss
ue
we have to make extra step and asks the
material to have his property which named "
Home"
and the home is just a scaffold - the white
paper that we will start draw on it
okay
, thin
but s gs be
till, w cam
thing e ne e bett
s thi ed er n o
s is n to draw w!
ot th a fe
drea e app w
m ab that
out we
now
insid
e the
white
we ca pape
n dra r tha
waf t we
what e w created,
thing
I mea
s
n by
the w
scaff hite pa
old ( per is
) the
we jus
tdraw
an ap
scaffo p bar
ld (the inside
white our
paper
)
we want also to have a body in our app
the
bod
whic y here
h wi is ju
add ll cont stac
a te a in ont a
xt to one iner
usin this c thing
g ch onta lets
ild p iner
rope by
rty
the text is just too small let's increase the size of it
by using the Text property that called style which takes
TextStyle (fontsize : 30 )
before
the ch
ild let's
add th
e color
color : to it an
Colors d I will
.pink choose
now for t
he container
i will incre
ase the w
height idth and th
e
now i want to play with the alignment of my container
and the following screenshots show different alignments
that I can apply to my container
try o
ther
align
men
resu t to se
lts e the
now
let's
say
I wa
nt to
add
cont a ca
to th aine rd in
e bo r stea
dy o d of
f my a
app
the car
dis simi
lar to t
he con
the wid tainer
and al th and e xcept it
so take the hig doesn
elevat h est 't take
ion an
d shad
ow co
lor
now let's play with the margin of the card which we can use
it as well for the container
the margin take property called EdgeInsets
.all means from all edges
now
let's
add
tothe
app body
of o
a co ur
lum
n
the column take children that means it can contain more
than one widget let's see this in the next slide
the children is an list of widget that means I can add as
much as I wan of other widget inside it
but we can see that the text is the only thing it appears in
our app
this is because the container and the card are still empty
let's try to add few things to our container and card
the c
olum
mea n wid
ns ea get a
ch on rran
e of ges th
the w e ite
idget ms v
will c s base ertica
ome d on lly w
first its se hich
quen
ce
now let's see
the code tha
t was used t
previous out o have the
come
I will divide
it into piece
s
Container(
color: Colors.amber,
width: 200,
height: 200,
child: Text(
"hello i am inside the container",
style: TextStyle(fontSize: 40),
),
),
Card(
margin: EdgeInsets.all(70),
elevation: 30,
shadowColor: Colors.red,
color: Colors.pink,
child: Text(
"hello i am inside the card",
style: TextStyle(fontSize: 30),
),
),
Text(
"hello i am inside the text",
style:
TextStyle(fontSize: 30, backgroundColor:
Colors.blueAccent),
)
all of the previous pices inside on list which is the
children: [ ]
