Odd Count of icons along with GapLocation.center cause render issue

Question

I want to make bottom navigator with AnimatedBottomNavigationBar package, but when I do "gapLocation: GapLocation.end" it gives an error.

 class _marketViewPageState extends State<marketViewPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(" Page "),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
        bottomNavigationBar: AnimatedBottomNavigationBar(
          activeColor: Colors.red,
          height: Get.height /
              12, 
          backgroundColor: Colors.blue,
          notchSmoothness: NotchSmoothness.defaultEdge,
          leftCornerRadius: 15,
          gapLocation: GapLocation.end,
          icons: [
            Icons.home,
            Icons.add_shopping_cart_outlined,
            Icons.history_rounded,
            Icons.star,
            Icons.circle
          ],

          activeIndex: 1,
          onTap: (int) {
            print(int);
          },
          //other params
        ),
      ),
    );
  }
}

Screen

enter image description here

Error

enter image description here

score 2 · Answer 1 · answered Aug 07 '22 at 17:33

The error says that you have odd count of icons. Which mean the total icons is 5 so docking it in the center is not possible. Consider adding one more icon to the item or remove an icon and it should work as expected. Also to center the floating action button use

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Or if you wish to make it floating try

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

score 0 · Answer 2 · answered Aug 07 '22 at 17:31

0

You can change floatingActionButtonLocationto:

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

answered Aug 07 '22 at 17:31

Alaindeseine

3,260
1
11
21

kindly, avoid answering duplicate questions, instead provide link to the already answered question !!! – OMi Shah Aug 07 '22 at 17:31
1

@OMiShah Sometimes answering is faster than finding duplicates, [What to do with answer on duplicate question?](https://meta.stackoverflow.com/q/352194/10157127) – Md. Yeasin Sheikh Aug 07 '22 at 18:07
@YeasinSheikh I hope you read what does it says xD – OMi Shah Aug 07 '22 at 18:12

Odd Count of icons along with GapLocation.center cause render issue

2 Answers2