Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Flutter & Dart : The complete beginners guide [2025]

Name: Flutter & Dart : The complete beginners guide [2025]
Rating: 4.5 (113 reviews)

Learn Mobile App Building Step By Step

Created byDastagir Ahmed

Last updated 7/2025

English

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

Course content

24 sections • 145 lectures • 18h 16m total length

Introduction3:29

Intro to the section1:21
Introduce the section by guiding you to create a Flutter project with Android Studio or VS Code, understand the project structure, set up a git repo, and clean Main.dart.
Create project for Flutter app in Android Studio5:49
Understand project structure6:58
Navigate the Flutter project structure with lib as the code core and main.dart as the entry point. Explore platform folders, build behavior, and key files such as androidmanifest.xml and pubspec.yaml.
Create a git repo for the project2:53
Remove comments from main.dart2:31

Intro to the section1:33
About main() function4:20
Explore how the dart main function acts as the entry point and how flutter uses it to run apps, emphasizing reactive UI and basic concepts.
Understanding class and inheritance in Dart16:40
Understanding abstract class and constructor12:42
Understand class and stateful class9:22
More about Stateful class6:14
Explore how a stateful class manages ui state in Flutter using a floating action button, row layouts, and main axis alignment to update the interface with hot reload.
MaterialApp and Scaffold13:13

Overview of the upcoming HomeScreen1:17
Explore building a complex home screen module in Flutter using containers and a single child scroll view, with nested widgets that support horizontal movement and showcase artwork and design.
Home screen module and understand the layout part 12:32
Understanding Container() widget7:37
About other nested widgets2:02
Explore how to compose Flutter layouts with nested widgets such as container, column, list view, and text, and learn to create scrollable, styled sections with background colors.
Understanding vertical and horizontal layout design1:35
Define widgets with layout4:53
Finish header layout with widgets10:11
Style Text() widgets9:47
Create separate style class7:46
Style Container for Image5:49
Show image on the screen6:39
Create a separate media file6:48
Create a search box layout6:02
Background color and remove AppBar4:16
Understand and create a reusable widget17:26
Understand copyWith method and create examples21:04
Learn how the copyWith method in Dart creates new object instances with optional named parameters, preserving old values when not overridden, with practical examples.
Understand the ticket view layout1:44
Create TicketView widget class8:31
Style TicketView left and right border4:25
TicketView destination text4:15
TicketView big dots4:12
Create a global big dot widget for ticket views in Flutter by building a stateless BigDot class with a boxed border, padding, and configurable color to match the UI.
Expanded widget and count of them3:26
Understanding Stack widget2:55
Understand the dynamically generated widget principle3:16
Explore dynamically generating widgets in Flutter using LayoutBuilder to measure space, List.generate to create items, and Flex to space them with SizedBox or Container.
Create AppLayoutBuilderWidget14:06
Show and rotate plane icon3:59
Understand the degree and radians for angle3:26
Rotating using radians
Show the second row in the blue part of the ticket3:52
Show the bottom part of the ticket2:37
Create big circle widget for ticket end11:22
Dart Ternary operator4:35
Show the ticket dash5:59
Change the text of the orange part5:01
Learn to customize the orange text in a Flutter ticket view by editing day, date, and departure time across three containers, while addressing layout and text size across screen resolutions.
Style first row bottom text4:32
Create a headline four style at size 14 in the ep styles file, then use fixed widths via sized box and end alignment to center the first row text.
Create reusable widgets for first row ticket10:44
Create reusable widgets for bottom row ticket12:40
Understand dart Map & List together in our ticket app3:58

Requirements

Having a computer and Flutter SDK installed

Description

This app covers Flutter for very beginners to advanced learners. In this tutorial step by step we will build a beautiful UI and learn the very core of Dart and Flutter. At the beginning of the course we have given most necessary basic of dart to build an app. This course 3-5 minutes in each lecture so that students can follow us easily.

Not only that, we have used a lot of pictures and graphics to make the understanding of Flutter easy.

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.

At the same time we have covered, state management packages. We have covered Getx, Riverpod and most popular BLoC state management. Thus you learn about all the favourite state management and see the comparison among them.

Who this course is for:

Flutter Course for Beginners App Building Tutorial Step by Step

Flutter & Dart : The complete beginners guide [2025]

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 3min

Download necessary tools and install VS code | Flutter SDK | Android SDK | Tools5 lectures • 14min

Project setup and structure and github repo5 lectures • 20min

Core understanding of Dart class, inheritance and Flutter7 lectures • 1hr 4min

Quiz about Dart knowledge0

Bottom Navigation module7 lectures • 48min

Quiz section about BottomNavigationBar0

Home screen module37 lectures • 3hr 55min

Quiz about Home screen widgets0

Colorize android studio1 lecture • 2min

Requirements

Description

Who this course is for: