flutter好用的輪子推薦十七-flutter可翻轉的卡片組件

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。git

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。github

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。markdown

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網app

正文

輪子

輪子名稱：flip_card
輪子概述：flutter可翻轉的卡片組件.
輪子做者：fedeoo.zf@gmail.com
推薦指數：★★★
經常使用指數：★★★
效果預覽：

安裝

dependencies:
 flip_card: ^0.4.4
複製代碼

import 'package:flip_card/flip_card.dart';
複製代碼

使用方法

基礎使用：框架

FlipCard(
  direction: FlipDirection.HORIZONTAL, // 翻轉方向 基於Y軸翻轉
  front: Container(//正面組件
        child: Text('正面'),
    ),
    back: Container(//反面組件
        child: Text('反面'),
    ),
);
複製代碼

示例：ide

FlipCard(
    direction: FlipDirection.VERTICAL, //基於X軸翻轉
    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
        )),
    ),
),
複製代碼

代碼控制翻轉：oop

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'),
    ),
  );
}
複製代碼

結尾

輪子倉庫地址：pub.flutter-io.cn/packages/fl…
系列演示demo源碼：github.com/826327700/f…