如何使用自定義 appbar 制作正確的機身和抽屜 position？

Question

我嘗試制作具有透明模糊效果的appbar，就像這樣我這樣做的方式：

return Stack(children: <Widget>[
Scaffold(
  key: _scaffoldKey,
  backgroundColor: Theme.of(context).backgroundColor,
  body: Center(
    child: buildProcurementList(),
  ),
),
Positioned(
  top: 0.0,
  left: 0.0,
  right: 0.0,
  child: ClipRect(
    child: BackdropFilter(
      filter: ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
      child: Container(
        child: AppBar(
          backgroundColor: Colors.transparent,
          title: Text(
            'Title',
          ),
          centerTitle: true,
        ),
        decoration:
            BoxDecoration(color: Colors.blue.shade200.withOpacity(0.5)),
      ),
    ),
  ),
),

我得到了想要的效果，但由於堆棧、主體和抽屜固定在頂部。 告訴我一種在主體和抽屜中添加填充的方法，就像在普通腳手架中一樣

我用身體和抽屜得到了什么

Answer 1

第 1 步：將 Stack 移動到 Scaffold 的主體
第 2 步：將定位的 appbar 放在堆疊小部件的最后

完整代碼

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: ListenToDrawerEvent(),
    );
  }
}

class ListenToDrawerEvent extends StatefulWidget {
  @override
  ListenToDrawerEventState createState() {
    return new ListenToDrawerEventState();
  }
}

class ListenToDrawerEventState extends State<ListenToDrawerEvent> {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  static final List<String> _listViewData = [
    "Inducesmile.com",
    "Flutter Dev",
    "Android Dev",
    "iOS Dev!",
    "React Native Dev!",
    "React Dev!",
    "express Dev!",
    "Laravel Dev!",
    "Angular Dev!",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      /*appBar: AppBar(
        title: Text("Listen to Drawer Open / Close Example"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            _scaffoldKey.currentState.openDrawer();
          },
        ),
      ),*/
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(10.0),
          children: _listViewData
              .map((data) => ListTile(
                    title: Text(data),
                  ))
              .toList(),
        ),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.primaries[index % Colors.primaries.length]
                      .withOpacity(0.5),
                  child: ListTile(
                    title: Text('Item $index'),
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: ClipRect(
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Container(
                  child: AppBar(
                      backgroundColor: Colors.transparent,
                      title: Text(
                        'Title',
                      ),
                      centerTitle: true,
                      actions: <Widget>[
                        // action button
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () {
                            //_select(choices[0]);
                          },
                        ),
                        // action button
                        IconButton(
                          icon: Icon(Icons.memory),
                          onPressed: () {
                            //_select(choices[1]);
                          },
                        ),
                      ]),
                  decoration: BoxDecoration(
                      color: Colors.blue.shade200.withOpacity(0.5)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}