Trang chủ

Mobile Development

Google Flutter

Flutter & Dart : The complete beginners guide [2024]

Flutter & Dart : The complete beginners guide [2024]

Loại khoá học: Mobile Development

Learn Mobile App Building Step By Step

50.000 VND

70 VND

Đầy Đủ Bài Giảng

Học Online Tiện Lợi

Kích Hoạt Nhanh 2-5 Phút

Thanh toán tự động

Được phép tải xuống

Mô tả

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.

Bạn sẽ học được gì

Project setup

Flutter project structure

Flutter scaffolds and it's properties

Flutter reusable widgets

Flutter Bottom Navigation Bar

Flutter RenderLayout Widgets

Four beautiful and complex UI

Dart core concepts like classes, abstract classes and constructors

Dart core concepts List & Map in detail

State management library BLoC, GetX and Riverpod 2.0

Routing with GetX

Loading json files from local storage

Yêu cầu

Having a computer and Flutter SDK installed

Nội dung khoá học

22 sections

Introduction

1 lectures

Introduction

02:09

Download necessary tools and install VS code | Flutter SDK | Android SDK | Tools

4 lectures

Download all the tools

01:22

Install VS code

01:02

Install Flutter and Android SDK and Command lines tools

06:33

Create your first project using VS code (windows)

04:56

Project setup and structure and github repo

4 lectures

Create project for Flutter app

05:07

Understand project structure

06:58

Create a git repo for the project

02:53

Remove comments from main.dart

02:31

Core understanding of Dart class, inheritance and Flutter

6 lectures

About main() function

04:20

Understanding class and inheritance in Dart

16:40

Understanding abstract class and constructor

12:42

Understand class and stateful class

09:22

More about Stateful class

06:14

MaterialApp and Scaffold

13:13

Quiz about Dart knowledge

1 lectures

All about Dart class and constructor

6 questions

Bottom Navigation module

7 lectures

Create BottomNavBar class

07:03

BottomNavigationBarItem and List

11:33

Style BottomNavigationBar

02:41

Install icons for bottom nav bar

05:52

Create dummy screens for BottomNavigationBar

08:34

Access BottomNavigationBar's index

09:05

Use setState() to update BottomNavigationBar

03:38

Quiz section about BottomNavigationBar

1 lectures

Bottom Navigation Bar quiz

4 questions

Home screen module

39 lectures

Overview of the upcoming HomeScreen

01:17

Home screen module and understand the layout part 1

02:32

Understanding Container() widget

07:37

About other nested widgets

02:02

Understanding vertical and horizontal layout design

01:35

Define widgets with layout

04:53

Finish header layout with widgets

10:11

Style Text() widgets

09:47

Create separate style class

07:46

Style Container for Image

05:49

Show image on the screen

06:39

Create a separate media file

06:48

Create a search box layout

06:02

Background color and remove AppBar

04:16

Understand and create a reusable widget

17:26

Understand copyWith method and create examples

21:04

Understand the ticket view layout

01:44

Create TicketView widget class

08:31

Style TicketView left and right border

04:25

TicketView destination text

04:15

TicketView big dots

04:12

Expanded widget and count of them

03:26

Understanding Stack widget

02:55

Understand the dynamically generated widget principle

03:16

Create AppLayoutBuilderWidget

14:06

Show and rotate plane icon

03:59

Understand the degree and radians for angle

03:26

Rotating using radians

1 question

Show the second row in the blue part of the ticket

03:52

Show the bottom part of the ticket

02:37

Create big circle widget for ticket end

11:22

Dart Ternary operator

04:35

Show the ticket dash

05:59

Change the text of the orange part

05:01

Style first row bottom text

04:32

Create reusable widgets for first row ticket

10:44

Create reusable widgets for bottom row ticket

12:40

Home screen and load json data to ticket view part

08:13

Home screen and dynamic size of layout part

08:35

Quiz about Home screen widgets

1 lectures

Home screen widgets cover dart and flutter widget questions

7 questions

