how to set boxDecoration of BottomAppBar

Question

I want to create a bottom navigator bar like the image, but when I try the margin for BottomAppBar it is skewed as shown, and I also can't set the background gradient color for BottomAppBar. So how can I margin and set gradient for BottomAppBar? code

Scaffold(
  extendBody: true,
  body: listPage.elementAt(currentPage),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print("click");
    },
    child: Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [yellowGradientColorTop, yellowGradientColorBot])),
      child: Center(
        child: Image.asset(
          "images/icon_paper_pland.png",
          height: 25,
          width: 25,
        ),
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: Container(
    height: 60,
    margin: EdgeInsets.only(left: 15,right: 15, bottom: 15),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25),
    ),
    child: Center(
      child: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 5,
        child: Container(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                flex: 2,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      flex: 1,
                      child: MaterialButton(
                        onPressed: () {},
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.add), Text("data1")],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: MaterialButton(
                        onPressed: () {},
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.add), Text("data1")],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.only(bottom: 10),
                  alignment: Alignment.bottomCenter,
                  child: Text("data1"),
                ),
              ),
              Expanded(
                flex: 2,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      flex: 1,
                      child: MaterialButton(
                        onPressed: () {},
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.add), Text("data1")],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: MaterialButton(
                        onPressed: () {},
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.add), Text("data1")],
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    ),
  ),
);

https://img.upanh.tv/2022/09/15/Capturef6618cd0187bda36.png

https://img.upanh.tv/2022/09/15/Screen-Shot-2021-06-16-at-2.30.06-PM.png

MR Shubham vyas · Answer

 Widget _createBottomNavigationBar() {
    return Container(
      decoration: BoxDecoration(
        **gradient: LinearGradient(**
          colors: [Color(0xFF00D0E1), Color(0xFF00B3FA)],//gradient set
          begin: Alignment.topLeft,
          end: Alignment.topRight,
          stops: [0.0, 0.8],
          tileMode: TileMode.clamp,
        ),
      ),
      child: BottomNavigationBar(
        currentIndex: 0,
        onTap: (index) {},
        showUnselectedLabels: false,
        backgroundColor: Colors.transparent,
        type: BottomNavigationBarType.fixed,
        elevation: 0,
        unselectedItemColor: Colors.white,
        selectedIconTheme: IconThemeData(color: Colors.white),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
              "Home",
              style: TextStyle(color: Colors.white),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text(
              "Business",
              style: TextStyle(color: Colors.white),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text(
              "School",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

how to set boxDecoration of BottomAppBar

1 Answers