Flutter AppBarのスクロール時の背景色の設定方法

AppBarの背景色をスクロール時に変更する方法:

AppBarの背景色をスクロール時に変更するには、SliverAppBarを使用します。以下のように、SliverAppBarのflexibleSpaceプロパティにContainerを配置し、そのContainerのcolorプロパティをスクロール時の背景色に設定します。

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: 200, // AppBarの高さ
      flexibleSpace: Container(
        color: Colors.blue, // スクロール時の背景色
      ),
      // その他のAppBarの設定
      // ...
    ),
    // その他のスクロール可能なウィジェット
    // ...
  ],
)

AppBarの背景色をスクロール量に応じて変更する方法:

AppBarの背景色をスクロール量に応じて変化させるには、SliverAppBarとScrollControllerを組み合わせて使用します。以下のコード例では、ScrollControllerを使用してスクロール量を監視し、それに基づいてAppBarの背景色を変更しています。

ScrollController _scrollController = ScrollController();
@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.offset > 100) {
      // スクロール量が100を超えた場合の背景色
      setState(() {
        _appBarColor = Colors.blue;
      });
    } else {
      // スクロール量が100以下の場合の背景色
      setState(() {
        _appBarColor = Colors.red;
      });
    }
  });
}
@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: _appBarColor, // AppBarの背景色
      // その他のAppBarの設定
      // ...
    ),
    body: ListView.builder(
      controller: _scrollController,
      itemCount: 1000,
      itemBuilder: (context, index) => ListTile(
        title: Text('Item $index'),
      ),
    ),
  );
}

上記の例では、スクロール量が100を超えた場合とそれ以下の場合でAppBarの背景色が異なるように設定しています。

これらの方法を使用すると、FlutterアプリのAppBarのスクロール時の背景色を簡単に変更できます。必要に応じて、さまざまなデザイン要件に応じた色やアニメーションを適用することも可能です。