Flutter & Dart : The Complete Beginners Guide [2024]

Learn Mobile App Building Step By Step

What you'll learn

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

Requirements

Having a computer and Flutter SDK installed

Description

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 concept1. Class2. Inheritance3. List4. Map5. Method overridingAlong 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 UIHomepage UI includes greetings layout, ticket layout, colorful tickets, hotel view with images.Ticket searchTicket search UI includes searching tickets UI with upcoming flights.Ticket UITicket UI involves showing ticket information with bar code. This is beautiful.Book TicketThis 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 tutorial1. reusable style component2. reusable color pallet3. reusable column widget4. reusable layout builder widget5. reusable column widget6. reusable row widget7. reusable ticket widgetAfter finishing this course, you will have much better understanding how flutter works and you will master app layout building.

Overview

Section 1: Introduction

Lecture 1 Introduction

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

Lecture 2 Download all the tools

Lecture 3 Install VS code

Lecture 4 Install Flutter and Android SDK and Command lines tools

Lecture 5 Create your first project using VS code (windows)

Section 3: Project setup and structure and github repo

Lecture 6 Create project for Flutter app in Android Studio

Lecture 7 Understand project structure

Lecture 8 Create a git repo for the project

Lecture 9 Remove comments from main.dart

Section 4: Core understanding of Dart class, inheritance and Flutter

Lecture 10 About main() function

Lecture 11 Understanding class and inheritance in Dart

Lecture 12 Understanding abstract class and constructor

Lecture 13 Understand class and stateful class

Lecture 14 More about Stateful class

Lecture 15 MaterialApp and Scaffold

Section 5: Quiz about Dart knowledge

Section 6: Bottom Navigation module

Lecture 16 Create BottomNavBar class

Lecture 17 BottomNavigationBarItem and List

Lecture 18 Style BottomNavigationBar

Lecture 19 Install icons for bottom nav bar

Lecture 20 Create dummy screens for BottomNavigationBar

Lecture 21 Access BottomNavigationBar's index

Lecture 22 Use setState() to update BottomNavigationBar

Section 7: Quiz section about BottomNavigationBar

Section 8: Home screen module

Lecture 23 Overview of the upcoming HomeScreen

Lecture 24 Home screen module and understand the layout part 1

Lecture 25 Understanding Container() widget

Lecture 26 About other nested widgets

Lecture 27 Understanding vertical and horizontal layout design

Lecture 28 Define widgets with layout

Lecture 29 Finish header layout with widgets

Lecture 30 Style Text() widgets

Lecture 31 Create separate style class

Lecture 32 Style Container for Image

Lecture 33 Show image on the screen

Lecture 34 Create a separate media file

Lecture 35 Create a search box layout

Lecture 36 Background color and remove AppBar

Lecture 37 Understand and create a reusable widget

Lecture 38 Understand copyWith method and create examples

Lecture 39 Understand the ticket view layout

Lecture 40 Create TicketView widget class

Lecture 41 Style TicketView left and right border

Lecture 42 TicketView destination text

Lecture 43 TicketView big dots

Lecture 44 Expanded widget and count of them

Lecture 45 Understanding Stack widget

Lecture 46 Understand the dynamically generated widget principle

Lecture 47 Create AppLayoutBuilderWidget

Lecture 48 Show and rotate plane icon

Lecture 49 Understand the degree and radians for angle

Lecture 50 Show the second row in the blue part of the ticket

Lecture 51 Show the bottom part of the ticket

Lecture 52 Create big circle widget for ticket end

Lecture 53 Dart Ternary operator

Lecture 54 Show the ticket dash

Lecture 55 Change the text of the orange part

Lecture 56 Style first row bottom text

Lecture 57 Create reusable widgets for first row ticket

Lecture 58 Create reusable widgets for bottom row ticket

Lecture 59 Understand dart Map & List together in our ticket app

Section 9: Quiz about Home screen widgets

Section 10: Colorize android studio

Lecture 60 Colorize android studio

Section 11: Dart Concepts Const, Final, Immutability, List & Map

