Пользовательская форма индикатора TabBar - PullRequest
Новая
       10

Пользовательская форма индикатора TabBar

0 голосов
/ 19 сентября 2019

Я пытался создать индикатор TabBar в соответствии с этой формой.

enter image description here

Мой текущий код выглядит следующим образом 

TabBar(
  isScrollable: true,
  controller: _tabController,
  tabs: _tabList,
  labelColor: Colors.black,
  labelStyle: _generalTitleStyle,
  // indicatorColor: Colors.black,
  indicatorSize: TabBarIndicatorSize.tab,
  indicatorWeight: 4.0,
  indicatorPadding: EdgeInsets.symmetric(horizontal: 8.0),
  indicator: ShapeDecoration(
    shape: UnderlineInputBorder(
      borderSide: BorderSide(width: 8.0),
      borderRadius: BorderRadius.only(
        topLeft: Radius.elliptical(50, 360),
        topRight: Radius.elliptical(50, 360),
      ),
    ),
  ),
),

В результате получается такой код

Но когда я изменил borderRadius биты на 

borderRadius: BorderRadius.only(
  bottomLeft: Radius.elliptical(50, 360),
  bottomRight: Radius.elliptical(50, 360),
),

Это на самом деле работает, но не в той форме, которую я хотел

enter image description here

Как мне на самом деле сделать так, чтобы он выглядел как изображение сверху?

Спасибо!

1 Ответ

0 голосов
/ 19 сентября 2019

Вы можете создать свою собственную форму для индикатора.

Вот код: 


class MyShape extends ShapeBorder {
  int shapeDistance = 5;
  @override
  // TODO: implement dimensions
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getInnerPath
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getOuterPath
    return null;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    final paint = Paint();
    Path path = new Path();
    path.moveTo(rect.bottomLeft.dx + shapeDistance, rect.bottomLeft.dy);
    path.lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy + shapeDistance);
    path.lineTo(rect.bottomRight.dx, rect.bottomRight.dy + shapeDistance);
    path.lineTo(rect.bottomRight.dx - shapeDistance, rect.bottomRight.dy);
    canvas.drawPath(path, paint);
  }

  @override
  ShapeBorder scale(double t) {
    // TODO: implement scale
    return null;
  }
}

Затем установите его в 

ShapeDecoration(
   shape: MyShape()
)
...