Добавить индикатор поверх TabBar во флаттере

Question

Как этот:

Ниже кода добавится индикатор нижней части TabBar:

  DefaultTabController(
    length: 2,
    child : new TabBar(
      labelColor: Colors.purple,
      indicatorColor: Colors.purple,
      indicatorSize: TabBarIndicatorSize.label,
      unselectedLabelColor: Colors.black,
    tabs: [
        new Tab(icon: Icon(Icons.chrome_reader_mode),),
        new Tab(icon: Icon(Icons.clear_all),),
    ]),
  );

Но мне нужно Indicator поверх TabBar. Я не думаю, что это хорошая идея - создать собственную панель вкладок, потому что я не хочу делать много работы для этой простой вещи.

Answer 1

Для этого необходимо создать пользовательский TabController . Я нашел простой пример Flutter TabBar Здесь . Вы можете проверить это подробно здесь.

Answer 2

Существует простой способ взлома, который заключается в использовании свойства indicator и добавлении UnderlineTabIndicator(), и этот класс имеет именованный параметр с именем insets и в качестве значения, которое я добавил EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

Слева: 50,0, // сделать индикатор маленьким на 50,0 слева

Вверху: 0,0,

Справа: 50,0, // сделать индикатор маленьким на 50,0 справа

Снизу: 40,0 // толкнул индикатор вверх на 40,0 снизу

как показано ниже:

const textStyle = TextStyle(
    fontSize: 12.0,
    color: Colors.white,
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w600);

//.....
new TabBar(
  controller: controller,
  labelColor: Color(0xFF343434),
  labelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Color(0xDD613896), width: 8.0),
    insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
  ),
  unselectedLabelColor: Color(0xFFc9c9c9),
  unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  tabs: [
    new Tab(
      text: 'LOGIN',
    ),
    new Tab(
      text: 'SIGNUP',
    ),
  ],
),

Также вы можете создать собственный индикатор с расширением Decoration