Mobile Apps · MBC-21

Flutter for Beginners

Flutter for Beginners is a foundation course in building cross-platform mobile apps with Flutter and Dart, from tool setup and Material 3 layouts to managing state and loading data from a web API. It suits students, teachers and IT staff with some programming experience, and you leave able to build your own app for Android and iOS.

Updated 8 Oct 2026

From 6,750 THB / person 7,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration18 hours · 3 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

If you want to build mobile apps that run on both Android and iOS from a single codebase, Flutter remains one of the most popular choices. You write everything in one language, Dart, the apps feel close to native, and Hot Reload shows every change instantly. Yet many beginners get stuck installing the tools, find the project structure confusing, or cannot get layouts and state to behave, and give up before they ever finish a working app.

This new edition of the course is updated for Flutter 3.47 and Dart 3.13. It takes learners from installing the tools and a Dart 3 refresher to a first app, explains the project structure file by file, builds layouts with the core widgets following Material 3, and covers state from setState to ChangeNotifier. Learners then build a BMI calculator, a contact list app and a weather app that loads data from a web API, debug with DevTools and build the app for installation. (3 days, 6 hours per day, 18 hours in total, Beginner level.)

What you’ll gain

Install the Flutter SDK, VS Code and the Android or iOS tooling, and check the setup with flutter doctor
Write the essential Dart 3 needed to build Flutter apps
Understand the Flutter project structure and run apps on emulators, simulators and real devices
Build layouts with the core widgets and apply a Material 3 theme
Manage state with setState and ChangeNotifier and build multi-screen apps
Create forms and lists, and save data on the device
Load data from a web API and handle loading and error states
Debug apps with DevTools and build an app for installation

Who this course is for

Students who want to start building cross-platform mobile apps
Teachers, lecturers and trainers who want to teach with Flutter
IT staff, system administrators and web developers moving into mobile apps
Anyone with some programming background who wants to build their own app

Prerequisites

Some programming experience; a Dart refresher is given on the first day
No Swift, Kotlin or Java experience is needed
Familiarity with using apps on Android or iOS and installing software on a computer
A Windows or macOS laptop with enough free disk space and permission to install software

Curriculum

Course Details

This course is a 2026 edition that replaces the previous Flutter 3 for Beginners course. It has been rewritten and updated for Flutter 3.47 and Dart 3.13. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Beginner level. It starts from installing the tools and a Dart refresher, so it suits people who are new to Flutter. Learners build a BMI calculator, a contact list app and a weather app that loads data from a web API, practise debugging with DevTools and build an app for installation. Afterwards they can continue to the intermediate and advanced Flutter courses. Learners take home a lab guide and source code for every workshop.

Day 1 Getting Started with Flutter and Your First App

Section 1: Lab: App Development Overview and Tool Setup

Native, cross-platform and web apps, and how they differ
Meet Flutter 3.47 and Dart 3.13: strengths, limits and what to know before you start
Install the Flutter SDK on Windows and macOS and set up the PATH
Install VS Code with the Flutter extension, and Android Studio for the Android SDK
Create an Android emulator and an iOS simulator, then check the setup with flutter doctor

Section 2: Lab: Dart 3 Essentials for Flutter

Variables, data types, final, const and null safety
Conditions, loops, functions and the named parameters Flutter uses everywhere
Classes, constructors, lists and maps for holding app data
Dart 3 features that shorten code: records, patterns, switch expressions and dot shorthands
Lab: write short Dart programs in DartPad and on your own machine

Section 3: Lab: Your First Project and Its Structure

Create a new project with flutter create and from VS Code
A walk through the structure: lib/main.dart, pubspec.yaml and the android and ios folders
Run the app on an emulator, a simulator and a real phone over USB or Wi-Fi
Hot reload versus hot restart, and when to use each

Section 4: Lab: Widgets and a Counter App with Material 3

The widget tree and building screens from small widgets
MaterialApp, Scaffold, AppBar, Text and FloatingActionButton
Theme the app with ColorScheme.fromSeed and support dark mode
Material 3 buttons: FilledButton, OutlinedButton and IconButton
Lab: rewrite the counter app from scratch with increment, decrement and reset

Section 5: Lab: Customising the App and Adding Packages

Change the app name, application ID and bundle identifier
Find and choose packages on pub.dev with sensible criteria
Add packages to pubspec.yaml with flutter pub add
Change the app icon with flutter_launcher_icons for Android and iOS
Create a splash screen with flutter_native_splash that supports Android 12 and later

Day 2 Layouts, State and Multi-Screen Apps

Section 6: Lab: The Layouts Every Beginner Needs

Container, Padding and BoxDecoration for spacing, borders, colours and rounded corners
Row and Column with mainAxisAlignment and crossAxisAlignment
Expanded, Flexible and SizedBox for dividing space
Stack, Positioned and Align for layering widgets
SafeArea and fixing the overflow errors you will meet most often

Section 7: Lab: Screen Sizes, Images, Icons and Fonts

