如何使颤振中的标签指示器变小？

Question

Hello all, I have a custom rounded appbar and the tab indicators i want to make it smaller in size as for my application it is too big.The image of the custom rounded appbar with the default one is posted above. The appbar should be more smaller then the default one. Can anyone help me please?

import 'package:flutter/material.dart';

class TimeInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(55.0),
              child: AppBar(
                backgroundColor: Colors.white,
                elevation: 0,
                bottom: TabBar(
                  indicatorWeight: 0,
                    unselectedLabelColor: Colors.red,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: Colors.redAccent,
                    ),
                    tabs: [
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test1"), 
                          ),
                        ),
                      ),
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test2"),
                          ),
                        ),
                      ),
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test3"),
                          ),
                        ),
                      ),
                    ]),
              ),
            ),
            body: TabBarView(children: [
              Icon(Icons.games),
              Icon(Icons.beach_access),
              Icon(Icons.cloud_download),
            ]),
          )),
    );
  }
}

Answer 1

Tab widget in Flutter has 2 possible fixed height. If you use both text and icon parameters of Tab widget, the height of the Tab is fixed to 72.0, If you give a custom child or just text parameters it will be 46.0. Even if your child's height is less than 46, it will be fixed to 46 anyway. So if you want to make it smaller, you can create your custom Tab widget. To do that you can just copy and paste the default Tab widget and change the height constants as follows:

// Since you are using a custom child inside your Tab the one you need to 
// change is _kTabHeight

const double _kTabHeight = 46.0;
const double _kTextAndIconTabHeight = 72.0;  

class Tab extends StatelessWidget {
  const Tab({
    Key key,
    this.text,
    this.icon,
    this.child,
  }) : assert(text != null || child != null || icon != null),
       assert(!(text != null && null != child)),
       super(key: key);

  /// The text to display as the tab's label.
  ///
  /// Must not be used in combination with [child].
  final String text;

  /// The widget to be used as the tab's label.
  ///
  /// Usually a [Text] widget, possibly wrapped in a [Semantics] widget.
  ///
  /// Must not be used in combination with [text].
  final Widget child;

  /// An icon to display as the tab's label.
  final Widget icon;

  Widget _buildLabelText() {
    return child ?? Text(text, softWrap: false, overflow: TextOverflow.fade);
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));

    double height;
    Widget label;
    if (icon == null) {
      height = _kTabHeight;
      label = _buildLabelText();
    } else if (text == null && child == null) {
      height = _kTabHeight;
      label = icon;
    } else {
      height = _kTextAndIconTabHeight;
      label = Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: icon,
            margin: const EdgeInsets.only(bottom: 10.0),
          ),
          _buildLabelText(),
        ],
      );
    }

    return SizedBox(
      height: height,
      child: Center(
        child: label,
        widthFactor: 1.0,
      ),
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('text', text, defaultValue: null));
    properties.add(DiagnosticsProperty<Widget>('icon', icon, defaultValue: null));
  }
}

Now I will remove icon and text parameters because you are just using child parameter. Now if you change your _kTabHeight constant you can get what you want

const double _kTabHeight = 46.0;

class Tab extends StatelessWidget {
  const Tab({
    Key key,
    this.child,
  }) : assert(child != null),
       super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));

    return SizedBox(
      height: _kTabHeight,
      child: Center(
        child: child,
        widthFactor: 1.0,
      ),
    );
  }
}