Background Color not Transparent

[itsdani121]

Hi, i tried all answers in #31 but did not work any answers that's why i am creating a new issue that the background of nav bar not changed here is my code:

          Scaffold(
        extendBody: true,  // here is extendbody set
        bottomNavigationBar: CurvedNavigationBar(
          color: Color(int.parse('$newColor')),
          backgroundColor: Colors.transparent, // here is background color set
          key: _bottomsKey,
          height: 50,
          items: [
      // here those nav screen shown according to list 
        ]
        ),
        body: WillPopScope(
            onWillPop: _onWillPop, child: resultScreens[_page]),
      );

kindly look into this and guide me if i am wrong this is my navbar class.

[jsdaniell]

I also with the same problem here is my widget:

 @override
  Widget build(BuildContext context) {
    final HomeScreenController controller = Get.put(HomeScreenController());

    return Container(
      color: CustomCollors.purpleColor,
      child: SafeArea(
        top: false,
        child: ClipRect(
          child: Obx(() => Scaffold(
            extendBody: true,
              bottomNavigationBar: CurvedNavigationBar(
                backgroundColor: Colors.transparent,
                index: controller.selectedTab.value,
                color: CustomCollors.purpleColor,
                animationDuration: const Duration(milliseconds: 300),
                animationCurve: Curves.easeInOutQuad,
                buttonBackgroundColor: CustomCollors.purpleColor,
                items: const <Widget>[
                  Icon(
                    Icons.change_circle_rounded,
                    size: 30,
                    color: CustomCollors.whiteColor,
                  ),
                  Icon(
                    Icons.home_rounded,
                    size: 30,
                    color: CustomCollors.whiteColor,
                  ),
                  Icon(
                    Icons.account_circle,
                    size: 30,
                    color: CustomCollors.whiteColor,
                  ),
                ],
                onTap: (index) {
                  /// Code to push to some tab from outside onTap
                  /// final navigationState = _navigationTabKey.currentState!;
                  /// navigationState.setPage(index);

                  controller.changeSelectedTab(index);
                },
              ),
              body: screens[controller.selectedTab.value]
          )),
        ),
      ),
    );
  }

extendBody doesn't work.

[itsdani121]

@rafalbednarczuk plz look into this matter

[Nishank00]

@jsdaniell
Please follow this code, it worked for me
CurvedNavigationBar(
backgroundColor: Colors.transparent,
),

For body of Curved Nav Bar
SafeArea(
bottom: false
);

PS: Sorry for bad formatting

[itsdani121]

@Nishank00 i did but not work

[Nishank00]

@itsdani121

I was able to achieve this by removing safearea from bottom(false), I have two classes one for my bottom nav bar and one for the homepage both have extendbody true and Safearea bottom false

[itsdani121]

@Nishank00 ok i understand this thanks so basically in a class where nav bar attach set background color transparent and which classes added as list in their safeare set bottom false then it works..

[Nishank00]

``

@Nishank00 ok i understand this thanks so basically in a class where nav bar attach set background color transparent and which classes added as list in their safeare set bottom false then it works..

Yep

[jsdaniell]

After hours of coding, sometime I may have code something that's made the background transparent, I don't know what's exactly I did, but here's my actual code:

import 'package:allugaapp/auth/auth.dart';
import 'package:allugaapp/constants/colors.dart';
import 'package:allugaapp/constants/tags_controllers.dart';
import 'package:allugaapp/screens/account_tab_screen/account_tab_screen.dart';
import 'package:allugaapp/screens/chat_tab_screen/chat_tab_screen.dart';
import 'package:allugaapp/screens/home_screen/home_screen_controller.dart';
import 'package:allugaapp/screens/main_tab_screen/main_tab_screen.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final screens = <Widget>[
    const ChatTabScreen(),
    const MainTabScreen(),
    const AccountTabScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AllugaColors.purpleColor,
      child: SafeArea(
        top: false,
        child: ClipRect(
          child: GetBuilder<HomeScreenController>(
            init: HomeScreenController(),
            tag: TagsControllers.homeScreenController,
            builder: (_) => Scaffold(
                extendBody: true,
                bottomNavigationBar: CurvedNavigationBar(
                  backgroundColor: _.selectedTab == 2
                      ? AllugaColors.darkPurpleColor
                      : Colors.transparent,
                  index: _.selectedTab,
                  color: AllugaColors.purpleColor,
                  animationDuration: const Duration(milliseconds: 300),
                  animationCurve: Curves.easeInOutQuad,
                  buttonBackgroundColor: _.selectedTab == 2
                      ? AllugaColors.whiteColor
                      : AllugaColors.purpleColor,
                  items: <Widget>[
                    const Icon(
                      Icons.all_inbox_rounded,
                      size: 30,
                      color: AllugaColors.whiteColor,
                    ),
                    const Icon(
                      Icons.home_rounded,
                      size: 30,
                      color: AllugaColors.whiteColor,
                    ),
                    Icon(
                      Icons.account_circle,
                      size: 30,
                      color: _.selectedTab == 2
                          ? AllugaColors.purpleColor
                          : AllugaColors.whiteColor,
                    ),
                  ],
                  onTap: (index) {
                    _.changeSelectedTab(index);
                  },
                ),
                body: screens[_.selectedTab]),
          ),
        ),
      ),
    );
  }
}

[cybex-dev]

To make

@itsdani121

I was able to achieve this by removing safearea from bottom(false), I have two classes one for my bottom nav bar and one for the homepage both have extendbody true and Safearea bottom false

Thanks to this, I have a working solution.

---

Solution

See notes below on solution

Example working with ListView:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // required
      bottomNavigationBar: CurvedNavigationBar(
        height: 60,
        backgroundColor: Colors.transparent, // required
        buttonBackgroundColor: Colors.white,
        items: [
          IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
          IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
          IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
        ],
      ),
      body: Container(
        child: SafeArea( // if using this,
          bottom: false,  // then set this too
          child: ListView.builder(
            itemBuilder: (context, index) => ListTile(
              tileColor: Colors.primaries[index % Colors.primaries.length],
              title: Text("Item $index"),
            ),
            itemCount: 50,
          ),
        ),
      ),
    );
  }

Notes on solution:

use the example in a MaterialApp/CupertinoApp or in a separate "screens" file

Based on Flutter: 2.8.1, Dart 2.15.1

Required:

• Scaffold(extendBody: true, ...)
• CurvedNavigationBar(backgroundColor: Colors.transparent,...)

Optionally:

• Using a SafeArea, set SafeArea(bottom: false,...)