Flutterコンポーネント: カスタムAppBarの作成方法

AppBarウィジェットの拡張: 最も基本的な方法は、AppBarウィジェットを継承して独自のカスタムAppBarクラスを作成する方法です。以下に例を示します:

class CustomAppBar extends AppBar {
  CustomAppBar({Key? key, required Widget title}) : super(key: key, title: title);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue, // カスタムの背景色
        borderRadius: BorderRadius.circular(8.0), // カスタムの角丸
      ),
      child: super.build(context), // 親クラスのbuildメソッドを呼び出す
    );
  }
}

この方法では、AppBarクラスを拡張して自分自身のカスタムロジックを追加できます。上記の例では、背景色と角丸をカスタマイズしています。

PreferredSizeウィジェットの使用: AppBarウィジェットの代わりにPreferredSizeウィジェットを使用してカスタムAppBarを作成することもできます。PreferredSizeウィジェットは、ウィジェットの優先サイズを指定するために使用されます。以下に例を示します:

この例では、PreferredSizeウィジェットを使用してAppBarの高さを指定し、AppBarウィジェットを子ウィジェットとして使用しています。背景色、角丸、タイトル、およびその他のAppBarプロパティもカスタマイズできます。

CustomScrollViewとSliverAppBarの組み合わせ: 複雑なスクロール動作やスクロール可能なコンテンツを持つ場合は、CustomScrollViewとSliverAppBarを組み合わせてカスタムAppBarを作成することもできます。以下に例を示します:

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true, // スクロール時にAppBarを画面上部に固定する
          expandedHeight: 200.0, // AppBarの高さ
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/header_image.jpg'), // カスタムのヘッダー画像
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        // 他のSliverウィジェットやコンテンツを追加
      ],
    );
  }
}

この方法では、SliverAppBarを使用してAppBarの外観や動作をより詳細にカスタマイズできます。例では、ヘッダー画像の表示とスクロール時の固定を設定しています。

これらはカスタムAppBarを作成するためのいくつかの方法とコード例です。それぞれの方法は、異なるニーズやデザイン要件に適しています。あなたのプロジェクトの要件に合わせて、適切な方法を選択してください。