Android 颤振|如何在颤振中制作底部导航栏的自定义按钮？

我想做一个按钮，里面有文字和图标，有自定义背景色和自定义宽度。具有固定位置（不可滚动）。你愿意帮我吗

代码如下：

 bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        currentIndex: 0, // this will be set when a new tab is tapped
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
          BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
          BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
        ]

它只为图标提供一种颜色

这就是我想要的：

---

您可能想看看

BottomAppBar

的概念。
此栏接受任何小部件作为子项，而不仅仅是BottomNavigationBarItem

你可以试试这个：

BottomAppBar(
      child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
            child: SizedBox(
              height: 44,
              child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                  onTap: () {},
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.add, color: Colors.blue, size: 24),
                      Text("Add")
                    ],
                  ),
                ),
              ),
            ),
          ),
          ]
      ),
    )

BottomAppBar(
孩子：排(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
扩大(
孩子：大小盒子(
身高：44，
儿童：材料(
类型：MaterialType.transparency，
孩子：InkWell(
onTap:（）{}，
子：列(
mainAxisSize:mainAxisSize.min，
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
图标（Icons.add，颜色：Colors.blue，大小：24），
文本（“添加”）
],
),
),
),
),
),
]
),
)

给你

小部件构建（上下文）{ 返回脚手架( 底部导航栏：容器( 身高：56， 边缘：边缘组。对称（垂直：24，水平：12）， 孩子：排( 儿童：[ 容器( 宽度：66， 颜色：颜色。绿色， 子：列( mainAxisAlignment:mainAxisAlignment.center， 儿童：[图标（Icons.chat，颜色：Colors.white），文本（“chat”，样式：TextStyle（颜色：Colors.white））]， ), ), 容器( 宽度：66， 颜色：颜色。绿色， 子：列( mainAxisAlignment:mainAxisAlignment.center， 子项：[图标（Icons.notifications\u活动，颜色：Colors.white），文本（“NOTIF”，样式：TextStyle（颜色：Colors.white））]， ), ), 扩大( 子：容器( 对齐：对齐.center， 颜色：颜色，红色， 子项：文本（“立即购买”，样式：TextStyle（fontWeight:fontWeight.bold，fontSize:18））， ), ), ], ), ), ); }

---

对于此功能，最好使用

Stack

。尝试键入

BottomNavigationBarType。修复了
Stack吗？是固定位置吗？先生@CopsonRoad是的，它会在一个固定的位置。好的，先生，我要试试。包装堆栈中的按钮图标，对吗@CopsonRoad扩展按钮实际上是一个自定义按钮的开始。让我编辑一下我的答案，让它变得更清晰。不，它非常清晰，容易理解。谢谢你的好意，先生。上帝保佑你：）@Robin Reiterwork做得很好，先生。这真是太好了！！上帝保佑你，先生。谢谢：）：）@CopsOnRoad嘿，先生，@CopsOnRoad，我想问，也许这看起来很琐碎，但我真的有麻烦。我在行中有两个小部件，行在列中，列在行中，就像这个'row（''column（''row（“文本”“容器”我想用空格分隔文本和容器，但它们仍然不想分隔。有什么建议吗？这里是截图：您必须在第二行
中使用
Expanded
。哦，我明白了。所以如果我使用Expanded，它们会分开吗？非常感谢您回答我愚蠢的问题。：）我认为他们应该按照你想要的方式工作，如果不分享你想要做的事情的截图，我会尽力帮助你。
Widget build(context) {
  return Scaffold(
    bottomNavigationBar: Container(
      height: 56,
      margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
      child: Row(
        children: <Widget>[
          Container(
            width: 66,
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
            ),
          ),
          Container(
            width: 66,
            color: Colors.green,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.red,
              child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            ),
          ),
        ],
      ),
    ),
  );
}