Support phones and tablets with LayoutBuilder and MediaQuery
Wrap and FractionallySizedBox for flexible layouts
Manage images and assets in pubspec.yaml, and show images from the internet
Use icons and add a Thai font to the app
Lab: build a profile card screen that looks right on every screen size

Section 8: Lab: Understanding State in Flutter

What state is, and how StatelessWidget and StatefulWidget differ
setState and the State lifecycle: initState and dispose
Pass data between widgets with constructors and callbacks
Move state out of widgets with ChangeNotifier and ListenableBuilder
An overview of the provider package and when state management is worth it

Section 9: Workshop: A BMI Calculator App

Design the screens with the layouts learned so far and extract reusable custom widgets
Take user input with GestureDetector, InkWell, Slider and SegmentedButton
Build more than one screen, navigate with Navigator and pass values between screens
Show the result, colour and advice according to the BMI value
Workshop: finish the app and test it on a real phone

Section 10: Lab: Structuring a Project That Can Grow

Split the code into screens, widgets, models, services and theme folders
Keep constants, colours and styles in one place and reuse them across the app
Separating UI from data in the spirit of the Flutter architecture guide, kept simple
Meet go_router for apps with many screens and deep links
Use flutter analyze and lints to keep code quality high

Day 3 Data, Web APIs and Real-World Apps

Section 11: Workshop: A Contact List App

A login screen with Form, TextFormField and input validation
Show the list with ListView.builder and ListTile, with images and icons
View details, add, edit and delete contacts, with a search box
Save data on the device with shared_preferences
Workshop: keep the data after the app is closed and reopened

Section 12: Lab: Debugging with VS Code and DevTools

Set breakpoints, step through code and inspect variables while the app runs
Read the error messages and stack traces beginners meet most often
Use the Widget Inspector to track down layout problems
Check logs and network requests in Flutter DevTools
Lab: fix the bugs planted in a sample app

Section 13: Lab: Loading Data from a Web API

Asynchronous code in Dart: Future, async and await
Call a web API with the http package and read the JSON response
Create model classes with fromJson and handle null values
Display results with FutureBuilder, with loading and error states
Lab: load weather forecasts from the Open-Meteo API, which needs no API key

Section 14: AI Assistants and Building the App

Use an AI assistant in VS Code or Android Studio to explain and write code
Connect AI tools to the Dart and Flutter MCP server, and always review the code they produce
Build an APK and an App Bundle for Android
An overview of iOS builds and the steps to publish an app to the stores

Section 15: Workshop: The Complete Weather App

Extend the app from Section 13 using the project structure set up earlier
Add city search, a detail screen and pull to refresh
Polish it with a theme, weather icons and a background that follows the time of day
Present the work, review it together and plan the next learning steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

What is the difference between StatelessWidget and StatefulWidget in Flutter?

A StatelessWidget is for parts that never change once built, such as fixed text or icons. A StatefulWidget has a separate State object holding data that changes while the app runs, such as the number in a counter app. When that data changes you call setState and Flutter rebuilds that part of the screen. As an app grows, state shared by several screens is better moved into a ChangeNotifier that screens listen to through ListenableBuilder or the provider package.

How do you lay out screens in Flutter with Row, Column and Expanded?

Row arranges child widgets horizontally and Column vertically; mainAxisAlignment positions them along the main axis and crossAxisAlignment along the cross axis. To let a child fill the remaining space, wrap it in Expanded and use flex to set proportions. Container adds padding, borders and background colour, Stack layers widgets, SafeArea keeps content clear of screen notches, and LayoutBuilder lets a screen adapt to the device size.

What are the steps to show data from a web API in a Flutter app?

Add the http package with flutter pub add http, then write an async function that calls the API with http.get and waits with await. Decode the JSON with jsonDecode and turn it into objects through a model class with a fromJson constructor. Display the data with FutureBuilder, showing loading and error states and handling null values. This course works through every step with a weather app using the Open-Meteo API.

Who is the Flutter for Beginners course for, and what should I know beforehand?

It suits students, teachers, IT staff, web developers and anyone interested in cross-platform app development. Some programming experience helps, and Dart is covered from the basics on the first day. You do not need Swift, Kotlin or Java experience, and you should bring a Windows or macOS laptop on which you can install software.

What will I be able to do after the Flutter for Beginners course?

You will be able to install the Flutter SDK and run apps on emulators, simulators and real devices, change an app's name, icon and splash screen, build Material 3 layouts, manage state with setState and ChangeNotifier, create a BMI calculator, a contact list app that saves data on the device and a weather app driven by a web API, debug with DevTools and build an installable app. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Which tools are used on the Flutter for Beginners course?

You use the latest stable Flutter SDK with Dart 3, write code in VS Code with the Flutter extension, and use Android Studio for the Android SDK and emulator. The iOS simulator is available only on a Mac with Xcode, and apps are also tested on real phones. You check your setup with flutter doctor and track down problems with Flutter DevTools. Installation is covered for both Windows and macOS.