如何在颤动中降低标签栏的高度

Question

我正在使用 Scaffold 来显示我的底部标签导航器，但它显示得太高了，有没有办法减小我的标签栏中的高度大小。这是代码

Scaffold(
        bottomNavigationBar: Material(
        child: new TabBar(
          tabs: <Widget>[
            Tab(icon: Icon(Icons.home),text: 'Home'),
            Tab(icon: Icon(Icons.settings),text: 'Settings')
          ],
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.grey,
        ),
      ),
        body: TabBarView(
          children: [
            MainScreen(),
            FirstPage(),
          ],
        ),

      )

Answer 1

您可以将 child: new TabBar() 包裹在容器中。并更改图标和文本的高度。

import 'package:flutter/material.dart';

class MyButtomTabBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          bottomNavigationBar: Material(
            child: Container(
              height: 40,
              child: new TabBar(
                tabs: <Widget>[
                  Tab(
                    icon: Icon(
                      Icons.home,
                      size: 15,
                    ),
                    child: Text(
                      'Home',
                      style: TextStyle(fontSize: 10),
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.settings,
                      size: 15,
                    ),
                    child: Text(
                      'Settings',
                      style: TextStyle(fontSize: 10),
                    ),
                  ),
                ],
                labelColor: Colors.blue,
                unselectedLabelColor: Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如何在颤动中降低标签栏的高度

how to reduce height of Tab Bar in flutter

navigation

tabs

flutter