Элемент Flutter TabBar не заполняет все оставшееся пространство

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

Вот мой код

Container(
      height: 45,
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(
          8,
        ),
      ),
      child: TabBar(
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(
            8,
          ),
          color: Colors.lightBlueAccent,
        ),
        dividerColor: Colors.transparent,
        tabAlignment: TabAlignment.fill,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white,
        controller: tabController,
        tabs: const [
          Expanded(
            child: Tab(
              text: 'Upload Video Url',
            ),
          ),
          Expanded(
            child: Tab(
              text: 'Upload File',
            ),
          ),
        ],
      ),
    )

Результат выглядит так

Я пытаюсь создать панель вкладок из Flutter — Как создать собственную панель вкладок, но все равно не могу заполнить оставшееся пространство.

Я также пытаюсь использовать «Расширено на вкладке», но все равно не меняюсь.

TabBar(
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(
            8,
          ),
          color: Colors.lightBlueAccent,
        ),
        dividerColor: Colors.transparent,
        tabAlignment: TabAlignment.fill,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white,
        controller: tabController,
        tabs: const [
          Expanded(
            child: Tab(
              text: 'Upload Video Url',
            ),
          ),
          Expanded(
            child: Tab(
              text: 'Upload File',
            ),
          ),
        ],
      )

flutter tabs

30.06.2024 07:49

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вместо Tab вы можете использовать Container с пользовательской конфигурацией, также вам нужно установить labelPadding на ноль следующим образом:

Container(
  height: 45,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(
      8,
    ),
  ),
  child: TabBar(
    labelPadding: EdgeInsets.zero, // <=== add this
    indicator: BoxDecoration(
      borderRadius: BorderRadius.circular(
        8,
      ),
      color: Colors.lightBlueAccent,
    ),
    dividerColor: Colors.transparent,
    tabAlignment: TabAlignment.fill,
    labelColor: Colors.white,
    unselectedLabelColor: Colors.white,
    controller: controller,
    tabs: [
      Expanded(
        child: Container(// <=== add this
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.transparent,
          margin: EdgeInsets.zero,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Text('Upload Video Url'),
        ),
      ),
      Expanded(
        child: Container(// <=== add this
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          color: Colors.transparent,
          margin: EdgeInsets.zero,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Text('Upload File'),
        ),
      ),
    ],
  ),
)

30.06.2024 08:56

Ответ принят как подходящий

Используйте индикаторSize: TabBarIndicatorSize.tab, свойство по умолчанию, которое заполняет оставшееся пространство.

TabBar(
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(
                  8.0,
                ),
                color: Colors.lightBlueAccent,
              ),
              indicatorSize: TabBarIndicatorSize.tab, //this one is missing
              dividerColor: Colors.transparent,
              tabAlignment: TabAlignment.fill,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.black,
              controller: _tabController,
              tabs: const [
                Expanded(
                  child: Tab(
                    text: 'Upload Video Url',
                  ),
                ),
                Expanded(
                  child: Tab(
                    text: 'Upload File',
                  ),
                ),
              ],
            )

30.06.2024 09:46

добавьте это свойство IndicatorSize: TabBarIndicatorSize.tab и удалите расширенный виджет.

   TabBar(
            indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(8,),
              color: Colors.lightBlueAccent,
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            dividerColor: Colors.transparent,
            tabAlignment: TabAlignment.fill,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.white,
            controller: tabController,
            tabs: const[
              Tab(
                text: 'Upload Video Url',
              ),
              Tab(
                text: 'Upload File',
              ),
            ],
          ),

30.06.2024 14:45

Другие вопросы по теме

Azure DevOps — столбцы для групп

Как получить доступ к виджету вкладок ttk.Notebook?

Как разместить кнопку «Далее/Сохранить» внутри вкладки, чтобы перейти к следующей вкладке

Как изменить цвет фона значка панели вкладок при его выборе?

Создание TabBar с полностью индивидуальным дизайном

Можно ли добавить собственный переход к дочерним элементам TabView при изменении страницы?

Параметры текста и значков на вкладке не допускают составных вызовов

Как настроить Mat-Tabs?

«Отрисовано меньше крючков, чем ожидалось. Это может быть вызвано случайным оператором раннего возврата на вкладках HeadlessUI

Tabindex для элементов div с ориентировочными ролями, правильно или неправильно?

Элемент Flutter TabBar не заполняет все оставшееся пространство

Ответы 3

Другие вопросы по теме

Похожие вопросы