如何将 Flutter 标签栏指示器更改为与 google play store 完全相同

Posted 2023-03-23

【中文标题】如何将 Flutter 标签栏指示器更改为与 google play store 完全相同

【英文标题】：How can I change the Flutter tabbar indicator to be exactly like google play store

【发布时间】：2021-11-08 03:04:08

【问题描述】：

我想为底部边框指示器添加一个边框半径，这样它就可以像 google play store tabbar 一样。

有没有办法用颤振标签栏做到这一点？

这是我目前的风格：

这是我当前的代码：

import 'package:app/components/home/Search.dart';
import 'package:app/screens/home/homeScreen.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Home extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        body: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, innerBoxIsScrolled) => [
                  SliverAppBar(
                    snap: true,
                    floating: true,
                    toolbarHeight: 80,
                    backgroundColor: Colors.white,
                    title: Search(),
                    centerTitle: true,
                    bottom: PreferredSize(
                      preferredSize: Size(0.0, 48.0),
                      child: Column(
                        children: [
                          TabBar(
                            isScrollable: true,
                            indicatorWeight: 3,
                            indicatorColor: green,
                            labelColor: green,
                            unselectedLabelColor: grey,
                            indicatorSize: TabBarIndicatorSize.label,
                            labelStyle: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16.0),
                            tabs: [
                              Tab(text: "screen1"),
                              Tab(text: "screen2"),
                              Tab(text: "screen3"),
                              Tab(text: "s"),
                            ],
                          ),
                          Container(
                            width: Get.width,
                            height: 0.5,
                            color: lightGrey.withOpacity(0.7),
                          )
                        ],
                      ),
                    ),
                  )
                ],
            body: TabBarView(
              children: [
                HomeScreen(),
                HomeScreen(),
                HomeScreen(),
                HomeScreen(),
              ],
            )),
      ),
    );
  

我想为底部边框指示器添加一个边框半径，这样它就可以像 google play store tabbar 一样。

【问题讨论】：

试试看medium.com/swlh/…

【参考方案1】：

这应该适合你，tab_indicator_styler:

// Directly use inside yoru [TabBar]
TabBar(
  indicatorColor: Colors.green,
  tabs: [
    Tab(
      text: "Home",
    ),
    Tab(
      text: "Work",
    ),
    Tab(
      text: "Play",
    ),
  ],
  labelColor: Colors.black,
  // add it here
  indicator: DotIndicator(
    color: Colors.black,
    distanceFromCenter: 16,
    radius: 3,
    paintingStyle: PaintingStyle.fill,
  ),
),