强制选项卡指示器BoxDecoration垂直居中居中

Question

我要将背景色和边框设置为活动标签。

请查看以下图片：

这是我的代码：

TabBar(
          unselectedLabelColor: primaryColorLight,
          indicatorSize: TabBarIndicatorSize.label,
          labelColor: Colors.white,
          indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            color: primaryColor,
          ),
          tabs: [
            Tab(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  border: Border.all(color: primaryColorLight, width: 1),
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Gallery"),
                ),
              ),
            ),
            Tab(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  border: Border.all(color: primaryColor, width: 1),
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("دندان‌پزشکی"),
                ),
              ),
            ),
          ],
        ),

我如何对齐容器使其垂直居中？

Answer 1

尝试这种方式

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(HomeScreen());
int currentTab = 0;

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenPage createState() => _HomeScreenPage();
}

class TabModel {
  String text;

  TabModel({this.text});
}

class _HomeScreenPage extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  PageController _controller = PageController(initialPage: 0, keepPage: false);

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        theme: ThemeData(
            primarySwatch: Colors.purple,
            brightness: Brightness.light,
            accentColor: Colors.red),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text("Custom TabBar"),
            ),
            body: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.all(5.0),
                        decoration: BoxDecoration(
                            color: currentTab == 0
                                ? Colors.purple
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(14.0),
                            border: Border.all(color: Colors.red, width: 1.0)),
                        child: FlatButton(
                          color: Colors.transparent,
                          onPressed: () {
                            setState(() {
                              currentTab = 0;
                              _controller.jumpToPage(currentTab);
                            });
                          },
                          child: Text(
                            "iOS",
                            style: TextStyle(
                                color: currentTab == 0
                                    ? Colors.white
                                    : Colors.black),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.all(5.0),
                        decoration: BoxDecoration(
                            color: currentTab == 1
                                ? Colors.purple
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(14.0),
                            border: Border.all(color: Colors.red, width: 1.0)),
                        child: FlatButton(
                          color: Colors.transparent,
                          onPressed: () {
                            setState(() {
                              currentTab = 1;
                              _controller.jumpToPage(currentTab);
                            });
                          },
                          child: Text(
                            'Android',
                            style: TextStyle(
                                color: currentTab == 1
                                    ? Colors.white
                                    : Colors.black),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Flexible(
                    child: Container(
                  child: PageView(
                    controller: _controller,
                    onPageChanged: (pageId) {
                      setState(() {
                        currentTab = pageId;
                      });
                    },
                    children: <Widget>[
                      Container(
                        color: Colors.pink,
                        child: Center(
                          child: Text(
                            'iOS',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.cyan,
                        child: Center(
                          child: Text(
                            'Android',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 50,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ],
                  ),
                )),
              ],
            )));
  }
}

输出