【Flutter】スクロールした時のAppBarの背景色

Question

実現したいこと

• Flutterでbody部分の要素をスクロールした時にAppBarの色が変わらないようにしたい

前提

現在、Flutterでアプリを作成しています。
AppBarとbody部分にListView.builderを利用して、AppBarとリストの要素を一覧で表示できるような仕様にしています。
そして、Bodyのリストの要素を下にスクロールすると、AppBarの色が微妙に変化してしまう点が気になっており、可能であれば、スクロールしてもAppBarの色を変化させないようにしたいです。

発生している問題・エラーメッセージ

（前述と同様に）Bodyのリストの要素を下にスクロールすると、AppBarの色が微妙に変化してしまう

該当のソースコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        /* SliverAppBar適用前のコード
        // appBar: AppBar(
        //   title: Text('Flutter Demo'),
        // ),
        // body: ListView(
        //   children: <Widget>[
        //     Text('Item 1', style: TextStyle(fontSize: 40)),
        //     Text('Item 2', style: TextStyle(fontSize: 40)),
        //     Text('Item 3', style: TextStyle(fontSize: 40)),
        //     Text('Item 4', style: TextStyle(fontSize: 40)),
        //     Text('Item 5', style: TextStyle(fontSize: 40)),
        //   ],
        // )
        */
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                floating: true,
                pinned: true,
                backgroundColor: Colors.blue.withOpacity(1.0),
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('Flutter Demo'),
                ),
              ),
            ];
          },
          body: MyListView(),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}

試したこと

ChatGPTやGeminiに相談し

• 「SliverAppBar」を利用する
• AppBarの透明度をwithOpacity(1.0)にして無くす

の2点を行いましたが、解決しませんでした。

補足情報（FW/ツールのバージョンなど）

• リストFlutterのバージョンは、次の通りです：

% flutter --version
Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (9 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3

• 初心者でつたない部分もあるかと思いますが、温かい目でご覧いただければ幸いです。

Comments

[eren1]

◼︎原因
flutterのバージョンが3.16以上だと「Material3」がデフォルトで有効になってしまうことによる影響みたいです。

◼︎解決方法
main.dartの下記widgetのuseMaterial3: false,を追加すれば、スクロール時にAppBarの色の問題が解消されるはずです！

例
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: false,
),
home: const TopPage(),
);

参考サイト
https://minpro.net/note-for-flutter-3-16-material-3

Answer 1

AppBar/SliverAppBarのscrolledUnderElevationを0.0にする。
https://api.flutter.dev/flutter/material/AppBar/scrolledUnderElevation.html

このパラメータは、bodyにリストなどがありそれがAppBarに隠れるような状況の場合にAppBarを上昇したような視覚効果を与えるものということです。

これでだめだった場合surfaceTintColorをColors.transparentにするという方法もあるようです。