如何在Flutter中制作此滑动动画？

Question

我想做这种颤动的动画，你能知道吗？当您单击容器时，将显示此动画。谢谢

Click to see the example

Answer 1

尝试一下，您可以更改颜色和半径

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 250,
            child: DefaultTabController(
              length: 2,
              child: TabBar(
                labelColor: Colors.white,
                unselectedLabelColor: Colors.grey,
                indicator: TabIndicator(color: Colors.blue, radius: Radius.circular(4)),
                tabs: [Tab(text: 'Tab1'), Tab(text: 'Tab1')],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class TabIndicator extends Decoration {
  final BoxPainter _painter;

  TabIndicator({@required Color color, @required Radius radius}) : _painter = _CirclePainter(color, radius);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;
  final Radius radius;

  _CirclePainter(Color color, this.radius)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Rect rect = Rect.fromLTWH(offset.dx, offset.dy, cfg.size.width, cfg.size.height);
    final RRect rRect = RRect.fromRectAndRadius(rect, radius);
    canvas.drawRRect(rRect, _paint);
  }
}

结果https://imgur.com/Fjztd7Q