前言
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';
三、🗂 组件示例
26.可选列表模板 GFCheckboxListTile
属性及含义介绍
属性 | 描述 |
---|---|
titleText | String 类型,替代 title 属性并获得比 title 更高的优先级 |
subTitleText | String 类型,替代 subtitle 属性并获得比 subtitle 更高的优先级 |
color | 背景颜色 |
avatar | 头像位置组件,可以是任意类型的Widget |
title | 在 GFListTile 中显示的标题组件 |
subTitle | 在 GFListTile 中显示的副标题组件 |
description | 在 GFListTile 中显示的描述组件 |
position | 可调整复选框的位置为开始或结束 |
margin | 定义 GFListTile 的边距 |
padding | 定义 GFListTile 的填充 |
type | GFCheckboxType 的类型有四种,基本型、方形、圆形和自定义 |
size | double 类型,即 GFSize ,即小、中和大,也可以使用任何double 值 |
activeBgColor | 选中状态下复选框的背景颜色 |
inactiveBgColor | 未选中状态下复选框的背景颜色 |
activeBorderColor | 选中状态下复选框的边框颜色 |
inactiveBorderColor | 未选中状态下复选框的边框颜色 |
onChanged | 当用户选中或取消选中复选框时调用 |
value | 用于设置复选框的当前的选中状态 |
activeIcon | 选中状态下的复选框图标,Widget 类型 |
inactiveIcon | 未选中状态下的复选框图标,Widget 类型 |
customBgColor | 自定义复选框的背景颜色 |
selected | 默认 false |
autofocus | 如果当前范围内没有其他节点处于焦点时,是否将此组件选为初始焦点 |
使用示例⬇️:
bool isChecked = false;
GFCheckboxListTile(
titleText: 'Wanye',
subTitleText: 'Flutter 工程师',
avatar: GFAvatar(
backgroundImage: AssetImage('images/mypicture.png'),
),
size: 20,
activeBgColor: GFColors.SUCCESS,
type: GFCheckboxType.circle,
color: isChecked ? Colors.blue[100] : Colors.white,
activeIcon: Icon(
Icons.check,
size: 15,
color: Colors.white,
),
onChanged: (value) {
setState(() {
isChecked = value;
});
},
value: isChecked,
inactiveIcon: null,
selected: true,
)
27.下拉选择框 GFMultiSelect
属性及含义描述
属性 | 描述 |
---|---|
items | 定义用户可以选择的项目列表 |
onSelect | 用户从下拉列表中选择项目时的回调,value 为所选项目索引的列表 |
dropdownTitleTileText | String 类型,定义 dropdownTitleTile 标题 |
dropdownTitleTileTextStyle | TextStyle 类型,定义 dropDownTitleTileText 的文本风格 |
dropdownTitleTileHintText | String 类型,定义 dropdownTitleTile 提示文本 |
dropdownTitleTileHintTextStyle | TextStyle 类型,定义提示文本文字风格 |
dropdownTitleTileBorderRadius | 定义 dropdownTitleTile 的边框半径 |
dropdownTitleTileBorder | 定义 dropdownTitleTile 的边框。 |
dropdownTitleTileColor | 定义 dropdownButton 的背景颜色 |
hideDropdownUnderline | 定义搜索框下划线是否隐藏,默认 false |
dropdownUnderlineBorder | 定义搜索框下划线样式 |
dropdownTitleTileMargin | 定义 dropdownTitleTile 边距 |
dropdownTitleTilePadding | 定义 dropdownTitleTile 填充 |
expandedIcon | 定义下拉菜单可见时 dropdownTitleTile 的尾随图标 |
collapsedIcon | 定义下拉菜单不可见时 dropdownTitleTile 的尾随图标 |
submitButton | 定义下拉菜单中的按钮 |
color | 定义下拉复选框背景颜色 |
avatar | Widget 或 GFAvatar 的类型,用于定义下拉复选框 ListTile 的前导 |
margin | 定义下拉复选框 ListTile 的边距 |
padding | 定义下拉复选框 ListTile 的填充 |
type | 定义复选框类型:基本、方形、圆形和自定义 |
size | 定义复选框尺寸 |
activeBgColor | 复选框选中状态下的背景颜色 |
inactiveBgColor | 复选框未选中状态下的背景颜色 |
activeBorderColor | 复选框选中状态下的边框颜色 |
inactiveBorderColor | 复选框未选中状态下的边框颜色 |
activeIcon | 复选框选中状态下的图标 |
inactiveIcon | 复选框未选中状态下的图标 |
customBgColor | 自定义复选框背景颜色 |
selected | 默认flase |
dropdownBgColor | 下拉列表背景颜色 |
示例:
List dropList = ['Flutter', 'Andiord', 'iOS'];
GFMultiSelect(
items: dropList,
onSelect: (value) {
print('selected $value ');
},
dropdownTitleTileText: '选择你感兴趣的内容...',
dropdownTitleTileMargin:
EdgeInsets.only(top: 22, left: 18, right: 18, bottom: 5),
dropdownTitleTilePadding: EdgeInsets.all(10),
hideDropdownUnderline: true,
dropdownTitleTileBorder: Border.all(color: Colors.grey, width: 1),
dropdownTitleTileBorderRadius: BorderRadius.circular(5),
expandedIcon: const Icon(
Icons.keyboard_arrow_down,
color: Colors.black54,
),
collapsedIcon: const Icon(
Icons.keyboard_arrow_up,
color: Colors.black54,
),
submitButton: Text('确定'),
cancelButton: Text('取消'),
dropdownTitleTileTextStyle:
const TextStyle(fontSize: 14, color: Colors.black54),
padding: const EdgeInsets.all(6),
margin: const EdgeInsets.all(6),
type: GFCheckboxType.basic,
activeBgColor: GFColors.SUCCESS,
activeBorderColor: GFColors.SUCCESS,
inactiveBorderColor: Colors.grey,
selected: true,
)
28.介绍屏 GFIntroScreen
属性及含义介绍
属性 | 描述 |
---|---|
slides | 分页列表数据数组 |
pageController | 分页控制器 |
color | 分页底部背景色 |
height | 组件高度 |
width | 组件高度 |
borderRadius | 圆角 |
border | 边框 |
introScreenBottomNavigationBar | 底部导航栏 |
showIntroScreenBottomNavigationBar | 是否显示底部导航栏 |
currentIndex | 定义当前index,默认0 |
pageCount | 定义分页长度,默认0 |
child | 底部导航栏子组件,可以是任意类型的Widget |
navigationBarHeight | 底部导航栏高度 |
navigationBarWidth | 底部导航栏宽度 |
navigationBarPadding | 底部导航栏填充 |
navigationBarMargin | 底部导航栏边距 |
navigationBarColor | 底部导航栏背景色 |
navigationBarShape | 底部导航栏形状 |
onForwardButtonTap | 点击 forwardButtonText 时调用 |
onBackButtonTap | 点击 backButtonText 时调用 |
onDoneTap | 点击 doneButtonText 时调用 |
onSkipTap | 点击 skipButtonText 时调用 |
backButton | Widget类型,用于替换backButtonText |
forwardButton | Widget类型,用于替换forwardButtonText |
doneButton | Widget类型,用于替换doneButtonText |
skipButton | Widget类型,用于替换skipButtonText |
backButtonText | String类型,对应backButton |
forwardButtonText | String类型,对应forwardButton |
doneButtonText | String类型,对应doneButton |
skipButtonText | String类型,对应skipButton |
skipButtonTextStyle | skipButtonText 文本样式 |
doneButtonTextStyle | doneButtonText 文本样式 |
backButtonTextStyle | backButtonText 文本样式 |
forwardButtonTextStyle | forwardButtonText 文本样式 |
showDivider | 是否显示分割线,默认 true |
showButton | 是否显示按钮,默认 true |
showPagination | 是否显示分页圆点,默认 true |
dividerHeight | 分割线组件高度 |
dividerThickness | 分割线厚度(一般小于 dividerHeight ) |
dividerColor | 分割线颜色 |
dotShape | 分页圆点形状 |
inactiveColor | 非当前分页圆点颜色 |
activeColor | 当前分页圆点颜色 |
dotHeight | 分页圆点高度 |
dotWidth | 分页圆点宽度 |
dotMargin | 分页圆点边距 |
GFIntroScreen
的定制属性还是挺多的,但其实大部分情况都很难使用它来百分百的还原设计图。这里提供一个参考示例(取消宽高则全屏显示)⬇️:
PageController pageController = PageController();
List<Widget> slideList = [];
int initialPage = 0;
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
// 取消宽高则全屏显示
width: 300,
height: 250,
child: ClipRect(
child: GFIntroScreen(
borderRadius: BorderRadius.all(Radius.circular(20)),
border: Border.all(width: 0),
color: Colors.white,
showIntroScreenBottomNavigationBar: true,
slides: slides(),
pageController: pageController,
currentIndex: initialPage,
pageCount: 3,
introScreenBottomNavigationBar: GFIntroScreenBottomNavigationBar(
skipButtonText: '跳过',
backButtonText: '返回',
forwardButtonText: '继续',
doneButtonText: '开始',
inactiveColor: Colors.white,
navigationBarColor: Colors.green,
pageController: pageController,
pageCount: slideList.length,
currentIndex: initialPage,
navigationBarShape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
),
),
),
clipBehavior: Clip.antiAlias,
),
),
),
);
}
List<Widget> slides() {
slideList = [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
color: Colors.red,
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
color: Colors.yellow,
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
color: Colors.blue,
),
),
];
return slideList;
}
29.单选框 GFRadio
属性及含义介绍
属性 | 描述 |
---|---|
type | GFRadioType 类型,分为基本、方形、圆形和自定义 |
size | double 类型,即 GFSize 中的小、中和大,也可以任何double 值 |
radioColor | 单选按钮中心圆点的颜色 |
activeBgColor | 选中状态的背景颜色 |
inactiveBgColor | 未选中时的背景颜色 |
activeBorderColor | 选中状态的边框颜色 |
inactiveBorderColor | 未选中时的边框颜色 |
onChanged | 当用户选中或取消单选按钮时调用 |
activeIcon | Widget 类型,用于更改选中按钮的图标,自定义类型下生效 |
inactiveIcon | Widget 类型,用于更改未选中按钮的图标,自定义类型下生效 |
customBgColor | 更改自定义类型下的背景颜色 |
autofocus | 若当前范围内没有其他节点处于焦点时,是否将此组件选为初始焦点 |
focusNode | 一个可选的焦点节点,用作此小部件的焦点节点。 |
value | 此单选按钮对应的值 |
groupValue | 一组单选按钮的当前选定值。 如果单选按钮的 value 与 groupValue 匹配,则认为单选按钮被选中。 |
toggleable | 是否设置单选按钮值,默认 false |
1.基础样式的单选按钮⬇️:
int groupValue = 0;
GFRadio(
value: 0,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
),
GFRadio(
value: 1,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
)
2.自定义样式示例:
int groupValue = 0;
GFCard(
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GFRadio(
type: GFRadioType.custom,
activeIcon: Icon(Icons.check),
radioColor: Colors.red,
size: GFSize.LARGE,
activeBgColor: GFColors.SUCCESS,
inactiveBorderColor: GFColors.DARK,
activeBorderColor: GFColors.SUCCESS,
value: 12,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
),
GFRadio(
type: GFRadioType.custom,
activeIcon: Icon(Icons.sentiment_satisfied),
size: GFSize.MEDIUM,
value: 13,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
inactiveIcon: Icon(Icons.sentiment_dissatisfied),
customBgColor: GFColors.WARNING,
activeBgColor: GFColors.SUCCESS,
activeBorderColor: GFColors.SUCCESS,
),
GFRadio(
type: GFRadioType.blunt,
size: GFSize.SMALL,
value: 14,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
inactiveIcon: null,
customBgColor: GFColors.SUCCESS,
activeBorderColor: GFColors.SUCCESS,
),
GFRadio(
type: GFRadioType.blunt,
size: 25,
value: 15,
groupValue: groupValue,
onChanged: (value) {
setState(() {
groupValue = value as int;
});
},
inactiveIcon: null,
activeBorderColor: GFColors.SUCCESS,
customBgColor: GFColors.SUCCESS,
),
],
)
),
30.粘性标题 GFStickyHeader
属性及含义介绍
属性 | 描述 |
---|---|
stickyContent | Widget 类型,定义标题内容 |
content | Widget 类型,定义内容 |
enableHeaderOverlap | 为true 时,stickyContent 将与 content 重叠。仅在方向为 Axis.vertical 时有效。 默认 false |
stickyContentPosition | 内容位置,默认为 GFPosition.start |
callback | 允许添加自定义的 stickyHeader 卡住偏移值 |
direction | 允许子级以垂直/水平方式对齐,默认为 Axis.vertical |
stickyContentBuilder | builder 小部件可用于定义 stickyContentBuilder |
粘性标题列表是项目开发中一个比较常见的需求,它要求列表滚动过程中当前分区的表头始终吸附在列表顶部,使用 GFStickyHeader 可以帮我们简单快捷的实现这个功能,这是一个示例⬇️:
ListView.builder(itemBuilder: (context, index) {
return GFStickyHeader(
stickyContent: Container(
height: 30,
width: double.infinity,
color: Colors.blueGrey[700],
child: Text('标题 ' + index.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
)),
),
content: Container(
height: 90,
color: Colors.green[100],
child: Center(
child: Text('内容 ' + index.toString(),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
))),
));
})
结语
至此,Getwidget系列组件及基本使用方式就已经介绍完毕了,如有疏漏不当的地方请指出,作者会第一时间修正。整理不易,如果对你有帮助的话,不妨点赞评论支持一下吧 ~🎉🎉🎉