Flutter & Dart : The complete beginners guide [2024]
- Description
- Curriculum
- FAQ
- Reviews
This app covers Flutter for very beginners to advanced learners. We start from very simple ui like drawing text to complex layout using stack and mixture of column and row widget.
We also built reusable widget to reduce code amount. So at the end of this tutorial you learn how to build simple to complex reusable flutter widgets.
Along with you will master core Dart concept
1. Class
2. Inheritance
3. List
4. Map
5. Method overriding
Along the way, we explained what’s a stateful class and difference between a stateful class and stateless class. We also explained what’s a bottom navigation bar and how to set up screens for bottom navigation bar. Bottom navigation bar mainly involves jumping to different screens and complex layout.
Homepage UI
Homepage UI includes greetings layout, ticket layout, colorful tickets, hotel view with images.
Ticket search
Ticket search UI includes searching tickets UI with upcoming flights.
Ticket UI
Ticket UI involves showing ticket information with bar code. This is beautiful.
Book Ticket
This UI includes information about a certain flight.
Later on, we explained how to work with different colors and separate color in a static file.
The widgets we built in this tutorial
1. reusable style component
2. reusable color pallet
3. reusable column widget
4. reusable layout builder widget
5. reusable column widget
6. reusable row widget
7. reusable ticket widget
After finishing this course, you will have much better understanding how flutter works and you will master app layout building.
-
26
Overview of the upcoming HomeScreen -
27
Home screen module and understand the layout part 1
-
28
Understanding Container() widget
-
29
About other nested widgets
-
30
Understanding vertical and horizontal layout design
-
31
Define widgets with layout
-
32
Finish header layout with widgets
-
33
Style Text() widgets
-
34
Create separate style class
-
35
Style Container for Image
-
36
Show image on the screen
-
37
Create a separate media file
-
38
Create a search box layout
-
39
Background color and remove AppBar
-
40
Understand and create a reusable widget
-
41
Understand copyWith method and create examples
-
42
Understand the ticket view layout
-
43
Create TicketView widget class
-
44
Style TicketView left and right border
-
45
TicketView destination text
-
46
TicketView big dots
-
47
Expanded widget and count of them
-
48
Understanding Stack widget
-
49
Understand the dynamically generated widget principle
-
50
Create AppLayoutBuilderWidget
-
51
Show and rotate plane icon
-
52
Understand the degree and radians for angle
-
53
Rotating using radians -
54
Show the second row in the blue part of the ticket
-
55
Show the bottom part of the ticket
-
56
Create big circle widget for ticket end
-
57
Dart Ternary operator
-
58
Show the ticket dash
-
59
Change the text of the orange part
-
60
Style first row bottom text
-
61
Create reusable widgets for first row ticket
-
62
Create reusable widgets for bottom row ticket
-
63
Home screen and load json data to ticket view part
This is the json data for ticket view
List<Map<String, dynamic>> ticketList = [
{
'from': {
'code':"NYC",
'name':"New-York"
},
'to': {
'code':"LDN",
'name':"London"
},
'flying_time': '8H 30M',
'date': "1 MAY",
'departure_time':"08:00 AM",
"number":23
},
{
'from': {
'code':"DK",
'name':"Dhaka"
},
'to': {
'code':"SH",
'name':"Shanghai"
},
'flying_time': '4H 20M',
'date': "10 MAY",
'departure_time':"09:00 AM",
"number":45
},
];
-
64
Home screen and dynamic size of layout part
