Flutter - 翻转卡片的效果

Question

我想制作一个翻转卡片，最好的方法是什么？

- rafaelcb21

---

这是一个不合适的问题。那些说“请离开这个网站，去其他地方，弄清楚我在问什么，然后回来回答”的问题在这里是不相关的。如果你想知道某个外部位置的人是如何做某事的，那就去那里查看页面源代码或联系该网站的某个人并要求他们分享。 - Ken White

我已编辑问题，将YouTube视频转换为动画GIF。 - Collin Jackson

请查看此链接 https://mightytechno.com/flutter-flip-card-animation-with-3d-effect/ - Ishan Fernando

Answer 1

我会使用AnimatedBuilder或者AnimatedWidget来对一个Transform进行动画效果的值进行处理。 ScaleTransition 已经为你准备了大部分，但是它会在两个方向上缩放，而你只需要其中的一个。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyCustomCard extends StatelessWidget {
  MyCustomCard({ this.colors });

  final MaterialColor colors;

  Widget build(BuildContext context) {
    return new Container(
      alignment: FractionalOffset.center,
      height: 144.0,
      width: 360.0,
      decoration: new BoxDecoration(
        color: colors.shade50,
        border: new Border.all(color: new Color(0xFF9E9E9E)),
      ),
      child: new FlutterLogo(size: 100.0, colors: colors),
    );
  }
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _frontScale;
  Animation<double> _backScale;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    _frontScale = new Tween(
      begin: 1.0,
      end: 0.0,
    ).animate(new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 0.5, curve: Curves.easeIn),
    ));
    _backScale = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.5, 1.0, curve: Curves.easeOut),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);

    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.flip_to_back),
        onPressed: () {
          setState(() {
            if (_controller.isCompleted || _controller.velocity > 0)
              _controller.reverse();
            else
              _controller.forward();
          });
        },
      ),
      body: new Center(
        child: new Stack(
          children: <Widget>[
            new AnimatedBuilder(
              child: new MyCustomCard(colors: Colors.orange),
              animation: _backScale,
              builder: (BuildContext context, Widget child) {
                final Matrix4 transform = new Matrix4.identity()
                  ..scale(1.0, _backScale.value, 1.0);
                return new Transform(
                  transform: transform,
                  alignment: FractionalOffset.center,
                  child: child,
                );
              },
            ),
            new AnimatedBuilder(
              child: new MyCustomCard(colors: Colors.blue),
              animation: _frontScale,
              builder: (BuildContext context, Widget child) {
                final Matrix4 transform = new Matrix4.identity()
                  ..scale(1.0, _frontScale.value, 1.0);
                return new Transform(
                  transform: transform,
                  alignment: FractionalOffset.center,
                  child: child,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

- Collin Jackson

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),
              ),
            );
          },
        ),
      ),
    );
  }
}

- CopsOnRoad

Answer 3

你可以使用flip_card Flutter包。它允许你定义一个正面和反面的小部件，并且可以水平或垂直翻转。

- Banjoe

---

在使用hover时出现问题。使用Inkwell的onHover方法和FlipCardController.toggleCard()...这不起作用。 - Anas Yousuf