flutter好用的轮子推荐十七-flutter可翻转的卡片组件

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flip_card
  • 轮子概述:flutter可翻转的卡片组件.
  • 轮子作者:fedeoo.zf@gmail.com
  • 推荐指数:★★★
  • 常用指数:★★★
  • 效果预览:
    效果图

安装

1
2
dependencies:
flip_card: ^0.4.4
1
import 'package:flip_card/flip_card.dart';

使用方法

基础使用:

1
2
3
4
5
6
7
8
9
FlipCard(
direction: FlipDirection.HORIZONTAL, // 翻转方向 基于Y轴翻转
front: Container(//正面组件
child: Text('正面'),
),
back: Container(//反面组件
child: Text('反面'),
),
);

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
)),
),
),

代码控制翻转:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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'),
),
);
}

结尾

文章作者: 小包子
文章链接: http://www.xbzweb.com/2019/11/20/flutter好用的轮子推荐十七-flutter可翻转的卡片组件/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小包子的博客
承接软件开发外包:网站开发、iOS开发、Android开发、微信小程序、桌面软件开发,效率高,价格优。点击进入小包子工作室