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"),
                      ),
                    )
                  ]),
            )
          ],
        ),
      ],
    ),