Flutter 在底部导航栏上添加行

我想在Flatter中的底部导航栏上添加这种类型的线我想在导航或点击另一个选项卡时使用这种类型的蓝线

这是我的密码

BottomNavigationBar(   //Bottom navigation bar 
      onTap: onTabTapped,
      showSelectedLabels: true,
      currentIndex: _currentIndex,
      items: [
        BottomNavigationBarItem(    //Items of BottomNavigation Bar 
          icon: Image.asset(
            unSelectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
          title:
              Text("Home", style: TextStyle(color: _currentIndex == 0 ? AppTheme.mainThemeColor() : AppTheme.hintTextColor())),
          activeIcon: Image.asset(
            selectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
        ),

       .........
other childItem

---

请帮助查找此信息

您可以使用tabbar而不是BottomNavigationBar 这是一个样本

class Home extends StatefulWidget {
  Home({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  final PageStorageBucket bucket = PageStorageBucket();
  TabController tabController;
  final List<Widget> mainScreens = [
    HomePage(),
    FriendHomePage(),
    QrPage(),
    BillingHomePage(),
    BorrowedHomePage(),
  ];

  @override
  void initState() {
    super.initState();
    tabController = TabController(initialIndex: 0, length: 5, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: PageStorage(
          child: TabBarView(
            controller: tabController,
            physics: NeverScrollableScrollPhysics(),
            children: mainScreens,
          ),
          bucket: bucket,
        ),
      ),
      bottomNavigationBar: SafeArea(
        child: Material(
          color: Colors.white,
          elevation: 10,
          child: BottomAppBar(
            notchMargin: 8,
            shape: CircularNotchedRectangle(),
            child: TabBar(
              tabs: [
                Tab(
                    icon: ImageIcon(
                      AssetImage(
                        'assets/bottombar/home.png',
                      ),
                    ),
                    text: 'Үндсэн'),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/friends.png',
                    ),
                  ),
                  text: 'Найзууд',
                ),
                SizedBox(),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/billing.png',
                    ),
                  ),
                  text: 'Төлбөр',
                ),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/awlaga.png',
                    ),
                  ),
                  text: 'Авлага',
                )
              ],
              labelStyle: TextStyle(fontSize: 10),
              labelColor: Theme.of(context).primaryColor,
              unselectedLabelColor: Theme.of(context).accentColor,
              isScrollable: false,
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorPadding: EdgeInsets.all(5.0),
              indicatorColor: Theme.of(context).primaryColor,
              controller: tabController,
              indicator: UnderlineTabIndicator(
                insets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 75.0),
                borderSide:
                    BorderSide(color: Theme.of(context).primaryColor, width: 3),
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: Material(
        elevation: 10,
        color: Theme.of(context).primaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(36)),
        ),
        child: InkWell(
          customBorder: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(36)),
          ),
          onTap: () => tabController.animateTo(2),
          child: Container(
            width: 65,
            height: 65,
            padding: EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  'assets/bottombar/qr.png',
                  height: 25,
                  fit: BoxFit.cover,
                  color: Theme.of(context).accentColor,
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(),
    );
  }
}

class Home扩展StatefulWidget{
Home（{Key-Key，this.title}）：super（Key:Key）；
最后的字符串标题；
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类_HomeState使用TickerProviderStateMixin扩展状态{
final PageStorageBucket bucket=PageStorageBucket（）；
TabController TabController；
最终列表主屏幕=[
首页（），
FriendHomePage（），
QrPage（），
BillingHomePage（），
借用主页（），
];
@凌驾
void initState（）{
super.initState（）；
tabController=tabController（初始索引：0，长度：5，vsync:this）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
resizeToAvoidBottomInset:true，
正文：安全区(
子：页面存储(
子项：选项卡视图(
控制器：选项卡控制器，
物理学：NeverscrollableScroll物理学（），
儿童：主屏幕，
),
桶：桶，
),
),
底部导航栏：安全区域(
儿童：材料(
颜色：颜色，白色，
标高：10，
子项：BottomAppBar(
notchMargin:8，
形状：CircularNotchedRectangle（），
孩子：TabBar(
选项卡：[
标签(
图标：图像图标(
资产评估(
'资产/bottombar/home.png'，
),
),
文本：“Үэээ”），
标签(
图标：图像图标(
资产评估(
“assets/bottombar/friends.png”，
),
),
文本：“аззззззззб”，
),
SizedBox（），
标签(
图标：图像图标(
资产评估(
'资产/bottombar/billing.png'，
),
),
正文：“өөөөөөөө”，
),
标签(
图标：图像图标(
资产评估(
“assets/bottombar/awlaga.png”，
),
),
文本：“АааГа”，
)
],
标签样式：文本样式（字体大小：10），
labelColor:Theme.of（context）.primaryColor，
未选择的LabelColor:Theme.of（context）.accentColor，
isScrollable:错误，
指标化：TabBarIndicatorSize.tab，
指示灯添加：所有边缘设置（5.0），
指示色：主题。背景。原色，
控制器：选项卡控制器，
指示器：下划线指示器(
插图：来自LTRB（0.0,0.0,0.0,75.0）的边缘插图，
边界：
边框（颜色：主题。背景。原色，宽度：3），
),
),
),
),
),
浮动操作按钮：材质(
标高：10，
颜色：主题。背景。原色，
形状：圆形矩形边框(
borderRadius:borderRadius.all（半径.圆形（36）），
),
孩子：InkWell(
customBorder:RoundedRectangleBorder(
borderRadius:borderRadius.all（半径.圆形（36）），
),
onTap:（）=>tabController.animateTo（2），
子：容器(
宽度：65，
身高：65，
填充：边缘设置。全部（8），
子：列(
crossAxisAlignment:crossAxisAlignment.center，
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
影像资产(
“资产/bottombar/qr.png”，
身高：25，
适合：BoxFit.cover，
颜色：主题。背景。强调颜色，
),
],
),
),
),
),
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
抽屉：抽屉（），
);
}
}

软件包应该可以帮助您实现这一点。您可能只需要根据需要进行自定义

---

使用TabBar而不是BottomNavigationBar@MDKhali能否提供一些与底部选项卡栏相关的链接，这也有助于解决投票问题as@MDKhali兄弟我想要底部导航栏我不能将tabbar对齐方式更改为您共享的底部链接不是底部导航栏是的，但我在底部导航栏中使用tabbar，但这与底部导航栏类似。我们可以将指示栏移到底部吗？