Dart Tutorial
/

Flutter Chapter 4 of 16

Material Design and App Structure

Build complete screens with Scaffold, app bars, navigation bars, drawers, tabs, cards, dialogs and themes.

Flutter includes a full set of Material Design components. This chapter covers the ones that give an app its structure and its look.

Lessons in this chapter

  1. Scaffold and AppBar in FlutterLearn Scaffold and AppBar in Flutter: page structure, titles, action buttons, floating action buttons and bottom bars.
  2. NavigationBar, Drawer and Tabs in FlutterLearn the three ways to switch between sections in Flutter: bottom NavigationBar, side Drawer, and TabBar with TabBarView.
  3. Card, ListTile, Chip and Divider in FlutterDisplay content in Flutter with Card, ListTile, Chip, Divider, Badge and ExpansionTile, and combine them into polished list items.
  4. Dialogs, SnackBars and Bottom Sheets in FlutterShow feedback in Flutter with AlertDialog, SnackBar and modal bottom sheets. Learn how to return values and when to use each one.
  5. Themes and Dark Mode in FlutterStyle a whole Flutter app with ThemeData and ColorScheme: seed colours, text themes, component themes, dark mode and a theme switch.
  6. Assets and Custom Fonts in FlutterAdd images, JSON files and custom fonts to a Flutter app: declare them in pubspec.yaml, load them in code and use Google Fonts.