hhf5shf56sh5s6dhv 1vnd21nv5snv52nnfc 5snv52nvd5nv 1fd5f15f5 165v1sd6*1 *6sf161 1d6 f15f15w1' 1ge6*g16* 6g1*erg1*r 1g1e61g 1gew5*1w 61fe61ew 61eg6 saasad asdad sddadsad hcb1bvc 1b1b1b1v drdrd vvv14v vf4v gf4f hg gvg4g vg4v4ggb 4g54dgch54h 1dvbns1vb21d0nb2 1nbvd2vb v5hd5v v5hds5vh56sdvh 4h4h4h b4b4b4b 1bv5d dnv1d2nv 1bv21dbn 1sabnc12 2nd2vn2 ndvn2ds65n5 5hdv5vd56sh hdv56h3dv n2 5nvd356nv 3n n3d52nv a3aa shaqga anda12bnd b1fbc2b 21bc12fb21b 12b2b21vb b21vbdfb b12b 1bdv21b1d a3a a2bar a33ah a2bar 3a e3ah e3 a3 33a

1. Session 5
More about UI/UX

2. Advanced properties of container.
Linear Gradient : enables you to combine between many colors.
begin & end: the beginning and end of gradient.
Box Shadow: add highlight to the container.
Spread radius: the spread of color outside the widget.
Blur radius: the degree of blur( ‫طمس‬
‫اللون‬ ), when increase the
color degree decreases.

5. Circular and Linear Progress Indicators

10. Slider widget

13. Alert Dialog
A message appears when doing a certain action.

14. Alert Dialog
A message appears when doing a certain action.

15. Show Dialog update Show Dialog update

18. Make Opacity With colors
Note that 0.0 < opacity < 1.0

21. TextFormField and validation
The job of the TextFormField is to render the UI
interface for the user to interact with and to
display the validation error once the user enters
invalid data.
The validator method returns a string containing
the error message when the user input is invalid
or null if the user input is valid.

22. TextFormField and Validation
2- use Global key.
1- wrap the List or Column widgets with
A Form().
3- use TextFormField widget inside the
List or the column.
4- Inside the TextFormField use the Validation.
5-use globally to check validation in if statement

24. Check Validation

25. How to Navigate from splash to login

26. Use initState
Called when this object is inserted
into the tree.
The framework will call this method
exactly once for each State object it
creates.
Push Replacment
Replace the current route of the
navigator by pushing the given
route and then disposing the
previous route once the new route
has finished animating in.

27. What is named routes
Routes
if you need to navigate to the same
screen in many parts of your app,
this approach can result in code
duplication. The solution is to define
a named route, and use the named
route for navigation.
Use pushNamed
The name of the screen

28. How to share data between screens

29. Bring List “name” from
class “Page1”.

33. How to fit images in Flutter

35. How to fit images in Flutter

36. Let’s import some packages in our
project.
https://pub.dev/

37. Import image picker

38. Import image picker

39. Import image picker

40. Import image picker in pubspec.yaml

41. Implementing image Picker method

42. Using image Picker method in the
design

43. Using image Picker method in the
design

45. Thank
you