如何在 TabBar 上创建阴影或高度？

Question

我尝试了不同的选项，但无法像图片中那样添加阴影：

TabBar(
        indicatorColor: Colors.transparent,
        indicatorSize: TabBarIndicatorSize.tab,
        unselectedLabelColor: inActiveColor,
        // Using BoxDecoration there is PADDING issue in Tabs 
         indicator: BoxDecoration(
           borderRadius: BorderRadius.circular(50),
           color: hexToColor(primaryColorDark),
           boxShadow: [
             BoxShadow(
               color: Colors.grey.withOpacity(0.5),
               spreadRadius: 10,
               blurRadius: 10,
               offset: Offset(0, 10), // changes position of shadow
             ),
           ],
         ),
        tabs: <Tab>[
          Tab(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.create,
                  size: 20,
                ),
                Text('   ' + 'Form'),
              ],
            ),
          ),
          Tab(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.remove_red_eye,
                  size: 20,
                ),
                Text('   ' + 'Preview'),
              ],
            ),
          ),
        ],
      ),

Answer 1

你可以用容器包装你的物品并设计它，这里可能是一个例子。这显然是一个黑客。

         Tab(
              child: Container(
                width: 100,
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: index == 0 ? Colors.red : null,
                  boxShadow: [
                    if (index == 0)
                      BoxShadow(
                        color: Colors.red.withOpacity(0.5),
                        spreadRadius: 2,
                        blurRadius: 10,
                      ),
                  ],
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.create, size: 20),
                    SizedBox(width: 10),
                    Text('Form'),
                  ],
                ),
              ),
            ),

这里我根据选择的索引改变背景颜色。

Answer 2

试试这个不错

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size(MediaQuery.of(context).size.width, 500),
              child: Container(
                color: Colors.white,
                padding: const EdgeInsets.all(16),
                child: Row(
                  children: <Widget>[
                    Icon(Icons.arrow_back_ios,size: 30,),
                    SizedBox(
                      width: 16,
                    ),
                    Expanded(
                      child: TabBar(
                        indicatorColor: Colors.transparent,
                        indicatorSize: TabBarIndicatorSize.tab,
                        unselectedLabelColor: Colors.grey[400],
                        // Using BoxDecoration there is PADDING issue in Tabs
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: Colors.blueAccent,
                          boxShadow: [
                            BoxShadow(
                              color: Colors.deepPurple
                                  .withOpacity(0.3)
                                  .withBlue(150),
                              blurRadius: 25,
                              offset:
                                  Offset(0, 20), // changes position of shadow
                            ),
                          ],
                        ),
                        tabs: <Tab>[
                          Tab(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Icon(
                                  Icons.create,
                                  size: 20,
                                ),
                                Text('   ' + 'Form'),
                              ],
                            ),
                          ),
                          Tab(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Icon(
                                  Icons.remove_red_eye,
                                  size: 20,
                                ),
                                Text('   ' + 'Preview'),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            body: Container()),
      ),
    );
  }

Answer 3

最好和最简单的解决方案，只需用固定高度的容器包裹 TabBar，例如：

         Container(
            height: 35,
            child: TabBar(
              indicatorColor: Colors.transparent,
              indicatorSize: TabBarIndicatorSize.tab,
              unselectedLabelColor: inActiveColor,

              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                color: Colors.blueAccent,
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueAccent.withOpacity(0.3),
                    blurRadius: 25,
                    offset: Offset(0, 20), // changes position of shadow
                  ),
                ],
              ),
              tabs: <Tab>[
                Tab(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.create,
                        size: 20,
                      ),
                      Text('   ' + 'Form'),
                    ],
                  ),
                ),
                Tab(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.remove_red_eye,
                        size: 20,
                      ),
                      Text('   ' + 'Preview'),
                    ],
                  ),
                ),
              ],
            ),
          )

如何在 TabBar 上创建阴影或高度？

How to create shadow or elevation on TabBar?

shadow

tabbar

flutter

flutter-layout