容器边距不透明

Question

在我的 flutter 项目中，我有一个 AnimatedContainer，这是我的 BottomAppBar。如果我给它一个 margin 到 space 它从屏幕上 egdes margin 不是透明的所以当它后面有东西时它是可见的（图片）。我现在可以使用例如将容器与屏幕边缘分开SizedBox 但我觉得这不是个好习惯。我的问题是如何使边距透明，以便容器仍然 spaced 从边缘但也没有任何内容覆盖文本。

正如您在这张图片上看到的那样，边距覆盖了文字

代码：
main.dart:

void main() {
  runApp(MultiProvider(
      providers: [ChangeNotifierProvider(create: (context) => ThemeProvider())],
      child: const MainWidget()));
}

main_widget.dart:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: ((context, child) {
        return Scaffold(
          bottomNavigationBar: FloatingBottomAppBar(),
          body: child,
        );
      }),
      debugShowCheckedModeBanner: false,
      title: "Test App",
      themeMode: Provider.of<ThemeProvider>(context).themeMode,
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      home: const GroupScreen(),
    );
  }
}

floating_ab.dart:

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

  @override
  Widget build(BuildContext context) => AnimatedContainer(
        duration: const Duration(seconds: 1),
        margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        child: Container(
          height: 60,
          decoration: BoxDecoration(
            boxShadow: const [
              BoxShadow(color: Colors.grey),
            ],
            color: Theme.of(context).primaryColor,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Icon(Icons.home_rounded),
              Icon(Icons.search),
              Icon(Icons.camera_alt),
              Icon(Icons.notifications),
              Icon(Icons.person)
            ],
          ),
        ),
      );
}

group_screen.dart:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Groups",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        elevation: 0,
      ),
      body: Column(
         children: [
          Expanded(
            child: ListView.builder(
                itemBuilder: ((context, index) {
                  return Center(
                      child: Text("$index",
                          style: const TextStyle(
                              color: Colors.white, fontSize: 30)));
                }),
                itemCount: 50),
          ),
        ]),
    );
  }
}

编辑： 在脚手架中设置 extendBody: true 应该可以修复它

Answer 1

在您的 Scaffold

中设置 extendBody: true

容器边距不透明

Container margin not transparent

flutter

dart

flutter-layout