Flutter bottomNavigationBar 在 systemNavigationBar 后面延伸

Question

我目前正在通过重新创建谷歌文件应用程序来玩弄颤动。我遵循了一些教程和内容，但现在遇到了一个我找不到解决方案的问题。我希望

bottomNavigationBar

延伸到我透明的

systemNavigationBar

后面。

左图是我的 flutter app，右图是真货。

到目前为止，这是代码：

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent));

  runApp(const Main());
}

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  static const _brandColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    // Wrap MaterialApp with a DynamicColorBuilder.
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        ColorScheme lightColorScheme;
        ColorScheme darkColorScheme;

        if (lightDynamic != null && darkDynamic != null) {
          lightColorScheme = lightDynamic.harmonized();
          darkColorScheme = darkDynamic.harmonized();
        } else {
          lightColorScheme = ColorScheme.fromSeed(
            seedColor: _brandColor,
          );
          darkColorScheme = ColorScheme.fromSeed(
            seedColor: _brandColor,
            brightness: Brightness.dark,
          );
        }

        return MaterialApp(
          theme: ThemeData(
            colorScheme: lightColorScheme,
            useMaterial3: true,
          ),
          darkTheme: ThemeData(
            colorScheme: darkColorScheme,
            useMaterial3: true,
          ),
          home: const RootPage(),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint("Button pressed");
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home_filled), label: "Start"),
          NavigationDestination(
              icon: Icon(Icons.star_outline), label: "Markiert"),
          NavigationDestination(
              icon: Icon(Icons.people_alt_outlined), label: "Freigegeben"),
          NavigationDestination(
              icon: Icon(Icons.folder_open_outlined), label: "Dateien"),
        ],
        onDestinationSelected: (int i) {
          setState(() {
            currentPage = i;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}

Answer 1

这可能有点晚了，但也许对未来的访客有帮助。

如果你的用例是简单地“扩展”你的 BottomNavigationBar 的颜色，你可以用这个包装你的应用程序：

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    systemNavigationBarColor: Theme.of(context).bottomAppBarTheme.color,
  ),
  child: child ?? const Placeholder(),
)

我个人把它放在我的

MaterialApp

.

中的顶级构建器中