Flutter Projects

By Simone Alessandria
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    Miles or Kilometers? Using Stateful Widgets
About this book

Flutter is a modern reactive mobile framework that removes a lot of the complexity found in building native mobile apps for iOS and Android. With Flutter, developers can now build fast and native mobile apps from a single codebase.

This book is packed with 11 projects that will help you build your own mobile applications using Flutter. It begins with an introduction to Dart programming and explains how it can be used with the Flutter SDK to customize mobile apps. Each chapter contains instructions on how to build an independent app from scratch, and each project focuses on important Flutter features.From building Flutter Widgets and applying animations to using databases (SQLite and sembast) and Firebase, you'll build on your knowledge through the chapters. As you progress, you’ll learn how to connect to remote services, integrate maps, and even use Flare to create apps and games in Flutter. Gradually, you’ll be able to create apps and games that are ready to be published on the Google Play Store and the App Store. In the concluding chapters, you’ll learn how to use the BLoC pattern and various best practices related to creating enterprise apps with Flutter.

By the end of this book, you will have the skills you need to write and deliver fully functional mobile apps using Flutter.

Publication date:
April 2020


Miles or Kilometers? Using Stateful Widgets

The world is a strange place. Most of us are aware that when you travel to other countries, you may find different languages, culture, and food, but you would expect that at least numbers and measures would stay the same wherever you go, right? Well, this is not so.

Measures such as distance, speed, weight, volume, and temperature change based on where you live. Actually, there are two main measurement systems in use today: the imperial system, which is used mainly in the United States; and the metric system, which is used in most of the other countries.

In this chapter, you'll bring some order to this confusing world: you will build a measures conversion app, in which distance and weight measures will be converted from imperial to metric, and vice versa.

We'll cover the following aspects in this chapter:

  • Project overview
  • ...

Technical requirements

Should you get lost in the construction of the app, you'll find the completed app code at the end of this chapter, or on the book's GitHub repository at https://github.com/PacktPublishing/Google-Flutter-Projects.

To follow along the code examples in this book, you should have the following software installed on your Windows, Mac, Linux, or Chrome OS device:

  • The Flutter SDK.
  • When developing for Android, you'll need: the Android SDK – easily installed by Android Studio.
  • When developing for iOS, you'll need: macOS and Xcode.
  • An emulator (Android), a simulator (iOS), or a connected iOS or Android device enabled for debugging.
  • An editor: Visual Studio Code, Android Studio, or IntelliJ IDEA are recommended. All should have the Flutter/Dart extensions installed.

You'll find an installation guide in the Appendix of this book.



Project overview

The measures conversion app will allow your users to select a measure – metric or imperial – and convert it to another measure. For example, they'll be able to convert a distance in miles to a distance in kilometers, or a weight in kilograms to a weight in pounds. So, next time you travel to a country with a different system, you'll be able to easily understand the speed of your car (and maybe avoid a fine), or the weight of the food you can buy at the market, and along the way, you'll build on your Flutter skills.

By the end of this chapter, you'll know how to leverage State using widgets such as TextFields to interact with users and make your apps interactive.

While doing so, you'll encounter several fundamental concepts in Flutter, and in particular, the following:

  • You'll see what State is in Flutter, start using...

Understanding state and stateful widgets

The widgets that we've seen so far are stateless widgets, meaning that once created they are immutable, and they do not keep any state information. When you interact with your users, you expect things to change. For example, if you want to convert a measure from one system to another, the result must change, based on some user input.

The most basic way to deal with changes in Flutter is using State.

State is information that can be used when a widget is built and can change during the lifetime of a widget.

An important part of this definition is that state is information that can change, and the most obvious takeaway of this concept is that when you want to add interactivity to your app, you can use State. But, if you read this definition thoroughly, it also means that it's not the widget itself that will change, it's the...


Creating the measure converter project

We will now create a new app that we'll use throughout this chapter to build a fully functioning measure converter:

  1. From your favorite editor, create a new app. Name the new app Unit Converter.
  2. In the main.dart file, remove the example code and write the code given as follows:
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Measures Converter',
home: Scaffold(
appBar: AppBar(
title: Text('Measures Converter'),
body: Center(
child: Text('Measures Converter'),

As you may have noticed, the preceding code makes use of a Stateless widget:

class MyApp extends StatelessWidget {
A Stateless widget is...


In the project that you've built in this chapter, you've seen how to create interactive apps using State.

You've created a Stateless widget and transformed it into a stateful widget. In doing so, you've seen the different implementations between the two, and you've learned that in Flutter, widgets are immutable. It's the State that changes.

You have used two very important widgets, which help you to interact with the users: TextField and DropdownButton.

For TextField, you've used one of the possible ways to respond to the user input, which is using the onChanged() event, and from there, you called the setState() method, which updates the inner State of a widget.

You've seen how to add a DropdownButton widget to your apps, and also how to set the items property that will contain a list of DropdownMenuItem widgets to show to the...



At the end of each project, you'll find a few questions to help you remember and review the contents that have been covered in the chapter, and this chapter is no exception. Please try to answer the following questions, and when in doubt, have a look at the content in the chapter itself: you'll find all the answers there!

  1. When should you use stateful widgets in your apps?
  2. Which method updates the State of your class?
  3. Which widget would you use to allow your user to select an option from a dropdown list?
  4. Which widget would you use to allow your user to type some text?
  5. Which event can you use when you want to react to some user input?
  6. What happens when your widgets take more space than what's available on the screen? How do you solve this issue?
  7. How can you get the width of the screen?
  8. What is Map in Flutter?
  9. How can you style your text?
  10. How can you separate...

Further reading

As Flutter is rapidly gaining momentum, you'll find a lot of articles and documents on the topics that we've touched in this project.

For padding, EdgeInsets, the box model, and layouts in general, the Flutter official documentation has a fantastic article to get you started at: https://flutter.dev/docs/development/ui/layout.

For TextFields have a look at: https://flutter.dev/docs/cookbook/forms/text-input.

For use cases of DropdownButton widgets, again the official documentation has a nice page at: https://docs.flutter.io/flutter/material/DropdownButton-class.html.

About the Author
  • Simone Alessandria

    Simone Alessandria wrote his first program when he was 12. It was a text-based fantasy game for the Commodore 64. Now, he is a trainer (MCT), author, speaker, passionate software architect, and always a proud coder. He is the founder and owner of Softwarehouseit. His mission is to help developers achieve more through training and mentoring. He has authored several books on Flutter, including Flutter Projects, published by Packt, and web courses on Pluralsight and Udemy.

    Browse publications by this author
Latest Reviews (3 reviews total)
Bon livre pédagogique. RAS
Todo sin problemas y el proceso mur rápido!
Fast and direct buy and donwload
Flutter Projects
Unlock this book and the full library FREE for 7 days
Start now