How to add button to bottom navigation bar which hang out above - Flutter

后端 未结 4 1884

I have bottom navigation bar with center item that looks like on this picture:

How to implement such a thing in Flutter?

I found that every icon that I

相关标签:
4条回答
  • 2021-02-10 09:30

    Google recently added something called BottomAppBar and it provides a better way of doing this. Simply add BottomAppBar in the scaffold, create a navigation FAB, and add a label to the FAB if you want it to have text. Creates a result similar to this: https://cdn-images-1.medium.com/max/1600/1*SEYUo6sNrW0RoKxyrYCqbg.png.

    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
        floatingActionButton: FloatingActionButton.extended(
          elevation: 4.0,
          icon: const Icon(Icons.add),
          label: const Text('Add a task'),
          onPressed: () {},
        ),
        floatingActionButtonLocation: 
          FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          hasNotch: false,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
        ),
      );
    }
    
    0 讨论(0)
  • 2021-02-10 09:38

    You can also do this using FloatingActionButtonLocation and Expanded widget like this:

    Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: _buildTodoList(),
          floatingActionButton: new FloatingActionButton(
            onPressed: _pushAddTodoScreen,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
            elevation: 4.0,
          ),
          bottomNavigationBar: BottomAppBar(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(child: IconButton(icon: Icon(Icons.home)),),
                Expanded(child: IconButton(icon: Icon(Icons.show_chart)),),
                Expanded(child: new Text('')),
                Expanded(child: IconButton(icon: Icon(Icons.tab)),),
                Expanded(child: IconButton(icon: Icon(Icons.settings)),),
              ],
            ),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        );
      }
    

    Preview:

    0 讨论(0)
  • 2021-02-10 09:49

    You can a Stack to display widgets on the top of each others. Combined with the property overflow: Overflow.visible, and an alignment that fits your need.

    The following example will achieve thing as in your picture : A floating button horizontally centered, top aligned with the bottom bar.

    return new Scaffold(
      bottomNavigationBar: new Stack(
        overflow: Overflow.visible,
        alignment: new FractionalOffset(.5, 1.0),
        children: [
          new Container(
            height: 40.0,
            color: Colors.red,
          ),
          new Padding(
            padding: const EdgeInsets.only(bottom: 12.0),
            child: new FloatingActionButton(
              notchMargin: 24.0,
              onPressed: () => print('hello world'),
              child: new Icon(Icons.arrow_back),
            ),
          ),
        ],
      ),
    );
    
    0 讨论(0)
  • 2021-02-10 09:55

    In addition to the inputs by @Raunak, you can also use the "border" attribute of the FloatingActionButton to get a seamless border to generate the desired effect - code snippet is below:

    Widget buildFab() {
      FloatingActionButton fab = FloatingActionButton(
        backgroundColor: Color(0xFF9966CC),
        child: Icon(Icons.add),
        shape: CircleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 3.0,
          ),
        ),
        tooltip: "Add...",
        onPressed: () {
          print("fab is pressed!!!");
        }
      );
    
      return fab;
    }
    

    More better if you wrap the FAB inside a Material and add shadow effects to it - as below:

    Material buildFabWithShadow() {
      return Material(
      shadowColor: Color(0x802196F3),
      shape: CircleBorder(), 
      elevation: 16.0,
      child: buildFab(),
    );
    

    When tried, I got the below for effect 1- please note that the Border width can be adjusted to your wish!

    0 讨论(0)
提交回复
热议问题