Chapters
Chapters

Chapters

Hide chapters

Flutter Apprentice

Fourth Edition · Flutter 3.16.9 · Dart 3.2.6 · Android Studio 2023.1.1

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Build Your First Flutter App

Section 1: 2 chapters
Show chapters Hide chapters

Section II: Everything’s a Widget

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Navigating Between Screens

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence & State

Section 4: 6 chapters
Show chapters Hide chapters

Section V: Working With Firebase Cloud Firestore

Section 5: 1 chapter
Show chapters Hide chapters

Section VI: Testing Your Flutter App

Section 6: 2 chapters
Show chapters Hide chapters

Section VII: Deployment

Section 7: 4 chapters
Show chapters Hide chapters

3. Basic Widgets
Written by Vincent Ngo

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Dive into the world of Flutter, where everything is a widget! This chapter unveils three fundamental widget categories essential for:

  • Structure and navigation
  • Displaying information
  • Positioning widgets

By the end of the chapter, you’ll construct a social food app called Yummy. You’ll use various widgets to create three distinct tabs: Category, Post, and Restaurant.

Ready? Dive in by taking a look at the starter project.

Getting Started

Start by downloading this chapter’s project from the book materials repo https://github.com/kodecocodes/flta-materials.

Locate the projects folder and open starter. Navigate to pubspec.yaml and tap Pub get to get all your flutter dependencies.

Run the app, and you’ll see an app bar and a simple text:

lib/main.dart serves as the launchpad of any Flutter application. Open it, and you’ll see the following:

import 'package:flutter/material.dart';

void main() {
  // 1
  runApp(const Yummy());
}

class Yummy extends StatelessWidget {
  // TODO: Setup default theme

  // 2
  const Yummy({super.key});

  // TODO: Add changeTheme above here

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Yummy';

    // TODO: Setup default theme

    //3
    return MaterialApp(
      title: appTitle,
      //debugShowCheckedModeBanner: false, // Uncomment to remove Debug banner
      
      // TODO: Add theme
      
      // TODO: Replace Scaffold with Home widget
      // 4
      home: Scaffold(
        appBar: AppBar(
          // TODO: Add action buttons
          elevation: 4.0,
          title: const Text(
            appTitle,
            style: TextStyle(fontSize: 24.0),
          ),
        ),
        body: const Center(
          child: Text(
            'You Hungry?😋',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
    );
  }
}

Take a moment to explore what the code does:

  1. Widget Initialization: Every journey with Flutter commences with a widget. The runApp() function initializes the app by accepting the root widget, in this case, an instance of Yummy.
  2. Every widget must override the build() method.
  3. The Yummy widget starts by composing a MaterialApp widget to give it a Material Design system look and feel. See https://material.io for more details.
  4. Scaffold defines the app’s visual structure, containing an AppBar and a body for starts.

Styling Your App

Flutter, being cross-platform, supports Android’s Material Design and iOS’s Cupertino design systems.

Defining a Theme Class

Spice up your app with a custom theme! With Material 3, theme management is streamlined, focusing on defining color variations.

Applying the Theme

In main.dart, import your predefined color themes:

Switching Themes

To enable theme switching within your app, you need to manage state by converting the Yummy widget to a StatefulWidget. The good news is that instead of converting manually, you can just use a right-click menu shortcut to do it automatically.

Implementing Theme State Changes

Within _YummyState class, locate // TODO: Add changeTheme above here and replace it with the following functions:

Creating Custom Buttons to Switch Color and Mode

Now it’s time to create two buttons that will allow your users to:

Creating a Theme Button

You’ll create a button to toggle between light and dark mode. In lib directory, create a new folder called components and create a new file called theme_button.dart in that directory, add the following code to it:

Creating the Color Button

In lib/components directory, create a new file called color_button.dart and add the following code to it:

Adding Action Buttons to the App Bar

In main.dart add the following imports:

Understanding App Structure and Navigation

Establishing your app’s structure from the beginning is important for the user experience. Applying the right navigation structure makes it easy for your users to navigate the information in your app.

Using Scaffold

The Scaffold widget implements all your basic visual layout structure needs. It’s composed of the following parts:

Icb leh/ nluyewk faob rev Fupxixy Uhii xapn yaf pacwq vop Cetxub Mow JfoudoymOlteitXaklam

Setting Up the Home Widget

As you build large-scale apps, you’ll start to compose a staircase of widgets. Widgets composed of other widgets can get really long and messy. It’s a good idea to break your widgets into separate files for readability.

Adding a BottomNavigationBar

Open home.dart, locate // TODO: Track current tab and replace it with the following:

Navigating Between Pages

To navigate between pages, you first need to define the list of pages the user may potentially navigate to. Still in home.dart, locate the comment // TODO: Define pages and replace it with the following:

Creating Custom Cards

In this section, you’ll compose three cards by combining a mixture of display and layout widgets.

Composing Category Card

The first card you’ll compose looks like this:

Constructing the Widget

Switch to category_card.dart. Locate // TODO: Get text theme and replace it with the following:

Adding Stacked Elements to the Card

Adding the first widget to the column. Locate // TODO: Add Stack Widget and replace it with the following:

Adding a Footer to the Card

Adding the second widget to the column. Locate // TODO: Add ListTile widget and replace it with the following:

Composing Post Card

It’s time to start composing the next card, the post card. Here’s how it will look by the time you’re done:

Adding the Child Widgets

Here’s how PostCard’s layout will look after you’ve added the Row’s children widgets:

Composing Restaurant Landscape Card

RestaurantLandscapeCard is the last card you’ll create for this chapter. This card lets the user explore popular restaurant trends and order food.

Composing Restaurant’s Child Widgets

Open restaurant_landscape_card.dart, locate // TODO: Add Image and replace it with the following:

Key Points

  • Three main categories of widgets are: structure and navigation, displaying information, and positioning widgets.
  • There are two main visual design systems available in Flutter, Material and Cupertino. They help you build apps that look native on Android and iOS, respectively.
  • Using the Material theme, you can build quite varied user interface elements to give your app a custom look and feel.
  • It’s generally a good idea to establish a common theme object for your app, giving you a single source of truth for your app’s style.
  • The Scaffold widget implements all your basic visual layout structure needs.
  • The Container widget can be used to group other widgets together.
  • The Stack widget layers child widgets on top of each other.

Where to Go From Here?

There’s a wealth of Material Design widgets to play with, not to mention other types of widgets — too many to cover in a single chapter.

2. Hello, Flutter
4. Understanding Widgets
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now