选项卡栏上的颤动圆形指示器

Question

有没有人可以做到这一点？ 我尝试了所有方法并在此上浪费了 1000 个小时，但我放弃了。 我需要圆形应用栏中的圆形指示器。

Answer 1

您可以使用 ClipRRect

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue[100],
        body: Example(),
      ),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  TabController _tabController;
  int currnetIndex = 0;

  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 4);
    _tabController.addListener(() {
      if (_tabController.index != currnetIndex) {
        setState(() {
          currnetIndex = _tabController.index;
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, 3),
                  spreadRadius: 2,
                  blurRadius: 2,
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10.0),
                bottomRight: Radius.circular(10.0),
              ),
              child: Container(
                color: Colors.white,
                child: TabBar(
                  indicatorWeight: 6.0,
                  controller: _tabController,
                  tabs: <Widget>[
                    _TabItem('All'),
                    _TabItem('Invited'),
                    _TabItem('Upcoming'),
                    _TabItem('Saved'),
                  ],
                ),
              ),
            ),
          ),
          Container(
            height: 500,
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Container(child: Text('All')),
                Container(child: Text('Invited')),
                Container(child: Text('Upcoming')),
                Container(child: Text('Saved')),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class _TabItem extends StatelessWidget {
  final String title;

  const _TabItem(this.title, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(color: Colors.black),
    );
  }
}