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

7. Interactive 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

In the previous chapter, you learned how to capture lots of data with scrollable widgets. But how do you make your app more engaging? How do you collect input and feedback from your users?

In this chapter, you’ll explore interactive widgets. In particular, you’ll learn to create:

  • Bottom Sheets widgets
  • Gesture-based widgets
  • Time and date picker widgets
  • Input and selection widgets
  • Dismissable widgets

You’ll continue to work on Yummy, building a more immersive experience. Users will be able to view menu items in detail, adjust quantities, manage and track order status.

You’ll start by enhancing the way users can view and select menu items for their cart.

Next, you’ll implement features for managing order details, including options for delivery or pickup and setting preferences for the date and time. Users will also be able to review their order summary and edit it before submission. Once an order is placed, they can track it in the Orders tab.

Additionally, you’ll ensure your app remains responsive in web mode, providing a seamless experience across different devices.

It’s time to get started.

Getting Started

Open the starter project in Android Studio and run flutter pub get, if necessary. Then, run the app. You’ll see the following:

New Project Files

There are new files in this starter project to help you out. Before you learn how to utilize interactive widgets, take a look at them.

New Packages

In pubspec.yaml under dependencies, there are two new packages:

New Files in the Models Folder

For your convenience two manager classes have been provided to manage state in your app:

Presenting Item Details

Before you display a specific menu item, you’ll need a way to present its widget.

Building a Bottom Sheet

Within lib/screens/restaurant_page.dart locate the comment // TODO: Show Bottom Sheet and replace it with the following:

Presenting the Bottom Sheet

Within the same file, find and replace // TODO: Replace _buildGridItem() and the whole _buildGridItem() function beneath it with the following:

Building Item Details

When you tap on a specific menu item it shows a bottom sheet to focus on that specific item. Showing the title, popularity, description and enlarged image of the item.

Showing Item Details

Return to restaurant_page.dart and locate the comment // TODO: Replace with Item Details Widget and replace it and the builder function with the following:

Creating a Most Liked Badge

Back in item_details.dart, locate the comment // TODO: Create Most Liked Badge and replace it with the following:

Showing an Item Image

Locate the comment // TODO: Create Item Image and replace it with the following:

Creating a Widget to Control the Cart

For the final piece of the item details view you’ll create a cart control component to update the quantity.

Creating the Minus Button

First you’ll create the minus button.

Creating Cart Number Container

Next, you’ll add the container to display the quantity.

Creating the Plus Button

The next step is to add the plus button.

Creating the Add to Cart Button

The final component you’ll add is the Add to Cart button.

Showing the Cart Control Components

Now that you’ve built all the components, it’s time to put them to use.

Using the Cart Control

You’ll now add the cart control to the item details view.

Applying the Cart Control

Locate the comment // TODO: Add Cart Control and replace it with the following:

Building the Checkout Page

In this next section, you’ll learn about how to create drawers and leverage input widgets to capture data.

Adding a Drawer

Drawers are commonly used for secondary navigation options.

Adding a Floating Action Button

You’ll use a floating action button when clicked on to present the drawer.

Opening the Drawer

Locate the comment // TODO: Define Scaffold Key and replace it with the following:

Add a Floating Action Button

Now you need to create the floating action button to open the drawer.

Creating the Checkout Page

Within the lib/screens directory, create a new file called checkout_page.dart and add the following code:

Using the Checkout Page

Back in restaurant_page.dart locate the comment // TODO: Replace with Checkout Page and replace it and the child beneath it with the following:

Adding Checkout State Properties

Back in checkout_page.dart, locate // TODO: Add State Properties and replace it with the following:

Adding a Segmented Control

The first widget you will build is a segmented control. This is a way for users to toggle between food delivery or pick-up.

Adding a Textfield to Enter the Customer Name

You’ll now need a way to gather the customer’s name. This will help the restaurant or the delivery team to know how to address the recipient.

Creating a Date Picker

Now you’ll need a way for the user to select the date to pick up or have the food delivered.

Creating a Time Picker

Here’s how your time picker will look like.

Showing the Date and Time Pickers

Replace // TODO: Add Date and Time Picker with:

Creating Order Summary

Now you’ll create a way to display the list of items the user selected.

Deleting an Item From an Order

The user will swipe left to remove a menu item.

Building the Orders Page

When someone places an order they likely want to see the list of orders they’ve placed. When you’re done with this section the Orders tab will look like this:

Showing the Orders Page

Open home.dart and locate // TODO: Replace with Order Page and replace it and the Center code beneath it with the following:

Key Points

  • You can pass data around with callbacks
  • You can use callbacks also to pass data one level up.
  • Manager objects help you manage functions and state changes in one place.
  • TextEditingController is used to listen for changes in a TextField widget.
  • Split your widgets by screen to keep your code modular and organized.
  • Gesture widgets recognize and determine the type of touch event. They provide callbacks to react to events like onTap() or onDrag().
  • You can use dismissible widgets to swipe away items in a list.

Where to Go From Here?

There are many ways to engage and collect data from your users. You’ve learned to pass data around using callbacks. You learned to create different input widgets. You also learned to apply touch events to navigate to parts of your app.

6. Advanced Scrollable Widgets
8. Routes & Navigation
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