Flutter 移除 tab 和 tabview 之间的部分边框

Question

如何删除选项卡与其链接的选项卡视图之间的部分边框，如下图所示。

下面是我创建标签和标签视图的代码。

Column(
  children: <Widget>[


    Row(
      children: <Widget>[
        Container(
          width: 200,
          child: TabBar(
              controller: _controller,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.grey,
              indicator: BoxDecoration(

                border: Border(
                    left: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    ),
                    right: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    ),
                    top: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    )
                ),
                color: Colors.white,
              ),

              tabs: [
                Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Apple"),
                  ),
                ),
                Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Android"),
                  ),
                )
              ]
          ),
        )
      ],
    ),

    AnimatedBuilder(
      animation: _controller.animation,
      builder: (BuildContext context, snapshot) {
        return Transform.rotate(
          angle: 0,
          child: [
            Container(
              decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.black,
                    width: 1.0
                ),
                color: Colors.white,
              ),
              width: double.maxFinite,
              child: Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                  width: 1.0
                ),
                color: Colors.white,
              ),
              width: double.maxFinite,
              child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"),
            )
          ] [_controller.animation.value.round()],
        );
      },
    )




  ],
)

下面是选项卡控制器的代码。

class ProductDetailState extends State<ProductDetail> with SingleTickerProviderStateMixin {
   TabController _controller;

@override
void initState() {
super.initState();
_controller = TabController(length: 2, vsync: this);
}


}

Answer 1

 child: Stack(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(
            top: 49,
            left: 10.0,
            right: 10.0,
          ),
          child: AnimatedBuilder(
            animation: _controller.animation,
            builder: (BuildContext context, snapshot) {
              return Transform.rotate(
                angle: 0,
                child: [
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1.0),
                      color: Colors.white,
                    ),
                    width: double.maxFinite,
                    child: Text(
                        "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1.0),
                      color: Colors.white,
                    ),
                    width: double.maxFinite,
                    child: Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"),
                  )
                ][_controller.animation.value.round()],
              );
            },
          ),
        ),
        Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                left: 10.0,
                right: 10.0,
              ),
              width: 200,
              height: 50,
              child: TabBar(
                  controller: _controller,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  indicator: BoxDecoration(
                    border: Border(
                      left: BorderSide(color: Colors.black, width: 1.0),
                      right: BorderSide(color: Colors.black, width: 1.0),
                      top: BorderSide(color: Colors.black, width: 1.0),
                    ),
                    color: Colors.white,
                  ),
                  tabs: [
                    Tab(
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("Apple"),
                      ),
                    ),
                    Tab(
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("Android"),
                      ),
                    )
                  ]),
            )
          ],
        ),
      ],
    ),

Flutter 移除 tab 和 tabview 之间的部分边框

Flutter remove partial border between tab and tabview

flutter

flutter-layout

flutter-web