web-dev-qa-db-ja.com

フラッターでカスタムボトムナビゲーションバーを作る方法

このようなボトムナビゲーションバーのデザインがあります。

enter image description here

私はこのコードを使って下のナビゲーションバーのカスタムを作成するために最善を尽くします。

_class FABBottomAppBarItem {
  FABBottomAppBarItem({this.iconData, this.text});
  IconData iconData;
  String text;
}

class FABBottomAppBar extends StatefulWidget {
  FABBottomAppBar({
    this.items,
    this.centerItemText,
    this.height: 60.0,
    this.iconSize: 24.0,
    this.backgroundColor,
    this.color,
    this.selectedColor,
    this.notchedShape,
    this.onTabSelected,
  }) {
    assert(this.items.length == 2 || this.items.length == 4);
  }
  final List<FABBottomAppBarItem> items;
  final String centerItemText;
  final double height;
  final double iconSize;
  final Color backgroundColor;
  final Color color;
  final Color selectedColor;
  final NotchedShape notchedShape;
  final ValueChanged<int> onTabSelected;

  @override
  State<StatefulWidget> createState() => FABBottomAppBarState();
}

class FABBottomAppBarState extends State<FABBottomAppBar> {
  int _selectedIndex = 0;

  _updateIndex(int index) {
    widget.onTabSelected(index);
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> items = List.generate(widget.items.length, (int index) {
      return _buildTabItem(
        item: widget.items[index],
        index: index,
        onPressed: _updateIndex,
      );
    });
    items.insert(items.length >> 1, _buildMiddleTabItem());

    return BottomAppBar(
      shape: widget.notchedShape,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: items,
      ),
      color: widget.backgroundColor,
    );
  }

  Widget _buildMiddleTabItem() {
    return Expanded(
      child: SizedBox(
        height: widget.height,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: widget.iconSize),
            Text(
              widget.centerItemText ?? '',
              style: TextStyle(color: widget.color),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabItem({
    FABBottomAppBarItem item,
    int index,
    ValueChanged<int> onPressed,
  }) {
    Color color = _selectedIndex == index ? widget.selectedColor : widget.color;
    return Expanded(
      child: SizedBox(
        height: widget.height,
        child: Material(
          type: MaterialType.transparency,
          child: InkWell(
            onTap: () => onPressed(index),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(item.iconData, color: color, size: widget.iconSize),
                Text(
                  item.text,
                  style: TextStyle(color: color),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
_

そして私はこのような習慣を実装しました：

_bottomNavigationBar: FABBottomAppBar(
          centerItemText: 'เสา',
          color: Colors.grey,
          backgroundColor: Colors.white,
          selectedColor: Colors.red,
          notchedShape: CircularNotchedRectangle(),
          onTabSelected: _onTapped,
          items: [
            FABBottomAppBarItem(iconData: Icons.home, text: 'หน้าแรก'),
            FABBottomAppBarItem(iconData: Icons.search, text: 'ค้นหา'),
            FABBottomAppBarItem(iconData: Icons.account_circle, text: 'โปรไฟล์'),
            FABBottomAppBarItem(iconData: Icons.more_horiz, text: 'อื่นๆ'),
          ],
        ),
        body: _list[_page],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
          },
          child: Icon(Icons.add),
          elevation: 2.0,
        ),
      ),
_

そしてそのコードの結果は次のとおりです。

enter image description here

カスタムナビゲーションバーをデザインのように作る方法は？デザインでは、ボトムナビゲーションバーの内側に_FAB/Asset/Icon_がデザインにarrowsのマーク付けされているように_curved upwardsを持ちます。

flutterbottomappbar
6
R Rifa Fauzi Komara

私はおそらくクリップレクトルとコンテナのようなあなたのフロンテーションボタンを包むでしょう

  floatingActionButton: ClipRRect(
    borderRadius: BorderRadius.circular(80),
    child: Container(
      color: Colors.black,
      padding: EdgeInsets.all(8),
      child: FloatingActionButton(
        onPressed: () {},
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 _

BOTTOMNAVICATIONBOARと同じように与える。働くべきです

0
Tizianoreica

これを試してください、それはあなたに役立つかもしれません

 Scaffold(
    backgroundColor: Colors.blueAccent,
    floatingActionButton: Padding(
      padding: EdgeInsets.only(top: 20),
      child: SizedBox(
        height: 70,
        width: 70,
        child: FloatingActionButton(
          backgroundColor: Colors.transparent,
          elevation: 0,
          onPressed: () {},
          child: Container(
            height: 75,
            width: 75,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white, width: 4),
              shape: BoxShape.circle,
             color: Colors.red
            ),
            child: Icon(Icons.add, size: 40),
          ),
        ),
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: new Container(
      height: 80.0,
      color: Colors.white,
      padding: new EdgeInsets.only(top: 20.0),
      child: new Theme(

        data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.white,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.red,
            bottomAppBarColor: Colors.green,
            textTheme: Theme
                .of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.grey))), // sets the inactive color of the `BottomNavigationBar`
        child:
        new BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex:0 ,
            items: [
              BottomNavigationBarItem(
                  icon: new Icon(Icons.home),
                  title: new Text('Home'),
                  backgroundColor: Colors.black
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.search),
                title: new Text('Search'),
              ),
BottomNavigationBarItem(
                  icon: Icon(Icons.bookmark_border,color: Colors.transparent,),
                  title: Text('Center')
              ),

              BottomNavigationBarItem(
                  icon: Icon(Icons.perm_identity),
                  title: Text('Person')
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz),
                  title: Text('More')
              ),

            ]),
      ),
    ),
  )
 _
0
Avinash