How to take off Floatingactionbutton from Bottomnavigationbar items?

Asked

Viewed 62 times

0

I’m developing a screen with a floatingactionbutton in the middle of a bottom navigation however, it is very close to the menu items. How do I give a correct spacing?

inserir a descrição da imagem aqui

My code:

    class _NavigationState extends State<Navigation> {

  int _currentIndex = 0;
  final List<Widget> _children = [
    Resumo(),
    GasolinaXAlcool(),
    Premium(),
    MediaSimples()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Resumo'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.show_chart),
            title: Text('Relátorios'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.alarm),
            title: Text('Lembretes'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Configurações'),
          ),
        ],
        currentIndex: _currentIndex,
        selectedItemColor: Color(0xFF11c76f),
        onTap: _onItemTapped,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(top:20),
        child: SizedBox(
          height: 70,
          width: 70,
          child: FloatingActionButton(
            backgroundColor: Colors.transparent,
            elevation: 0,
            onPressed: (){},
            child: Container(
              height: 70,
              width: 70,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.white, width: 4),
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  begin: const Alignment(0.7, -0.5),
                  end: const Alignment(0.6, 0.5),
                  colors: [
                    Color(0xFF53a78c),
                    Color(0xFF70d88b),
                  ],
                )
              ),
              child: Icon(Icons.add, size: 30,),
            ),
          ),
        ),
      ),
    );
  }
}

1 answer

1


So far there is no such property, see source code widget (line 846):

 Widget _createContainer(List<Widget> tiles) {
    return DefaultTextStyle.merge(
      overflow: TextOverflow.ellipsis,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: tiles,
      ),
    );
  }

The property that defines the spacing between the BottomNavigationBarItem is hard-coded mainAxisAlignment: MainAxisAlignment.spaceBetween, that is, it can only be changed in the source code.

Source: https://stackoverflow.com/questions/58418649/how-to-change-the-spacing-between-items-in-the-bottomnavigationbar-in-flutte

  • 1

    I understand, thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.