Флаттер TabBar высота Иконки

Question

import 'package:flutter/material.dart';

class TestTab extends StatelessWidget {

  final List<Tab> myTabs = <Tab>[
   Tab(
    child: Image.asset(
      'assets/icons/project/proj_001.png',
    ),
  ),
 ...
  Tab(
    icon: Image.asset(
      'assets/icons/project/all.png',
      height: 100,
    ),
  ),
 ...
  Tab(
    icon: Image.asset(
      'assets/icons/project/proj_009.png',
    ),
  ),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 5,
      length: myTabs.length,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
          bottom: TabBar(
            isScrollable: true,
            tabs: myTabs,
          ),
        ),
        ),
        body: TabBarView(
          children: myTabs.map((Tab tab) {
            return Center(
              child: Text(
                'Test',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

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

Экран

Подскажите пожалуйста, как можно увеличить высоту элементов?

Answer 1

Вы должны сделать пользовательский TabBar для настройки. Примерно так.

CustomTabbar

import 'package:flutter/material.dart';

class ChangeTextSizeTabbar extends StatefulWidget {

  @override
  ChangeTextSizeTabbarState createState() {
    return new ChangeTextSizeTabbarState();
  }

}

class ChangeTextSizeTabbarState extends State<ChangeTextSizeTabbar> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Change Text Size Tabbar Example"),
          bottom: TabBar(

              tabs: <Tab>[
                Tab(
                  child: Image.asset(
                    'assets/icons/project/proj_001.png',
                     height : 100,
                     width : 100,
                  ),
                ),

                Tab(
                  icon: Image.asset(
                    'assets/icons/project/all.png',
                     height : 100,
                     width : 100,
                  ),
                ),

                Tab(
                  icon: Image.asset(
                    'assets/icons/project/proj_009.png',
                     height : 100,
                     width : 100,
                  ),
                ),

              ]          ),
        ),

        body: TabBarView(
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
      ),
    );
  }
}

main.dart

    import 'package:flutter/material.dart';
    import 'change_text_size_tabbar_task-3.dart';

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

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          //home: MyHomePage(title: 'Flutter Demo Home Page'),
          home: ChangeTextSizeTabbar(),
        );
      }
    }