Container margin not transparent

Question

In my flutter project i have an AnimatedContainer which is my BottomAppBar. If i give it a margin to space it from the screen egdes the margin is not transparent so it is visible when something is behind it (picture). I could now separate the container from the screen edges using e.g. a SizedBox but i dont feel like that is good practice. My question is how i can make that margin transparent so that the Container is still spaced from the edge but that there is also nothing covering the text.

the margin covers the text as you can see on this picture

Code:
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),
          ),
        ]),
    );
  }
}

EDIT: setting extendBody: true in the scaffold should fix it

Answer 1

Set extendBody: true in your Scaffold