Book Image

Cross-Platform UIs with Flutter

By : Ryan Edge, Alberto Miola
Book Image

Cross-Platform UIs with Flutter

By: Ryan Edge, Alberto Miola

Overview of this book

Flutter is a UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single code base. With Flutter, you can write your code once and run it anywhere using a single code base to target multiple platforms. This book is a comprehensive, project-based guide for new and emerging Flutter developers that will help empower you to build bulletproof applications. Once you start reading book, you’ll quickly realize what sets Flutter apart from its competition and establish some of the fundamentals of the toolkit. As you work on various project applications, you’ll understand just how easy Flutter is to use for building stunning UIs. This book covers navigation strategies, state management, advanced animation handling, and the two main UI design styles: Material and Cupertino. It’ll help you extend your knowledge with good code practices, UI testing strategies, and CI setup to constantly keep your repository’s quality at the highest level possible. By the end of this book, you'll feel confident in your ability to transfer the lessons from the example projects and build your own Flutter applications for any platform you wish.
Table of Contents (12 chapters)

Creating an enhanced counter app

Since this chapter focuses on performance considerations and Flutter’s fundamentals, we want to keep the UI minimal. The app we’re going to build is just some text, two buttons, and a horizontal list view. Very intuitively, the plus and minus buttons respectively increase and decrease the text at the center by 1. New tiles are only added to the scrollable list underneath when the value is increased; tapping on minus won’t add a new item in the ListView widget. You can see a representation of the UI in the following screenshot:

Figure 1.2 – The UI of our enhanced counter app

We can immediately see that the UI is made up of the following three main parts:

  • A title at the top with two red and green signs
  • The counter itself in the middle
  • A scrollable list at the bottom

These three main UI pieces can be mapped to three widgets we need to create for the app. We have decided to structure...