Mobile Apps · MBC-20

Flutter Workshop for Beginners

Flutter Workshop for Beginners is a hands-on workshop in which you build a news app with Flutter and Dart that loads content from the WordPress REST API, covering project structure, adaptive layouts, infinite scrolling, push notifications and multiple languages. It suits students, teachers and IT staff who already know basic Flutter, and you leave with a news app ready to build for release.

Updated 9 Oct 2026

From 8,550 THB / person 9,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

Once you can write basic Flutter, the next hurdle for many people is building an app with several screens that loads real data from a back end and offers the features users expect, such as loading more items at the end of a list, pull to refresh, notifications and a language switch. Working through one project that is big enough shows how all the parts of an app fit together.

This new edition of the course is updated for Flutter 3.47 and Dart 3.13 and runs as a workshop throughout. Learners build a news app that loads content from the WordPress REST API, from structuring the project and designing layouts with NavigationBar, a drawer and TabBar that adapt to tablets, to managing state with Provider, infinite scrolling and pull to refresh, push notifications with OneSignal, multiple languages with gen-l10n and building the app for release. (3 days, 6 hours per day, 18 hours in total, Beginner level.)

What you’ll gain

Set up the Flutter tools on Windows and macOS and check the setup with flutter doctor
Use the Dart 3 features needed in real work, such as records, patterns and async/await
Structure a Flutter project with clear separation so that it can grow
Design layouts with NavigationBar, a drawer and TabBar that work on phones and tablets
Build a news app that loads data from the WordPress REST API with infinite scrolling and pull to refresh
Manage app state with Provider and save settings on the device
Add push notifications with OneSignal and support multiple languages with gen-l10n
Build the app for release on both Android and iOS

Who this course is for

Students who have learned basic Flutter and want to build an app for real use
Teachers, lecturers and trainers who want a sample project for teaching
IT staff, web developers and WordPress site owners who want a mobile app alongside their site
Anyone interested in cross-platform app development with Flutter

Prerequisites

Able to write basic Flutter, or completed the Flutter for Beginners course
Understanding of basic Dart such as variables, functions and classes
No Swift, Kotlin or PHP experience is needed
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 Workshop 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 a workshop throughout. Beginner level. It builds on the Flutter for Beginners course: learners create a news app that loads

content from the WordPress REST API, from structuring the project and designing layouts that adapt to tablets to managing state with Provider, infinite scrolling and pull to refresh, push notifications with OneSignal, multiple languages and building the app for release. Afterwards they can continue to the Flutter Intermediate course. Learners take home a lab guide and the source code of the news app at every stage.

Day 1 Tools, Dart 3 and the App Skeleton

Section 1: Lab: Setting Up the Tools on Windows and macOS

Install the Flutter 3.47 SDK on Windows and macOS and set up the PATH
Install VS Code with the Flutter extension, and Android Studio for the Android SDK
Install Xcode and CocoaPods on macOS to run apps on iOS
Create an Android emulator and an iOS simulator and run a sample app
Check the setup with flutter doctor and fix the most common problems

Section 2: Lab: The Dart 3 You Use in Real Work

Sound null safety and handling null values safely
Records, pattern matching and switch expressions
Class modifiers: sealed, final, base and interface, and when to use them
Asynchronous programming with Future, async, await and Stream
Handling exceptions, and dates and times with DateTime and the intl package

Section 3: Lab: A Project Structure for Larger Apps

Split the code into screens, widgets, models, services, theme and utils folders
Keep constants, colours and styles in one place and reuse them across the app
Create custom widgets that can be reused throughout the project
Theme the app with ColorScheme.fromSeed and support dark mode
Keep code quality high with flutter analyze and lints, and reuse this skeleton for new projects

Section 4: Lab: Main Layouts with NavigationBar, a Drawer and TabBar

A bottom menu with the Material 3 NavigationBar
A side menu with NavigationDrawer, including a header and categories
Split content into categories with TabBar and TabBarView
Combine all three in one app without confusing users
Lab: build the main screen skeleton of the news app

Section 5: Lab: Layouts That Adapt to Phones and Tablets

Adaptive layout concepts and choosing breakpoints
Check the screen size with LayoutBuilder and MediaQuery.sizeOf
Switch from NavigationBar to NavigationRail on wide screens
Show a list and its details side by side on tablets
Lab: test the app on phones, tablets and with screen rotation

Day 2 WordPress, Provider and the News List

Section 6: Lab: Preparing WordPress as the Back End

Install WordPress 7 locally with XAMPP or Docker
Create categories, news posts and featured images for testing
Try the WordPress REST API at /wp-json/wp/v2 in a browser and in Postman
Use the categories, search, page, per_page and _embed parameters
Authenticate with Application Passwords for endpoints that require a login

