前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面澈段。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律栈顷，好用輪子萬里挑一痛悯！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了孔祸。本系列文章挑選日常app開發(fā)常用的輪子分享出來隆敢，給大家提高搬磚效率，同時也希望flutter的生態(tài)越來越完善崔慧，輪子越來越多拂蝎。
本系列文章準備了超過50個輪子推薦，工作原因惶室，盡量每1-2天出一篇文章温自。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者，入門請戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱：flip_card
- 輪子概述：flutter可翻轉(zhuǎn)的卡片組件.
- 輪子作者：fedeoo.zf@gmail.com
- 推薦指數(shù)：★★★
- 常用指數(shù)：★★★
-
效果預覽：
效果圖
安裝
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'),
),
);
}
