The DotNavigationBar overflowed by 43 pixels on the bottom.

[FabioTambu]

I tried to insert the DotNavigationBar for the first time and immediately the error appears: A RenderFlex overflowed by 43 pixels on the bottom.

I tried to fix it but i can't, can someone help me?

My code:

import 'package:flutter/material.dart';
import 'package:dot_navigation_bar/dot_navigation_bar.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  int selectedIndex = 0;
  late PageController pageController;

  void _handleIndexChanged(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  void initState() {
    super.initState();
    pageController = PageController(initialPage: selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: const Text('Test'),
        ),
        body: Container(),
        extendBody: false,
        bottomNavigationBar: DotNavigationBar(
            margin: EdgeInsets.only(left: 10, right: 10),
            currentIndex: selectedIndex,
            dotIndicatorColor: Colors.white,
            unselectedItemColor: Colors.grey[300],
            onTap: _handleIndexChanged,
            items: [
              DotNavigationBarItem(
                icon: Icon(Icons.home),
                selectedColor: Colors.purple,
              ),
              DotNavigationBarItem(
                  icon: Icon(Icons.favorite_border),
                  selectedColor: Colors.pink
              ),
              DotNavigationBarItem(
                icon: Icon(Icons.search),
                selectedColor: Colors.orange,
              ),
              DotNavigationBarItem(
                icon: Icon(Icons.person),
                selectedColor: Colors.teal,
              ),
            ]
        )
    );
  }
}

[DanielSmith1239]

Hi, you ever figure out this issue?

[rikbrown]

Hitting the same issue.

[arpit16Apr]

Please Set

itemPadding: EdgeInsets.all(16), marginR: EdgeInsets.symmetric(horizontal: 80, vertical: 0), paddingR: EdgeInsets.symmetric(horizontal: 16, vertical: 0),

Fixed, Thanks