1

I need to make the notch margin spacing (space between FAB's sides and bottomNavBar) transparent and give my bottomNavbar a gradient color like so :

enter image description here

This works perfectly fine when I work with only a bottom appbar, but I need it to work with BottomNavigationBar too. For now, I've been able to keep the notch transparent, but when I add container with decoration box to give it linear gradient color the transparency disappears. This is my implementation :

bottomNavigationBar: BottomAppBar(
  shape: CircularNotchedRectangle(),
  color: Theme.of(context).primaryColor.withAlpha(255),
  elevation: 0,
  child: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.blueAccent,
    onTap: (int index) {
      _selectTab(pageKeys[index], index);
    },
    currentIndex: _selectedIndex,
    elevation: 0,
    backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.ac_unit_outlined,
              size: 20,
              color: Theme.of(context).colorScheme.onBackground),
          label: 'Page 1'),
      BottomNavigationBarItem(
          icon: Icon(Icons.access_alarm,
              size: 20,
              color: Theme.of(context).colorScheme.onBackground),
          label: 'Page2'),
      BottomNavigationBarItem(
          icon: Icon(Icons.access_alarm,
              size: 20,
              color: Theme.of(context).colorScheme.onBackground),
          label: 'Page3'),
      BottomNavigationBarItem(
          icon: Icon(Icons.access_alarm,
              size: 20,
              color: Theme.of(context).colorScheme.onBackground),
          label: 'Page4'),
    ],
  ),
),

I want to be able to give my bottomnavbar a transparent notch and a gradient color. How can I do this?

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
Islam TALBI
  • 137
  • 2
  • 12
  • Hi, your example seems to work with the BottomNavigationBar, could you explain better your needs? ( [screenshot](https://imgur.com/a/DhuE4zb) ) – MaxiStarling Feb 28 '22 at 12:04
  • Hello , I need to apply both gradient color and transparent notch around FAB , the example works with transparent notch however when I add a container to give my bottom navbar a gradient linear color the transparent notch disappears I want to be able to give my nabber a transparent color and keep the spacing between fab and nabber transparent – Islam TALBI Feb 28 '22 at 12:10

2 Answers2

0

wrap your BottomAppBar with Container and with ClipRRect and remove shape parameter and apply bgcolor on BottomNavigationBar

Container(
    // MediaQuery.of(context).size.height * 0.15,
    decoration: const BoxDecoration(
      color: Colors.white,
 gradient: const LinearGradient(
colors: [
         Colors.black,  //define your gradient color here
        Colors.grey,
         ]
)
      
      
    ),
    child: ClipRRect(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(25.0),
        topRight: Radius.circular(25.0),
      ),
      child: BottomNavigationBar(
  backgroundColor: Colors.white, or Colors.transparent
)
Ashutosh singh
  • 820
  • 6
  • 17
0

You need extendBody: true in Scaffold. like the following example:

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Text('text text text text text text text text text text text text text text text text text text text text ');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 12,
        color: Colors.blue,
        child: Container(
          height: 60,
        ),
      ),
    );
  }
}
Lackson Munthali
  • 104
  • 7