4 Flutter UI: Important Widgets, Theme, and Layout

 

In this chapter:

  • Start your first Flutter app
  • User-interface in Flutter
  • Layout widgets
  • Themes and Styling
  • Custom Form elements
  • Builder patterns

Flutter isn’t just a framework. It’s a complete SDK. And, perhaps the most exciting piece of this SDK to me, as a web developer, is the massive library of built-in widgets that make building the 'front-end' of your mobile app easy.

This chapter, and the following two, are going to be all about user-interface and making an app beautiful. This chapter includes exploring some of the widgets built into Flutter, layout, styling, and more. In the following chapters, I’ll go a bit further into UI and talk about forms and user input, as well animations.

This is the app I’ll use to explain UI in Flutter in the next few chapters.

Figure 4.1. Screenshots of the weather app
weather app screenshots

In this chapter, in particular, we’ll look at these high-level categories:

4.1  Setting up and configuring a Flutter app

4.1.1  Configuration: pubspec and main.dart

4.1.2  SystemChrome

4.2  Structural Widgets and more configuration

4.2.1  MaterialApp widget

4.2.2  Scaffold

4.2.3  AppBar and PreferredSizeWidget

4.3  Styling in Flutter and Theme

4.3.1  Theme

4.3.2  MediaQuery and the of method

4.3.3  ScreenAwareSize method

4.4  Common Layout and UI widgets

4.4.1  Stack

4.4.2  Table

4.4.3  TabBar

4.5  ListView and Builders

4.6  Summary

sitemap