Question 76164 in Flutter Question posted in
The official Flutter documentation can be found here.

I can't get BottomNavigationBar fully Transparent in Flutter

I did background color to transparent.
Did elevation to 0
Did extend body to true but it only transparents only the background image and when i scroll the image is static not scrolling

Future main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  runApp(InitialScreen());

}

class InitialScreen extends StatelessWidget {

  InitialScreen({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home:

            // HomeScreen(), title: appName);

            MyBottomNavigationBar(),

        title: appName);

  }

}

class MyBottomNavigationBar extends StatefulWidget {

  const MyBottomNavigationBar({Key? key}) : super(key: key);

  @override

  State<MyBottomNavigationBar> createState() => _MyBottomNavigationBarState();

}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {

  int _currentIndex = 0;

  final List<Widget> _children = [

    HomeScreen(),

    MyMusic(),

    MusicQueue(),

    MyProfile(),

  ];

  void onTappedBar(int index) by {

    setState(() {

      _currentIndex = index;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      endDrawerEnableOpenDragGesture: true,

      extendBody: true,

      backgroundColor: Colors.transparent,

      body: _children[_currentIndex],

      bottomNavigationBar: Container(

        // decoration: BoxDecoration(

        //   gradient: LinearGradient(

        //     colors: [

        //       Color(0xffF8B200).withOpacity(0.75),

        //       Color(0xffF8B200).withOpacity(0.75),

        //       Color(0xff853599).withOpacity(0.64),

        //       Color(0xff853599).withOpacity(0.64),

        //     ],

        //   ),

        // ),

        child: BottomNavigationBar(

          backgroundColor: Colors.transparent.withOpacity(0.0),

          onTap: onTappedBar,

          elevation: 0.0,

          currentIndex: _currentIndex,

          items: [

            BottomNavigationBarItem(

              icon: Icon(

                Icons.home,

                color: Colors.red,

              ),

              backgroundColor: Colors.transparent,

              label: ('Home'),

            ),

            BottomNavigationBarItem(

              icon: Icon(Icons.queue_music_outlined, color: Colors.blue),

              backgroundColor: Colors.transparent,

              label: ('My Music'),

            ),

            BottomNavigationBarItem(

              icon: Icon(Icons.music_note_outlined, color: Colors.yellow),

              backgroundColor: Colors.transparent,

              label: ('Music Queue'),

            ),

            BottomNavigationBarItem(

              icon: Icon(Icons.person, color: Colors.grey),

              label: ('My Profile'),

              backgroundColor: Colors.transparent

I’m learning flutter i can do small tiny mistakes also.

Tags:

2

Answers


  1. 0

    If you give scaffold to transparent colour so it shows black colour so if you don’t give scaffold background colour you will get white by default in bottom NavigationBar and if you want another colour set scaffold colour as you want.

    Login or Signup to reply.
  2. 0

    You should wrap Container over the Scaffold and set the background to Container and set transparent to Scaffold and BottomNavigationBar.
    Remove extendBody from Scaffold.

    Code should look like as following..

    Contatiner(
  //Use decoration or color to set the background.
  color: Colors.pink[900],//As your wish
  child: Scaffold(
     backgroundColor: Colors.transparent,
     //extendBody: true,
     ....
     bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        ....
        )
    )
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search