Section 7: Lab: Starting the News App with Provider

An overview of the news app and all the screens to be built
Install the provider package and set up a ChangeNotifier for each area
Use MultiProvider, context.watch and context.read in the right places
Separate loading, success and error states so that screens show the right thing

Section 8: Lab: Models and a Service for the WordPress REST API

Create news and category models with fromJson that tolerate null values
Write a service that calls the API with the http package, separate from the screens
Load news by category and the details of a single post
Show featured images from the _embed data and handle HTML in headlines
Handle timeouts and show a message when the connection fails

Section 9: Lab: Vertical and Horizontal Lists on One Screen

ListView.builder and ListView.separated for news lists
A horizontally scrolling featured strip alongside a vertical list on the same screen
Use CustomScrollView and slivers when a screen has several sections
Cache images with cached_network_image, with a fallback image when loading fails
Make the lists display correctly on both phones and tablets

Section 10: Lab: Infinite Scrolling and Pull to Refresh

Load news in batches with the page and per_page REST API parameters
Watch the scroll position with a ScrollController and load the next batch automatically
Read the total page count from the X-WP-TotalPages header to know when to stop
Refresh the content with RefreshIndicator when the user pulls down
Lab: combine infinite scrolling and pull to refresh on the same screen

Day 3 Real-World Features and Release

Section 11: Lab: News Details, Search and Saved Articles

A news detail screen that displays HTML content and images
A search box that sends the query to the REST API
Save favourite articles on the device with shared_preferences
Share articles with share_plus and open external links with url_launcher

Section 12: Lab: Push Notifications with OneSignal

How push notifications work on Android and iOS
Sign up for a free OneSignal account and connect it to a Firebase project for Android
Install onesignal_flutter and start it with OneSignal.initialize
Ask for notification permission and let users turn notifications on or off in the app
Send a new-article notification from the dashboard and open the article when it is tapped

Section 13: Lab: Multiple Languages with gen-l10n

Set up flutter_localizations and generate: true in pubspec.yaml
Create Thai and English ARB files and configure l10n.yaml
Use messages through AppLocalizations, including messages with placeholders
Let users switch language and remember the choice with Provider and shared_preferences
Format dates to match the selected language

Section 14: Lab: Building and Preparing a Release for Android and iOS

Change the app icon with flutter_launcher_icons and change the app name
Set the application ID, bundle identifier and version number
Sign the Android app with a keystore and set up iOS signing in Xcode
Build an App Bundle for Android and a build for iOS
An overview of publishing to Google Play and the App Store

Section 15: Workshop: The Complete News App

Bring every feature together and test on real devices
Polish the theme, dark mode and empty states when there is no data
Track down problems with Flutter DevTools before handing in
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

How do you build infinite scrolling in a Flutter ListView?

Attach a ScrollController to the ListView and listen to the scroll position. When the user nears the end of the list, call the API for the next page with the page and per_page parameters and append the new items. Guard against duplicate loads while a request is in flight, and stop when you reach the last page, which the WordPress REST API reports in the X-WP-TotalPages header. On this course it is combined with RefreshIndicator so that pull to refresh works on the same screen.

What are records and pattern matching in Dart 3?

A record bundles several values together without defining a class, for example letting a function return both data and a status. Pattern matching lets you pull values out of records, lists or objects and test conditions in one step. Combined with switch expressions and sealed classes, it keeps the code that handles app states such as loading, success and error short and exhaustive.

How do you show WordPress news in a Flutter app?

WordPress has a built-in REST API at /wp-json/wp/v2/posts, so no extra back-end code is needed. In the app, create models with fromJson, write a service that calls the API with the http package, add the categories parameter to filter by category and _embed to get featured images in the same response, then display the data through Provider and a ListView. Endpoints that need a login can be authenticated with WordPress Application Passwords.

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

It suits students, teachers, IT staff, web developers and WordPress site owners who want to build a mobile app. You should be able to write basic Flutter or have completed the Flutter for Beginners course, and understand basic Dart. No Swift, Kotlin or PHP experience is needed, 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 Workshop for Beginners course?

You will be able to structure a Flutter project so that it can grow, design layouts with NavigationBar, a drawer and TabBar that adapt to tablets, load data from the WordPress REST API, manage state with Provider, build infinite scrolling and pull to refresh, add push notifications with OneSignal, support multiple languages with gen-l10n and build the app for release on Android and iOS. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Flutter Workshop for Beginners course be run in-house for our team?

Yes. IT Genius Institute runs in-house training for organisations. The workshop examples can be adapted to your team's work, for example turning the news app into an internal announcements app that reads from your own WordPress site, and the focus can be shifted to the topics your team needs. Contact the institute for details and a quotation.