如何在脚手架上制作圆形标签？

Question

以下是我的模拟：

我在这里寻求帮助来制作圆形凸耳，分隔线以及凸耳主体的可用空间。

尝试过：https://mightytechno.com/style-tabs-in-flutter-app/

（第一个选项，但仍然没有圆圈）

Answer 1

您的意思是这样的？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Title')),
        body: DefaultTabController(
          length: 3,
          child: Center(
            child: Container(
              width: 210,
              alignment: Alignment.center,
              child: Theme(
                data: Theme.of(context).copyWith(
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                ),
                child: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator: CircleTabIndicator(color: Colors.pink),
                  labelColor: Colors.black,
                  tabs: <Widget>[
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                    Tab(text: 'Tab 3'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

  CircleTabIndicator({@required Color color, double stroke = 0})
      : assert(stroke >= 0),
        _painter = _CirclePainter(color, stroke);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;

  _CirclePainter(Color color, double stroke)
      : _paint = Paint()
          ..color = color
          ..style = stroke > 0 ? PaintingStyle.stroke : PaintingStyle.fill
          ..strokeWidth = stroke;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset = offset + Offset(cfg.size.width / 2, cfg.size.height / 2);
    canvas.drawCircle(circleOffset, cfg.size.width / 2, _paint);
  }
}

Answer 2

您的TabView控制器，类似这样

TabController _tabController = new TabController(length: 2, vsync: this);

您的身体会像

body :  ListView(
//Your TabBar would be something like this, not exactly

new TabBar (children:[
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
]),

// Then your TabVieW starts here
Your TabView(controller: _tabController,
    children:[
    new Container(child: new Text('Tab1')) // Tab 1
    new Container(child: new Text('Tab2')) // Tab 2
    new Container(child: new Text('Tab3')) // Tab 3
])

Answer 3

尝试使用Tab小部件内的ClipOval小部件。

或检查是否可能对bubble_tab_indicator有帮助。