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

Flutter Bottom Navigation Bar override

I have created bottom navigation bar in a separated file and I have imported it for all of the screens. But now I want to change the color of the bottom nav bar for a one screen. Therefore can I override color property of my nav bar in the particular screen?

I want to overwrite color property of bottom nav bar

Tags:

2

Answers


  1. 0

    Would you like to change the "background color" property? If so, you can pass the color to your bottom navigation bar. You can use a named constructor with a default color. It may solve your problem. If it doesn’t solve your problem, please share your code.

    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("NavBar"),
      ),
      body: const Center(
        child: Text("BottomNavBar()"),
      ),
      //here backgroundColor is optional parameter if no Color passed its value will be null.
      //and with null check condition, it will take the default color "Colors.teal".
      bottomNavigationBar: const BottomNavBar(),
    );
  }
}

class BottomNavBar extends StatelessWidget {

  final Color? backgroundColor;

  const BottomNavBar({super.key,this.backgroundColor});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: 0,
      type: BottomNavigationBarType.fixed,
      backgroundColor: backgroundColor ?? Colors.teal,
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home),label: "Home"),
        BottomNavigationBarItem(icon: Icon(Icons.search),label: "Search"),
        BottomNavigationBarItem(icon: Icon(Icons.add),label: "Add"),
        BottomNavigationBarItem(icon: Icon(Icons.settings),label: "Settings"),
      ],
    );
  }
}

    pic1
    pic2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search