【Flutter】AppBarを実装してタイトルバーを表示させる

AppBarを実装してタイトルバーを表示させる
本記事で学べること

AppBarを実装してFlutterアプリのタイトルバーを表示させる方法が分かる。

ティファ

それでは、AppBarを実装してタイトルバーを表示させる方法を紹介していくよ!

目次

デフォルト状態のAppBar

AppBarは、ScaffoldのappBarプロパティの引数として使用します。

AppBarデフォルト
Scaffold(
  appBar: AppBar(),
),
ティファ

AppBarのデフォルト状態では上画像のようにタイトルバーの背景だけしか表示されないから「Text「や「Icon」などを実装してコンテンツを追加してみよう!

AppBarには3つのセクションがある

AppBarSection
  • leadingプロパティ:タイトルバーの1番左に位置する
  • titleプロパティ:タイトルバーの真ん中に位置する
  • actionsプロパティ:タイトルバーの1番右に位置する
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('Flutter入門アカデミー'),
          actions: [
            Icon(
              Icons.settings,
            ),
          ],
        ),
      ),
    );
  }
}
ティファ

leading、title、actionsプロパティには「Text」「Icon」以外のWidgetも使用可能だよ。

次はタイトルバーの外見に変化を与える便利なプロパティを紹介していくよ!

backgroundColorプロパティで背景色を指定する

AppBar背景色
      Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
          backgroundColor: Colors.red,
        ),
      ),

elevationプロパティでタイトルバーを立体化させる

AppBar elevation
      Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
          elevation: 30,
        ),
      ),

shadowColorプロパティで影色を指定する

AppBar shadowColor
      Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
          elevation: 30,
          shadowColor: Colors.red,
        ),
      ),
ティファ

appBarでよく使われるプロパティをいくつか紹介したけど、まだ他にも様々な機能があるから気になる方はドキュメントでチェックしてみよう!

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる