颤振 - 翻转卡的效果

Question

我正在尝试制作翻转卡片，这是获得效果的最佳方法

Answer 1

我会使用// package.json: { "name": "x", "dependencies": { "y": "latest", "z": "latest" } } 或AnimatedBuilder为AnimatedWidget窗口小部件的值设置动画。 ScaleTransition几乎可以为你做这件事，但它可以缩放两个方向，而你只想要一个。

Transform

Answer 2

我使用了简单的方法，将其沿X轴旋转。这是完整的代码。

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _flag = true;
  Color _color = Colors.blue;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1), value: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.crop_rotate),
        onPressed: () async {
          if (_flag) {
            await _controller.reverse();
            setState(() {
              _color = Colors.orange;
            });
            await _controller.forward();
          } else {
            await _controller.reverse();
            setState(() {
              _color = Colors.blue;
            });
            await _controller.forward();
          }

          _flag = !_flag;
        },
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform(
              transform: Matrix4.rotationX((1 - _controller.value) * math.pi / 2),
              alignment: Alignment.center,
              child: Container(
                height: 100,
                margin: EdgeInsets.symmetric(horizontal: 20),
                padding: EdgeInsets.symmetric(vertical: 12),
                alignment: Alignment.center,
                decoration: BoxDecoration(color: _color.withOpacity(0.2), border: Border.all(color: Colors.grey)),
                child: FlutterLogo(colors: _color, size: double.maxFinite),
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 3

您可以使用flip_card Flutter软件包。它使您可以定义前后小部件，并且可以水平或垂直翻转。