Colorize android studio

1 lectures

Colorize android studio

02:29

Dart Concepts Const, Final, Immutability, List & Map

5 lectures

Const, Final and Immutability

09:58

Dart Map & List

27:09

Dart Map & List together

03:58

Load Data from Map format

17:05

Edit map value and limit number

02:24

Navigation and routing

6 lectures

Navigation and routing basics

05:32

Navigation and MaterialApp

07:49

Show all tickets in a new route

07:12

Use routes property for navigation

10:01

Create a route file

02:35

Dynamic navigation with callback

05:48

Hotel widget

4 lectures

Create hotel widget

06:06

Show image and text on Hotel widget

10:52

Style hotel widget

06:14

Load and show map data

10:16

Search screen module

14 lectures

Create search screen file and refactor code

01:54

Show title of search screen

04:29

Create ticket and hotel tabs

10:22

Create a reusable widget for ticket tabs

1 question

Reusable widgets for AppTicketTabs

06:39

Create AppTextIcon widget

09:20

Create FindTickets Widget

04:34

Create widgets of Row

11:21

Show bottom of the Column

02:13

Show the text on the right column

07:27

Understanding Stack widget

01:26

Stack widget for overlapping

05:57

Show text on the right column bottom

06:06

Refactor code

03:24

Quiz about search screen

1 lectures

Quiz about widget styling and layout

3 questions

Ticket screen module

9 lectures

TicketScreen and tabs

10:22

Show the ticket view

04:20

Change ticket view top color

15:21

Change ticket view bottom color

08:47

Change the color of bottom text

02:51

Show more on the ticket screen with divider

09:27

Show more with reusable widgets

11:58

Show the rest of the ticket detail

11:38

Ticket screen and draw circle part

05:28

Navigation section

9 lectures

Understand the upcoming section

00:59

Passing the ticket index around

05:23

Create app bar and navigator

07:29

Grab the passed index in didChangeDependencies

05:55

Work on the hotel routing

04:25

Understanding GridView

09:20

Show the gridview using hotel text

03:40

Added hotel view with routing

11:17

Fix image layout issue with margin

01:16

Quiz section

1 lectures

Quiz about navigation

4 questions

CustomScrol View, Slivers, SliverAppBar, SliverList

14 lectures

Introduce upcoming design

01:24

Introduce CustomSrollView

02:09

Routing for hotel detail

03:35

Create CustomScrollView

15:23

Assignment for viewing hotel images and title

1 question

Show image and text

07:54

Work on the back button

06:34

Image complete width

01:34

Work on the title text

09:46

Understanding shadow concept

08:15

Quiz about shadows in flutter

1 question

Understand how expandable text should work

02:15

Toggle between the expanded value

10:43

Toggle the expanded text

11:05

Profile screen module

8 lectures

Profile screen and show text and image part 1

08:15

Profile screen and text layout part 2

07:04

Profile screen and complex layout part 3

07:05

Profile screen and complex layout part 4

07:34

Profile screen and text and number part 5

03:13

Profile screen and row and column layout part 6

06:40

Profile screen and row and column layout part 7

07:55

Profile screen and bottom text part 8

02:24

State management system Getx

7 lectures

Understand why we need state management package part 1

04:10

Set up getx state management part 2

05:21

Getx dependency injection and access value in the UI part 3

06:14

Getx and understand shared state part 4

02:56

Getx and understand more about shared state part 5

04:29

Getx and separate the shared variables part 6

05:49

Getx and increment and decrement function at the same time part 7

02:23

Riverpod state management

5 lectures

Convert Getx to Riverpod part 1

17:52

Riverpod bottom navigation bar part 2

19:31

Introducing Riverpod 2.0 part 3

10:27

Riverpod and generate providers 4

07:35

Riverpod and user providers on the ui

01:19

Đánh giá của học viên

Chưa có đánh giá

Course Rating

5

0%

4

0%

3

0%

2

0%

1

0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Email

Nội dung

Khoá học liên quan

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi