前言

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進(jìn)步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺(tái)開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開發(fā)常用的輪子分享出來，給大家提高搬磚效率，同時(shí)也希望flutter的生態(tài)越來越完善，輪子越來越多。

本系列文章準(zhǔn)備了超過50個(gè)輪子推薦，工作原因，盡量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者，入門請(qǐng)戳：flutter官網(wǎng)

正文

輪子

• 輪子名稱：flip_card
• 輪子概述：flutter可翻轉(zhuǎn)的卡片組件.
• 輪子作者：fedeoo.zf@gmail.com
• 推薦指數(shù)：★★★
• 常用指數(shù)：★★★

• 效果預(yù)覽：

  
  
  效果圖

安裝

dependencies:
  flip_card: ^0.4.4

import 'package:flip_card/flip_card.dart';

使用方法

基礎(chǔ)使用：

FlipCard(
  direction: FlipDirection.HORIZONTAL, // 翻轉(zhuǎn)方向 基于Y軸翻轉(zhuǎn)
  front: Container(//正面組件
        child: Text('正面'),
    ),
    back: Container(//反面組件
        child: Text('反面'),
    ),
);

示例：

FlipCard(
    direction: FlipDirection.VERTICAL, //基于X軸翻轉(zhuǎn)
    front: Container(
        height: 200,
        width: 345,
        margin: EdgeInsets.all(10),
        color: Colors.teal,
        child: Center(
            child: Text("《遮天》",style:TextStyle(
                fontSize:40,
                color:Colors.white
            )),
        ),
    ),
    back: Container(
        height: 200,
        width: 345,
        margin: EdgeInsets.all(10),
        color: Colors.pink,
        padding: EdgeInsets.all(10),
        child: Text('....'
        ,style: TextStyle(
            color: Colors.white,
            height:2.0
        )),
    ),
),

代碼控制翻轉(zhuǎn)：

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

@override
Widget build(BuildContext context) {
  return FlipCard(
    key: cardKey,
    flipOnTouch: false,
    front: Container(
      child: RaisedButton(
        onPressed: () => cardKey.currentState.toggleCard(),
        child: Text('Toggle'),
      ),
    ),
    back: Container(
      child: Text('Back'),
    ),
  );
}

結(jié)尾

• 輪子倉庫地址：https://pub.flutter-io.cn/packages/flip_card
• 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo