CODEWITHSUNDEEP
flutterdartmobilenavbar
Stucked Developer
Stucked Developer

Reputation: 11

How to remove white background at navbar(GNav) [flutter]

I'm trying develop a mobile application using flutter. I've added a bottom nav bar (google's nav_bar). Everything is perfect but there is white rectangle background of container or nav bar and I could not remove it. I will glad if you can help me.

Here is the my codes:

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

  @override
  State<NavigationBarScreen> createState() => _NavigationBarScreenState();
}

class _NavigationBarScreenState extends State<NavigationBarScreen> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    PageController page_controller = PageController();

    final vals = ['a', 'B', 'c', 'd'];
    int _index = 0;
    final screens = [LoginPage(), SignupPage()];
    return Scaffold(
        body: PageView.builder(
            controller: page_controller,
            itemCount: 4,
            itemBuilder: (context, position) {
              return Container(child: screens[position]);
            }),
        bottomNavigationBar: Padding(
          padding: EdgeInsets.all(8),
          child: ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
              child: Container(
                decoration: const BoxDecoration(
                  //color: Color.fromRGBO(24, 233, 111, 0.35),
                  color: Color.fromRGBO(244, 91, 60, 0.35),
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                ),
                child: GNav(
                  gap: 8,
                  curve: Curves.easeOutExpo,
                  // tab animation curves              curve: Curves.fastOutSlowIn,
                  activeColor: Colors.black,
                  hoverColor: Colors.grey,
                  tabBorderRadius: 6,
                  onTabChange: (index) {
                    setState(() {
                      _index = index;
                    });
                    page_controller.jumpToPage(index);
                  },
                  duration: const Duration(milliseconds: 400),
                  color: const Color(0xEF5350FF),
                  tabs: const [
                    GButton(icon: Icons.home, text: "Mamma"),
                    GButton(icon: Icons.person, text: "Profile"),
                    GButton(icon: Icons.leaderboard, text: "Leaderboard"),
                  ],
                ),
              )),
        ));
  }
}

And I want to remove this white rectangle:

Thanks in advance.

Upvotes: 0

Views: 373

Answers (1)

Mathiew Abbas
Mathiew Abbas

Reputation: 852

Try using a Container instead of the Padding and set the color as Colors.transparent and use extendBody: true in the Scaffold

Upvotes: 3

Related Questions