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.

The...

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

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

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 {
@override
  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 {

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

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.