前言
Flutter 是 Google 开源的应用开发框架，仅通过一套代码就能构建支持Android、iOS、Windows、Linux等多平台的应用。Flutter的性能非常高，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。
本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善🎉🎉。
Getwidget 索引
第一篇：按钮 GFButton、角标 GFBadge、头像 GFAvatar、图片 GFImage、卡片 GFCard
第二篇：轮播图 GFCarousel、列表模版 GFListTile、标签栏 GFTabBar、浮动组件 GFFloatingWidget
第三篇：提示框 GFToast、开关 GFToggle、文字排版 GFTypography、抽屉 GFDrawer、弹窗 GFAlert、折叠卡片 GFAccordion
第四篇：导航条 GFAppBar、搜索栏 GFSearchBar、评分组件 GFRating、加载提示 GFLoader、进度条 GFProgressBar
👉 第五篇：闪光组件 GFShimmer、动画 GFAnimation、边框 GFBorder、底部抽屉 GFBottomSheet、复选框 GFCheckbox
第六篇：可选列表模板 GFCheckboxListTile、下拉选择框 GFMultiSelect、介绍屏GFIntroScreen、单选按钮 GFRadio、粘性标题 GFStickyHeader
正文
一、🚀 轮子介绍
- 名称：getwidget
- 概述：GetWidget完全免费，内置了1000多个预构建的小组件，您可以使用这些小组件加快自己开发进程并构建出色的应用。
- 出版商：navin10sharma@gmail.com
- 仓库地址：getwidget
- 推荐指数： ⭐️⭐️⭐️⭐️⭐️
- 常用指数： ⭐️⭐️⭐️⭐️⭐️
- 预览： 长图预览请戳
二、⚙️ 安装及使用
dependencies:
getwidget: ^2.0.5
import 'package:getwidget/getwidget.dart';
三、🗂 组件示例
21. 闪光组件 GFShimmer
属性及含义描述
| 属性 | 描述 |
|---|---|
| child | 用以显示微光效果的子组件 |
| direction | 动画方向，默认GFShimmerDirection.leftToRight |
| duration | 动画时长，默认1.5s |
| showGradient | 是否显示渐变色 |
| gradient | 渐变色，showGradient为true时生效 |
| shimmerEffectCount | 动画执行次数，默认0（无限循环） |
| showShimmerEffect | 控制动画效果的活跃状态 |
| mainColor | 主要颜色 |
| secondaryColor | 次要颜色 |
1.GFShimmer和之前分享的 Shimmer 基本一致，通过包裹组件实现微光动画效果，一般用于加载动画，这是一个简单的示例⬇️：
GFShimmer(
child: Container(
width: 100,
height: 100,
// 这里的颜色不会在GFShimmer中显示，但不能为transparent
color: Colors.green,
))
2.这里包裹的是一个行列样式，也可以包裹GFListTile等封装好的组件来快速实现（SizedBox和透明的Container不会被GFShimmer显示）：
GFShimmer(child: shimmerTest())
Widget shimmerTest() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 80,
height: 80,
color: Colors.white,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: double.infinity,
height: 15,
color: Colors.white,
),
const SizedBox(height: 6),
Container(
width: MediaQuery.of(context).size.width * 0.5,
height: 15,
color: Colors.white,
),
const SizedBox(height: 6),
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: 15,
color: Colors.white,
),
],
),
)
],
),);
}}
3.渐变色微光效果(目前有明显的顿挫，不知道后期会不会优化，两种颜色建议使用属性mainColor和secondaryColor，多色建议使用 Shimmer)：
GFShimmer(
child: const Text(
'GF Shimmer',
style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700),
),
showGradient: true,
gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
),
22.动画 GFAnimation
属性及含义描述
| 属性 | 描述 |
|---|---|
| duration | 动画执行的持续时间 |
| reverseDuration | 反向动画执行的持续时间 |
| alignment | 定义动画组件在动画期间的对齐方式 |
| activeAlignment | 定义动画组件在动画期间的对齐方式（在 onTap 之后） |
| child | 显示动画效果的子组件 |
| curve | 动画曲线， 默认为 Curves.linear |
| type | GFAnimation 的类型，即 align、size、container、rotateTransition、scaleTransition、slideTransition 和 textStyle |
| width | 定义 AnimatedContainer 初始宽度 |
| changedWidth | 定义 AnimatedContainer 的宽度，它可以在动画期间展开 |
| height | 定义 AnimatedContainer 初始高度 |
| changedHeight | 定义 AnimatedContainer 的高度，它可以在动画期间展开 |
| activeColor | 定义onTap触发时 AnimatedContainer 的颜色 |
| color | 定义 AnimatedContainer 的颜色 |
| padding | 定义 child 或 AnimatedContainer 的填充 |
| margin | 定义 child 或 AnimatedContainer 的边距 |
| onTap | 用户点击 child 时的调用 |
| turnsAnimation | 对于 GFAnimationType.rotateTransition，可以在 RotationTransition 小部件中添加自定义的转弯动画 |
| scaleAnimation | 对于 GFAnimationType.scaleTransition，可以在 ScaleTransition 小部件中添加自定义缩放动画 |
| controller | 动画的控制器。 |
| textDirection | 定义 AnimatedDefaultTextStyle 的文本方向，即 [ltr,rtl] |
| slidePosition | 对于 GFAnimationType.slideTransition，它为组件的位置设置动画 |
| style | 文本风格 |
| textAlign | 文本对齐方式 |
| textOverflow | 文本溢出处理 |
| maxLines | 最大行数 |
| textWidthBasis | 文本基础宽度 |
| fontSize | 字号 |
| fontWeight | 字重 |
1.旋转动画示例⬇️：
class GFAnimationPage extends StatefulWidget {
const GFAnimationPage({Key? key}) : super(key: key);
@override
State<GFAnimationPage> createState() => _GFAnimationPagePageState();
}
class _GFAnimationPagePageState extends State<GFAnimationPage> with TickerProviderStateMixin {
late AnimationController controller;
late Animation<double> animation;
bool isWorking = false;
@override
void initState() {
controller = AnimationController(duration: const Duration(seconds: 5), vsync: this);
animation = CurvedAnimation(parent: controller, curve: Curves.linear);
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
...
GFAnimation(
turnsAnimation: animation,
controller: controller,
type: GFAnimationType.rotateTransition,
alignment: Alignment.center,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
),
GFButton(
text: isWorking ? '停止' : ' 播放',
color: isWorking ? Colors.green : Colors.blue,
onPressed: () {
isWorking ? controller.stop() : controller.repeat();
setState(() {
isWorking = !isWorking;
});
}),
}
2.缩放动画：
...
GFAnimation(
turnsAnimation: animation,
controller: controller,
type: GFAnimationType.scaleTransition,
alignment: Alignment.center,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
),
3.对齐动画：
...
GFAnimation(
turnsAnimation: animation,
controller: controller,
type: GFAnimationType.align,
alignment:
isWorking ? Alignment.bottomLeft : Alignment.bottomRight,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
)
4.过渡动画：
...
offsetAnimation = Tween<Offset>(
begin: Offset(0, 0),
end: Offset(1, 0),
).animate(CurvedAnimation(
parent: controller,
curve: Curves.linear,
));
...
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: GFAnimation(
controller: controller,
slidePosition: offsetAnimation,
type: GFAnimationType.slideTransition,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
),
)
5.一个可以在给定的时间内自动转换尺寸的动态组件：
bool selected = false;
late AnimationController controller;
late Animation<double> animation;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
animation = CurvedAnimation(parent: controller, curve: Curves.linear);
controller.repeat();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('data'),
GFAnimation(
onTap: () {
if (mounted) {
setState(() {
selected = !selected;
});
}
},
width: selected ? 100 : 50,
height: selected ? 100 : 50,
type: GFAnimationType.size,
controller: controller,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
),
Row(
children: [
Expanded(child: SizedBox()),
GFButton(onPressed: () {})
],
)
],
)
6.动画容器：
late AnimationController controller;
late Animation<double> animation;
double fontSize = 30;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
animation = CurvedAnimation(parent: controller, curve: Curves.linear);
controller.repeat();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('这是一段文字'),
GFAnimation(
width: 50,
changedWidth: 100,
height: 50,
changedHeight: 100,
activeColor: Colors.transparent,
color: Colors.transparent,
fontSize: fontSize,
type: GFAnimationType.container,
child: Image.asset(
'images/mypicture.png',
width: 80,
height: 80,
),
),
Row(
children: [
Expanded(child: SizedBox()),
GFButton(text: '这是个按钮', onPressed: () {})
],
)
],
)
23.边框 GFBorder
属性及含义描述
| 属性 | 描述 |
|---|---|
| child | Widget 类型的子元素，可以是任何组件或文本等 |
| padding | child 的填充 |
| strokeWidth | double 类型，用于定义边框的粗细 |
| color | 用于更改边框类型的颜色 |
| dashedLine | 用于实现边框实线和虚线的数组，例如dashedLine: [14, 4], 这里的14代表单个实线长度，4代表虚线长度 |
| type | GFBorderType 的类型，用于定义不同类型的边框，即圆形、矩形 和椭圆形 |
| radius | 边框的圆角属性 |
1.基础样式⬇️：
GFBorder(
color: Color(0xFF19CA4B),
type: GFBorderType.rect,
child: Image.asset(
'images/picture.png',
width: 200,
fit: BoxFit.fitWidth,
),
)
2.虚线边框：
GFBorder(
color: Color(0xFF19CA4B),
// 这里的14代表单个实线长度，4代表虚线长度
dashedLine: [14, 4],
type: GFBorderType.rect,
child: Image.asset(
'images/picture.png',
width: 200,
fit: BoxFit.fitWidth,
),
)
3. 点边框：
GFBorder(
color: Color(0xFF19CA4B),
dashedLine: [1, 2],
type: GFBorderType.rect,
child: Image.asset(
'images/picture.png',
width: 200,
fit: BoxFit.fitWidth,
),
)
4.圆角边框：
GFBorder(
radius: Radius.circular(20),
color: Color(0xFF19CA4B),
dashedLine: [2, 0],
type: GFBorderType.rRect,
child: Container(
height: 100,
color: Color(0xFFE9FFEF),
),
)
5.椭圆形边框：
GFBorder(
type: GFBorderType.oval,
dashedLine: [2, 0],
color: Color(0xFF19CA4B),
strokeWidth: 2,
child: Center(child: Text('Oval Border')),
)
6.圆形边框（虚线、点等同理）：
SizedBox(
width: 100,
height: 100,
child: GFBorder(
type: GFBorderType.circle,
dashedLine: [1, 0],
color: Color(0xFF19CA4B),
strokeWidth: 2,
child: Center(
child: Text(
'Circular Border',
textAlign: TextAlign.center,
)),
),
),
24.底部抽屉 GFBottomSheet
属性及含义描述
| 属性 | 描述 |
|---|---|
| minContentHeight | 内容的最小高度。当 enableExpandableContent 为 false 时生效，必须大于或等于0，默认值为 0 |
| maxContentHeight | 内容的最大高度。必须大于等于0。默认值为300 |
| stickyHeader | GFBottomSheet 的表头。可以通过滑动或点击 stickyHeader 进行交互 |
| contentBody | GFBottomSheet 的主体。可以通过滑动或点击 contentBody 进行交互 |
| stickyFooter | GFBottomSheet 的底部。可以通过滑动或点击 stickyFooter 进行交互 |
| stickyFooterHeight | 定义 GFBottomSheet 的底部高度 |
| stickyHeaderHeight | 定义 GFBottomSheet 的表头高度 |
| elevation | 可以理解为垂直高度，控制 GFBottomSheet 下方的阴影。必须大于等于 0，默认值为 0。 |
| enableExpandableContent | 是否允许 contentBody 展开。默认值为 false。 |
| controller | GFBottomSheet控制器 |
| animationDuration | 展开 / 收起动画持续时长 |
示例代码⬇️：
import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
class GFBottomSheetPage extends StatefulWidget {
const GFBottomSheetPage({Key? key}) : super(key: key);
@override
State<GFBottomSheetPage> createState() => _GFBottomSheetPagePageState();
}
class _GFBottomSheetPagePageState extends State<GFBottomSheetPage> {
final GFBottomSheetController controller = GFBottomSheetController();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
bottomSheet: GFBottomSheet(
animationDuration: 500,
controller: controller,
maxContentHeight: 150,
stickyHeaderHeight: 100,
stickyHeader: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]),
child: const GFListTile(
avatar: GFAvatar(
backgroundImage: AssetImage('images/mypicture.png'),
),
titleText: '晚夜',
subTitleText: 'Flutter工程师',
),
),
contentBody: Container(
height: 250,
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: ListView(
shrinkWrap: true,
physics: const ScrollPhysics(),
children: const [
Center(
child: Text(
'Flutter 是 Google 开源的应用开发框架，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。\n本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善🎉🎉。',
style: TextStyle(
fontSize: 15, wordSpacing: 0.3, letterSpacing: 0.2),
))
],
),
),
stickyFooter: Container(
color: GFColors.SUCCESS,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Flutter轮子推荐',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
'Getwidget',
style: TextStyle(fontSize: 15, color: Colors.white),
),
],
),
),
stickyFooterHeight: 50,
),
floatingActionButton: FloatingActionButton(
backgroundColor: GFColors.SUCCESS,
child: controller.isBottomSheetOpened
? Icon(Icons.keyboard_arrow_down)
: Icon(Icons.keyboard_arrow_up),
onPressed: () {
controller.isBottomSheetOpened
? controller.hideBottomSheet()
: controller.showBottomSheet();
}),
);
}
}
25.复选框 GFCheckbox
属性及含义描述
| 属性 | 描述 |
|---|---|
| type | 复选框类型 |
| size | 复选框尺寸 |
| activeBgColor | 选中背景色 |
| inactiveBgColor | 未选中背景色 |
| activeBorderColor | 选中边框颜色 |
| inactiveBorderColor | 未选中边框颜色 |
| onChanged | 状态改变回调 |
| value | 是否选中 |
| activeIcon | 选中图标样式 |
| inactiveIcon | 未选中图标样式 |
| customBgColor | 自定义样式背景色 |
| autofocus | 在真实状态下，当当前范围内没有其他节点处于焦点时，此复选框将被选为初始焦点 |
| focusNode | 一个可选的焦点节点，用作此复选框的焦点节点。 |
1.基础样式（带圆角）⬇️：
GFCheckbox(
size: GFSize.SMALL,
activeBgColor: GFColors.SUCCESS,
onChanged: (value) {
setState(() {
isChecked = value;
});
},
value: isChecked,
)
2.正方形样式：
type: GFCheckboxType.square,
3.圆形样式：
type: GFCheckboxType.circle,
4.自定义样式：
GFCheckbox(
type: GFCheckboxType.square,
activeBgColor: GFColors.SECONDARY,
activeIcon: Icon(Icons.sentiment_satisfied),
onChanged: (value) {
setState(() {
isChecked = value;
});
},
value: isChecked,
inactiveIcon: Icon(Icons.sentiment_dissatisfied),
)
5.示例：
bool isSmileChecked = false;
bool isMiddleChecked = false;
bool isLargeChecked = false;
GFCard(
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GFCheckbox(
size: GFSize.SMALL,
activeBgColor: GFColors.DANGER,
onChanged: (value) {
setState(() {
isSmileChecked = value;
});
},
value: isSmileChecked,
inactiveIcon: null,
),
GFCheckbox(
activeBgColor: GFColors.SECONDARY,
onChanged: (value) {
setState(() {
isMiddleChecked = value;
});
},
value: isMiddleChecked,
inactiveIcon: null,
),
GFCheckbox(
size: GFSize.LARGE,
activeBgColor: GFColors.SUCCESS,
onChanged: (value) {
setState(() {
isLargeChecked = value;
});
},
value: isLargeChecked,
inactiveIcon: null,
),
],
),
)
