在Flutter中制作翻轉(zhuǎn)卡片動(dòng)畫的完整實(shí)例代碼

更新時(shí)間：2021年10月13日 08:58:44 作者：Breeze_Luckly

最近Flutter的勢(shì)頭是越來(lái)越猛了,作為一個(gè)Android程序猿,我自然也是想要趕緊嘗試一把,這篇文章主要給大家介紹了關(guān)于在Flutter中制作翻轉(zhuǎn)卡片動(dòng)畫的相關(guān)資料,需要的朋友可以參考下

前言

本文將帶您了解在 Flutter 中制作翻轉(zhuǎn)卡片動(dòng)畫的兩個(gè)完整示例。第一個(gè)示例從頭開始實(shí)現(xiàn)，第二個(gè)示例使用第三方包。閑話少說(shuō)，讓我們動(dòng)手吧。

使用自寫代碼

本示例使用變換小部件創(chuàng)建翻轉(zhuǎn)卡片效果。

預(yù)覽

我們將要構(gòu)建的演示應(yīng)用程序顯示了兩張隱藏一些秘密的卡片。您可以通過(guò)按“揭示秘密” 按鈕來(lái)揭開面具背后的東西。最上面的卡片展示了一個(gè)水平翻轉(zhuǎn)動(dòng)畫，底部一張展示了一個(gè)垂直翻轉(zhuǎn)動(dòng)畫。

完整代碼

// main.dart
import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
          primarySwatch: Colors.amber,
        ),
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;
  AnimationStatus _status = AnimationStatus.dismissed;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animation = Tween(end: 1.0, begin: 0.0).animate(_controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        _status = status;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 30,
            ),
            // Horizontal Flipping
            Transform(
              alignment: FractionalOffset.center,
              transform: Matrix4.identity()
                ..setEntry(3, 2, 0.0015)
                ..rotateY(pi * _animation.value),
              child: Card(
                child: _animation.value <= 0.5
                    ? Container(
                        color: Colors.deepOrange,
                        width: 240,
                        height: 300,
                        child: Center(
                            child: Text(
                          '?',
                          style: TextStyle(fontSize: 100, color: Colors.white),
                        )))
                    : Container(
                        width: 240,
                        height: 300,
                        color: Colors.grey,
                        child: Image.network(
                          'https://www.kindacode.com/wp-content/uploads/2021/09/girl.jpeg',
                          fit: BoxFit.cover,
                        )),
              ),
            ),
            // Vertical Flipping
            SizedBox(
              height: 30,
            ),
            Transform(
              alignment: FractionalOffset.center,
              transform: Matrix4.identity()
                ..setEntry(3, 2, 0.0015)
                ..rotateX(pi * _animation.value),
              child: Card(
                child: _animation.value <= 0.5
                    ? Container(
                        color: Colors.deepPurple,
                        width: 240,
                        height: 300,
                        child: Center(
                            child: Text(
                          '?',
                          style: TextStyle(fontSize: 100, color: Colors.white),
                        )))
                    : Container(
                        width: 240,
                        height: 300,
                        color: Colors.grey,
                        child: RotatedBox(
                          quarterTurns: 2,
                          child: Image.network(
                            'https://www.kindacode.com/wp-content/uploads/2021/09/flower.jpeg',
                            fit: BoxFit.cover,
                          ),
                        )),
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  if (_status == AnimationStatus.dismissed) {
                    _controller.forward();
                  } else {
                    _controller.reverse();
                  }
                },
                child: Text('Reveal The Secrets'))
          ],
        ),
      ),
    );
  }
}

使用第三個(gè)插件

從頭開始編寫代碼可能既麻煩又耗時(shí)。如果您想快速而整潔地完成工作，那么使用插件中的預(yù)制小部件是一個(gè)不錯(cuò)的選擇。下面的示例使用了一個(gè)名為flip_card的很棒的包。

編碼

1.將插件添加到您的項(xiàng)目中：

flutter pub add flip_card

您可能需要運(yùn)行：

flutter pub get

安裝插件。

2.實(shí)現(xiàn)插件提供的FlipCard小部件：

Center(
        child: FlipCard(
          direction: FlipDirection.HORIZONTAL, 
          front: Container(
            width: 300,
            height: 400,
            color: Colors.red,
          ),
          back: Container(
            width: 300,
            height: 400,
            color: Colors.blue,
          ),
        ),
      ),

結(jié)論

我們已經(jīng)通過(guò)幾個(gè)在應(yīng)用程序中實(shí)現(xiàn)翻轉(zhuǎn)效果的示例。

到此這篇關(guān)于在Flutter中制作翻轉(zhuǎn)卡片動(dòng)畫的文章就介紹到這了,更多相關(guān)Flutter翻轉(zhuǎn)卡片動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: