Дно переполнено на 4 пикселя при попытке отобразить значок и текст под значком на каждой вкладке в макете панели вкладок флаттера

Я пытаюсь создать панель вкладок во флаттере следующим образом:

TabController _controller;
      int _selectedIndex = 0;
    
      List<Widget> list = [
        Tab(
          icon: Image.asset(
            'images/dollar_world_grid_selected.png',
            width: 50.0,
            height: 50.0,
          ),
          child: Text(
            "Currency",
            style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
          ),
        ),
        Tab(
            icon: Image.asset(
              'images/gold-bars.png',
              width: 50.0,
              height: 50.0,
            ),
            child: Text(
              "Gold",
              style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
            )),
      ];
    
     @override
      void initState() {
        super.initState();
    
        // Create TabController for getting the index of current tab
        _controller = TabController(length: list.length, vsync: this);
    
        _controller.addListener(() {
          setState(() {
            _selectedIndex = _controller.index;
    
            list = [
              Tab(
                icon: Image.asset(
                  _selectedIndex == 0
                      ? 'images/dollar_world_grid_selected.png'
                      : 'images/dollar_world_grid.png',
                  width: 50.0,
                  height: 50.0,
                ),
                child: Text(
                  "Currency",
                  style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
                ),
              ),
              Tab(
                  icon: Image.asset(
                    _selectedIndex == 1
                        ? 'images/gold-bars-selected.png'
                        : 'images/gold-bars.png',
                    width: 50.0,
                    height: 50.0,
                  ),
                  child: Text(
                    "Gold",
                    style: TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
                  )),
            ];
          });
        });
       }
    
     @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
    
        return Scaffold(
            appBar: PreferredSize(
                preferredSize: Size.fromHeight(200.0), // here the desired height
                child: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
    
                  title: Row(children: <Widget>[
                    Image.asset(
                      'images/logobig.png',
                      width: 50.0,
                      height: 50.0,
                    ),
                    Text(widget.title),
                  ]),
                  backgroundColor: Colors.blue,
                  bottom: TabBar(
                    controller: _controller,
                    indicatorColor: Color.fromRGBO(43, 73, 193, 0.4),
                    tabs: list,
                  ),
                )),
    body: TabBarView(controller: _controller, children: [
    ]));

Как видите, каждая вкладка содержит значок и текст под ним. К сожалению, вывод следующий:

Как вы можете видеть, текст не отображается, и я получаю нижнее переполнение на 4 пикселя. Любая идея о том, как отобразить значок и текст под значком на каждой вкладке с ошибкой? Спасибо.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
139
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто оберните виджеты Tab с помощью SizedBox или Container и установите высоту 80 или больше. :)

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

Уменьшить 4px от вас Tab Подобные изображения

Image.asset(
  'images/gold-bars.png',
   width: 46.0,
   height: 46.0,
)

Увеличить высоту виджета панели вкладок на 4 пикселя

 appBar: PreferredSize(
            preferredSize: Size.fromHeight(204.0), // change 200 to 204
            child: AppBar(
            //your code

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