FlutterでAppBarを透過する

AppBarのbackgroundColorを透明にしただけだとAppBarは透明にならない。

ScaffoldのextendBodyBehindAppBarプロパティにtrueを設定すればOK。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.white.withOpacity(0.5),
      ),
      extendBodyBehindAppBar: true,
      body: ListView.builder(
        padding: const EdgeInsets.all(24),
        itemCount: 1,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 1000,
            color: Colors.blue,
          );
        },
      ),
    );
  }
}

左：extendBodyBehindAppBar: false　右：extendBodyBehindAppBar: true

ちなみに、scaffoldの仕様で、extendBodyBehindAppBarがtrueかfalseかでpaddingのtopが変わる。

左：extendBodyBehindAppBar: false　右：extendBodyBehindAppBar: true

// flutter/lib/src/material/scaffold.dart#L366
final double top = extendBodyBehindAppBar
          ? math.max(metrics.padding.top, bodyConstraints.appBarHeight)
          : metrics.padding.top;

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/scaffold.dart#L366