タブで画面を切り替えられるようにTabbarを追加してみます。画面の上側に表示されるTabbarです。

Work with tabs
How to implement tabs in a layout.

lib/my_app.dart
import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:my_app_01/my_home_page.dart'; class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', localizationsDelegates: AppLocalizations.localizationsDelegates, supportedLocales: AppLocalizations.supportedLocales, theme: ThemeData( primarySwatch: Colors.blue, ), home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: const TabBar( tabs: [ Tab(icon: Icon(Icons.looks_one)), Tab(icon: Icon(Icons.looks_two)), Tab(icon: Icon(Icons.looks_3)), ], ), title: const Text('Tabs Demo'), ), body: const TabBarView( children: [ Icon(Icons.looks_one), Icon(Icons.looks_two), MyHomePage(title: 'Flutter Demo Home Page'), ], ), ), ), ); } }
GoogleのMaterial Iconsは凄いですね。ダウンロードしてビルドプロジェクトにアイコン画像を登録しなくても、いきなりコード内で使用できます。アプリで使用するアイコンが全てMaterial Iconsだったら開発効率が良くなります。

Google Fonts
Making the web more beautiful, fast, and open through great typography