Lecture 61 Understanding const, final and immutability

Lecture 62 Dart Map & List

Lecture 63 Dart Map & List together

Lecture 64 Load Data from Map format

Lecture 65 Edit map value and limit number

Section 12: Navigation and routing

Lecture 66 Navigation and routing basics

Lecture 67 Navigation and MaterialApp

Lecture 68 Show all tickets in a new route

Lecture 69 Use routes property for navigation

Lecture 70 Create a route file

Lecture 71 Dynamic navigation with callback

Section 13: Hotel widget

Lecture 72 Create hotel widget

Lecture 73 Show image and text on Hotel widget

Lecture 74 Style hotel widget

Lecture 75 Load and show map data

Section 14: Search screen module

Lecture 76 Create search screen file and refactor code

Lecture 77 Show title of search screen

Lecture 78 Create ticket and hotel tabs

Lecture 79 Reusable widgets for AppTicketTabs

Lecture 80 Create AppTextIcon widget

Lecture 81 Create FindTickets Widget

Lecture 82 Create widgets of Row

Lecture 83 Show bottom of the Column

Lecture 84 Show the text on the right column

Lecture 85 Understanding Stack widget

Lecture 86 Stack widget for overlapping

Lecture 87 Show text on the right column bottom

Lecture 88 Refactor code

Section 15: Quiz about search screen

Section 16: Ticket screen module

Lecture 89 TicketScreen and tabs

Lecture 90 Show the ticket view

Lecture 91 Change ticket view top color

Lecture 92 Change ticket view bottom color

Lecture 93 Change the color of bottom text

Lecture 94 Show more on the ticket screen with divider

Lecture 95 Show more with reusable widgets

Lecture 96 Show the rest of the ticket detail

Lecture 97 Ticket screen and draw circle part

Section 17: Navigation section

Lecture 98 Understand the upcoming section

Lecture 99 Passing the ticket index around

Lecture 100 Create app bar and navigator

Lecture 101 Grab the passed index in didChangeDependencies

Lecture 102 Work on the hotel routing

Lecture 103 Understanding GridView

Lecture 104 Show the gridview using hotel text

Lecture 105 Added hotel view with routing

Lecture 106 Fix image layout issue with margin

Section 18: Quiz section

Section 19: CustomScrol View, Slivers, SliverAppBar, SliverList

Lecture 107 Introduce upcoming design

Lecture 108 Introduce CustomSrollView

Lecture 109 Routing for hotel detail

Lecture 110 Create CustomScrollView

Lecture 111 Show image and text

Lecture 112 Work on the back button

Lecture 113 Image complete width

Lecture 114 Work on the title text

Lecture 115 Understanding shadow concept

Lecture 116 Understand how expandable text should work

Lecture 117 Toggle between the expanded value

Lecture 118 Toggle the expanded text

Lecture 119 Show nested images

Lecture 120 Navigation from home page

Section 20: Profile screen module

Lecture 121 Profile screen and logo

Lecture 122 113. Profile and header text

Lecture 123 Profile text third header text

Lecture 124 Reusable header text

Lecture 125 Profile screen and show card

Lecture 126 Profile screen and row and column layout part 6

Lecture 127 Profile screen and row and column layout part 7

Lecture 128 Profile screen and bottom text part 8

Lecture 129 Show the positioned widget

Lecture 130 Finish with the profile screen

Section 21: State management system Getx

Lecture 131 Understand why we need state management package part 1

Lecture 132 Create GetX controller, inject dependencies and restructure code

Lecture 133 Getx dependency injection and access value in the UI part 3

Section 22: Riverpod state management

Lecture 134 Show bottom bar using Riverpod

Lecture 135 Toggle text expansion

Section 23: Flutter BLoC

Lecture 136 Injecting Bloc

Lecture 137 Show BottomNavBar with Bloc

Lecture 138 Deeper understanding of Bloc

Lecture 139 Toggle Text Expansion

Flutter Course for Beginners App Building Tutorial Step by Step