flutterアプリにAppBarを追加する

今回は、flutterで作成したスマホアプリにAppBarを追加したいと思います。

AppBarとは？

• AppBarとは Scaffold Class のプロパティの一つです。

Scaffoldクラスの構成要素

• Flutterでアプリを作り始めるとScaffoldと言うワードをよく目にすると思います。Scaffoldクラスの詳細はオフィシャルページを参照ください。
• 今回は説明を簡単にするために、画面の構成要素を以下の５つの要素に限定して説明することにします。

AppBarの詳細

• アプリバーはTabBarやFlexibleSpaceBarなどと組み合わされた構成されることが多いです。

完成イメージ

before	→	after
bodyの文字が最上部に詰めて表示されている	→

実装

my_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class MyWidget extends ConsumerWidget {
  const MyWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final appBar = AppBar(
        title: const Text('タイトル　123456789'),
        centerTitle: true,
        titleSpacing:100,
        titleTextStyle:TextStyle(
          fontSize: 25,
          color: Colors.blueGrey,
          fontWeight: FontWeight.bold,
          fontStyle: FontStyle.italic,
          decoration: TextDecoration.underline,
        ),

        backgroundColor: Color(0xFFa0d8ef),
        flexibleSpace: Container(
          decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/appbar/appbar_bg.png'),
              fit: BoxFit.fill),
          ),
          
        ),
        elevation: 3.0,
    );
    return Scaffold(
      appBar: appBar,
      body: Container(
        child: Text('Bodyを記載しています。'),
      ),
    );
  }
}

title

title: const Text('タイトル'),

• タイトルとして表示する文字列を記載します。

centerTitle

centerTitle: true,

• タイトルをエリアの中央に配置する場合に使用します。

titleSpacing

titleSpacing:100,

• タイトルエリアの周囲位にスペースを作成します。
• スペースを優先するので、タイトルがエリアに収まらないときは一部を省略して表示します

titleTextStyle

titleTextStyle:TextStyle(
  fontSize: 25,
  color: Colors.blueGrey,
  fontWeight: FontWeight.bold,
  fontStyle: FontStyle.italic,
  decoration: TextDecoration.underline,
),

• テキストのスタイルを指定します。

backgroundColor

backgroundColor: Color(0xFFa0d8ef),

• 背景色を指定します。

titleSpacing

flexibleSpace: Container(
  decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage('assets/images/appbar/appbar_bg.png'),
    fit: BoxFit.fill),
  ),
),

• タイトルエリアの周囲位にスペースを作成します。
• スペースを優先するので、タイトルがエリアに収まらないときは一部を省略して表示します

titleSpacing

elevation: 3.0,

• 影を作ります

main.dart

import 'package:flutter/material.dart';
import 'package:training_app/my_widget.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  const app = MyApp();
  const scope = ProviderScope(child: app);
  runApp(scope);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: MyWidget()
    );
  }
}

• main.dartと同じフォルダに存在するmy_widget.dartにMyWidget()が定義されています。
• MyWidget()はScaffoldを返却します。