ModalBarrier Scrim不涵盖Appbar

Question

我有一个材料应用，它使用了一个带有脚手架的构建器。当我从页面导航到页面时，脚手架和应用程序栏不会重建，但是脚手架的主体确实可以：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:raven_front/pages/pages.dart';

Future<void> main() async {
  runApp(RavenMobileApp());
}

class RavenMobileApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/splash',
      routes: pages.routes(context),
      builder: (context, child) {
        return SafeArea(
            child: Scaffold(
          extendBodyBehindAppBar: false,
          appBar: BackdropAppBar(),      // pretty much regular app bar
          body: child!,                  // pages of app
        ));
      },
    );
  }
}

但是，当我在一个页面上，我需要显示底部的模态表或警报框，或scrim，它不适用于应用程序栏：

​

    await showModalBottomSheet<void>(
        context: context,
        elevation: 1,
        barrierColor: AppColors.black38,     // not applied to app bar
        shape: components.shape.topRounded,
        builder: (BuildContext context) {
         ... 
        });

​？

我尝试保存物料应用中使用的上下文（最高级别）中使用的上下文，并在模态表中使用了上下文，但这错误地说上下文没有导航器。我希望我能保持当前的设计，但以某种方式将其扩展到应用程序栏上。

Answer 1

你能相信吗，我必须自己滚动。另一个选择是放弃问题中提到的构建器材料应用程序设计。这是我必须做的：

应用程序栏：

Stack(
  children: [
    appBar,
    AppBarScrim(),
  ])

应用程序bar scrim

class AppBarScrim extends StatefulWidget {
  const AppBarScrim({Key? key}) : super(key: key);

  @override
  State<AppBarScrim> createState() => _AppBarScrimState();
}

class _AppBarScrimState extends State<AppBarScrim> {
  late List listeners = [];
  final Duration waitForSheetDrop = Duration(milliseconds: 50);
  bool applyScrim = false;

  @override
  void initState() {
    super.initState();
    listeners.add(streams.app.scrim.listen((bool value) async {
      if (applyScrim && !value) {
        await Future.delayed(waitForSheetDrop);
        setState(() {
          applyScrim = value;
        });
      }
      if (!applyScrim && value) {
        setState(() {
          applyScrim = value;
        });
      }
    }));
  }

  @override
  void dispose() {
    for (var listener in listeners) {
      listener.cancel();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () async {
          Navigator.of(components.navigator.routeContext!).pop();
          streams.app.scrim.add(false);
        },
        child: AnimatedContainer(
          duration: waitForSheetDrop,
          color: applyScrim ? Colors.black38 : Colors.transparent,
          height: applyScrim ? 56 : 0,
        ));
  }
}

showDialog( // and show bottom modal sheet...
  ..
  builder: (BuildContext context) {
    streams.app.scrim.add(true);                      // trigger
    return AlertDialog(...);
  }).then((value) => streams.app.scrim.add(false));   // remove trigger