前言
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';
三、🗂 组件示例
10.Toast提示框 GFToast
属性及含义介绍
| 属性 | 描述 |
|---|---|
| text | 文字 |
| context | 上下文（必须） |
| toastDuration | 位置 |
| backgroundColor | 背景颜色 |
| textStyle | 文字样式 |
| toastBorderRadius | 圆角 |
| border | 边框 |
| trailing | 右侧支持自定义组件 |
1.GFToast是一个需要上下文的提示框，它的构建非常简单⬇️
GFToast.showToast(
'这是一个默认样式的Toast',
context,
);
2.另外可以使用toastPosition来调整提示框位置：
GFToast.showToast(
'GFToast', context,
toastPosition: GFToastPosition.BOTTOM_RIGHT, // 位置
);
3.GFToast的trailing的自定义几乎支持所有样式组件，这是搭配GFIconBadge的一个简单示例：
GFToast.showToast('收到新的消息', context,
toastPosition: GFToastPosition.BOTTOM,
backgroundColor: GFColors.LIGHT,
textStyle: TextStyle(color: GFColors.DARK),
trailing: GFIconBadge(
child: GFAvatar(
backgroundImage: AssetImage('images/mypicture.png'),
),
counterChild: GFBadge(
text: '99+',
)));
11. 开关 GFToggle
属性及含义介绍
| 属性 | 描述 |
|---|---|
| onChanged | 切换回调 |
| value | 默认状态 |
| enabledText | 启用状态文字显示 |
| disabledText | 关闭状态文字显示 |
| enabledTextStyle | 启用状态文字风格 |
| enabledThumbColor | 启用状态按钮颜色 |
| enabledTrackColor | 启用状态背景颜色 |
| disabledTextStyle | 关闭状态文字风格 |
| disabledThumbColor | 关闭状态按钮颜色 |
| disabledTrackColor | 关闭状态背景颜色 |
| type | 样式 |
| boxShape | 自定义样式按钮形状,.rectangle方形 rectangle圆形 |
| borderRadius | 圆角 |
| duration | 切换动画时长 |
1.默认样式：Android
GFToggle(
onChanged: (value) {},
value: false,
)
2.iOS风格
GFToggle(
onChanged: (val){},
value: true,
type: GFToggleType.ios,
)
3.方形
GFToggle(
onChanged: (val){},
value: true,
type: GFToggleType.square,
)
4.自定义样式（1、2为安卓样式加圆角、修改按钮形状，3、4为iOS样式加圆角、修改按钮形状）
GFToggle(
onChanged: null,
value: true,
type: GFToggleType.custom,
),
12.文字排版 GFTypography
GFTypography给定了一套标准，支持加头部组件、背景图文字样式。你可以使用它轻松统一项目中的标题文字样式。
属性及含义介绍
| 属性 | 描述 |
|---|---|
| text | 标题文字 |
| type | 标题类型，有typo1-typo6六种 |
| textColor | 标题文字颜色 |
| fontWeight | 标题字重 |
| child | 子组件，text为null时生效 |
| icon | 头部组件，虽然叫icon，其实放什么都可以 |
| dividerBorderRadius | 更改分割线圆角属性 |
| dividerAlignment | 分割线对齐方式 |
| dividerColor | 分割线颜色 |
| showDivider | 是否展示分割线 |
| dividerWidth | 分割线宽度 |
| dividerHeight | 分割线高度 |
| backgroundImage | 背景图片 |
| backgroundImagecolorFilter | 背景图片遮罩层 |
1.默认样式，typo1-typo6⬇️
GFTypography(
text: 'GF Header Typo1',
type: GFTypographyType.typo1,
),
2.自定义样式：加头部组件、背景图片：
GFTypography(
text: '现在出去做你想做的事。',
type: GFTypographyType.typo1,
showDivider: false,
icon: GFAvatar(
backgroundImage: AssetImage('images/mypicture.png'),
),
backgroundImage: AssetImage('images/backimage.png')
),
13.抽屉 GFDrawer
属性及含义介绍
| 属性 | 描述 |
|---|---|
| elevation | 抽屉的垂直高度（z坐标），控制阴影效果 |
| semanticLabel | 语意标签 |
| backgroundImage | 抽屉背景图 |
| colorFilter | 遮罩层 |
| gradient | 渐变背景色，backgroundImage为空时生效 |
| color | 背景色，backgroundImage为空时生效 |
| child | 抽屉内容组件 |
1.初步构建⬇️：
import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
class GFDrawerPage extends StatefulWidget {
const GFDrawerPage({Key? key}) : super(key: key);
@override
State<GFDrawerPage> createState() => _GFDrawerPagePageState();
}
class _GFDrawerPagePageState extends State<GFDrawerPage> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
_scaffoldKey.currentState!.openDrawer();
},
child: Scaffold(
// 若要通过非拖动手势唤起抽屉则需指定Key
key: _scaffoldKey,
drawer: GFDrawer(),
),
);
}}
2.Getwidget为我们提供了一个快速创建抽屉头部的组件：GFDrawerHeader, 但作者认为用处不大，定制性低、位置调整也不方便，因为抽屉头部组件在项目中几乎不会复用，所以还是建议用自己的方式写好一些，下面是一个GFDrawerHeader的简单示例：
GFDrawerHeader(
currentAccountPicture: GFAvatar(
radius: 80.0,
backgroundImage: NetworkImage(
"https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"),
),
otherAccountsPictures: <Widget>[
Image(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"),
fit: BoxFit.cover,
),
GFAvatar(
child: Text("ab"),
)
],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('user name'),
Text('user@userid.com'),
],
),
),
14.弹窗 GFAlert
属性及含义介绍
| 属性 | 描述 |
|---|---|
| alignment | 对齐方式 |
| backgroundColor | 背景颜色 |
| title | 标题 |
| content | 内容 |
| type | 弹窗类型 |
| child | 标题组件，title为null时生效 |
| width | 弹窗宽度 |
| contentChild | 内容组件，content为null时生效 |
| contentTextStyle | 内容文本风格 |
| titleTextStyle | 标题文本风格 |
| bottombar | 弹窗底部组件数组 |
1.GFAlert作为Getwidget中唯一的弹窗组件，在使用便捷性上表现的有些不尽人意，必须搭配GFFloatingWidget（见上篇）来使用，不过它并非一个真正意义上的弹窗，只是对常用弹窗样式的结构进行了简单封装，然后借用浮动组件来展示。这是一个简单的使用示例⬇️：
class GFAlertPage extends StatefulWidget {
const GFAlertPage({Key? key}) : super(key: key);
@override
State<GFAlertPage> createState() => _GFAlertPagePageState();
}
class _GFAlertPagePageState extends State<GFAlertPage> {
bool showblur = false;
Widget alertWidget = SizedBox();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
showblur = true;
alertWidget = GFAlert(
alignment: Alignment.center,
title: 'GFAlert标题',
content: 'GFAlert内容部分，GFAlert需要搭配浮动组件GFFloatingWidget使用',
type: GFAlertType.rounded,
bottombar: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
GFButton(
onPressed: () {
setState(() {
alertWidget = SizedBox();
showblur = false;
});
},
color: GFColors.LIGHT,
child: const Text(
'好的',
style: TextStyle(color: Colors.black),
),
),
],
),
);
});
},
child: Scaffold(
appBar: AppBar(
backgroundColor: GFColors.DARK,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
child: Icon(
CupertinoIcons.back,
color: GFColors.SUCCESS,
),
)),
title: const Text(
'GFAlert',
style: TextStyle(fontSize: 17),
),
centerTitle: true,
),
body: GFFloatingWidget(
verticalPosition: 150,
showBlurness: showblur,
child: alertWidget,
),
));
}
}
15.折叠卡片 GFAccordion
属性及含义介绍
| 属性 | 描述 |
|---|---|
| title | 标题文本 |
| content | 内容文本 |
| titleChild | 标题组件，title为null时生效 |
| collapsedIcon | 折叠状态下的标题右侧组件 |
| contentChild | 内容组件，content为null时生效 |
| collapsedTitleBackgroundColor | 折叠状态下的标题背景颜色 |
| expandedTitleBackgroundColor | 展开状态下的标题背景颜色 |
| expandedIcon | 展开状态下的标题右侧组件 |
| titlePadding | 标题容器内边距 |
| textStyle | 标题文字风格 |
| contentBackgroundColor | 内容背景颜色 |
| contentPadding | 内容容器内边距 |
| titleBorder | 标题边框 |
| contentBorder | 内容边框 |
| margin | 外边距 |
| showAccordion | 控制是否折叠或从外部控制 |
| onToggleCollapsed | 状态切换回调，true：展开，false：折叠 |
| titleBorderRadius | 标题圆角 |
| contentBorderRadius | 内容圆角 |
1.GFAccordion是一个简洁优秀的折叠组件,常常用于资料卡、文字介绍栏等处，这是一个基础示例⬇️：
GFAccordion(
title: 'GF Accordion',
content: '这是一个默认样式的折叠卡片.',
),
2.也可根据自己的需求搭配其他组件使用，示例2：
GFAccordion(
titleChild: GFTypography(
text: '个人资料',
),
expandedTitleBackgroundColor: Colors.amber,
contentBackgroundColor: Colors.blue[100],
collapsedIcon: Text('展开'),
expandedIcon: Text('收起'),
contentChild: GFListTile(
titleText: '晚夜',
subTitleText: 'Flutter工程师',
icon: Icon(
Icons.favorite,
color: Colors.red,
),
color: Colors.transparent,
avatar: GFAvatar(
backgroundImage: AssetImage('images/mypicture.png'),
),
)),
