一个顶N个!Flutter界面开发提速大杀器Getwidget 🚀(六)

2,717 阅读8分钟

前言

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

GW_Checkbox_list_tile_544263f6c0.png.webp

属性及含义介绍

属性描述
titleTextString 类型,替代 title 属性并获得比 title 更高的优先级
subTitleTextString 类型,替代 subtitle 属性并获得比 subtitle 更高的优先级
color背景颜色
avatar头像位置组件,可以是任意类型的Widget
titleGFListTile 中显示的标题组件
subTitleGFListTile 中显示的副标题组件
descriptionGFListTile 中显示的描述组件
position可调整复选框的位置为开始或结束
margin定义 GFListTile 的边距
padding定义 GFListTile 的填充
typeGFCheckboxType 的类型有四种,基本型、方形、圆形和自定义
sizedouble 类型,即 GFSize,即小、中和大,也可以使用任何double
activeBgColor选中状态下复选框的背景颜色
inactiveBgColor未选中状态下复选框的背景颜色
activeBorderColor选中状态下复选框的边框颜色
inactiveBorderColor未选中状态下复选框的边框颜色
onChanged当用户选中或取消选中复选框时调用
value用于设置复选框的当前的选中状态
activeIcon选中状态下的复选框图标,Widget 类型
inactiveIcon未选中状态下的复选框图标,Widget 类型
customBgColor自定义复选框的背景颜色
selected默认 false
autofocus如果当前范围内没有其他节点处于焦点时,是否将此组件选为初始焦点

使用示例⬇️:

wanye.gif

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

GW_multiselect_e249e13190.png.webp

属性及含义描述

属性描述
items定义用户可以选择的项目列表
onSelect用户从下拉列表中选择项目时的回调,value 为所选项目索引的列表
dropdownTitleTileTextString 类型,定义 dropdownTitleTile 标题
dropdownTitleTileTextStyleTextStyle 类型,定义 dropDownTitleTileText 的文本风格
dropdownTitleTileHintTextString 类型,定义 dropdownTitleTile 提示文本
dropdownTitleTileHintTextStyleTextStyle 类型,定义提示文本文字风格
dropdownTitleTileBorderRadius定义 dropdownTitleTile 的边框半径
dropdownTitleTileBorder定义 dropdownTitleTile 的边框。
dropdownTitleTileColor定义 dropdownButton 的背景颜色
hideDropdownUnderline定义搜索框下划线是否隐藏,默认 false
dropdownUnderlineBorder定义搜索框下划线样式
dropdownTitleTileMargin定义 dropdownTitleTile 边距
dropdownTitleTilePadding定义 dropdownTitleTile 填充
expandedIcon定义下拉菜单可见时 dropdownTitleTile 的尾随图标
collapsedIcon定义下拉菜单不可见时 dropdownTitleTile 的尾随图标
submitButton定义下拉菜单中的按钮
color定义下拉复选框背景颜色
avatarWidgetGFAvatar 的类型,用于定义下拉复选框 ListTile 的前导
margin定义下拉复选框 ListTile 的边距
padding定义下拉复选框 ListTile 的填充
type定义复选框类型:基本、方形、圆形和自定义
size定义复选框尺寸
activeBgColor复选框选中状态下的背景颜色
inactiveBgColor复选框未选中状态下的背景颜色
activeBorderColor复选框选中状态下的边框颜色
inactiveBorderColor复选框未选中状态下的边框颜色
activeIcon复选框选中状态下的图标
inactiveIcon复选框未选中状态下的图标
customBgColor自定义复选框背景颜色
selected默认flase
dropdownBgColor下拉列表背景颜色

示例: text.gif

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

screen.gif

属性及含义介绍

属性描述
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 时调用
backButtonWidget类型,用于替换backButtonText
forwardButtonWidget类型,用于替换forwardButtonText
doneButtonWidget类型,用于替换doneButtonText
skipButtonWidget类型,用于替换skipButtonText
backButtonTextString类型,对应backButton
forwardButtonTextString类型,对应forwardButton
doneButtonTextString类型,对应doneButton
skipButtonTextString类型,对应skipButton
skipButtonTextStyleskipButtonText文本样式
doneButtonTextStyledoneButtonText文本样式
backButtonTextStylebackButtonText文本样式
forwardButtonTextStyleforwardButtonText文本样式
showDivider是否显示分割线,默认 true
showButton是否显示按钮,默认 true
showPagination是否显示分页圆点,默认 true
dividerHeight分割线组件高度
dividerThickness分割线厚度(一般小于 dividerHeight
dividerColor分割线颜色
dotShape分页圆点形状
inactiveColor非当前分页圆点颜色
activeColor当前分页圆点颜色
dotHeight分页圆点高度
dotWidth分页圆点宽度
dotMargin分页圆点边距

GFIntroScreen 的定制属性还是挺多的,但其实大部分情况都很难使用它来百分百的还原设计图。这里提供一个参考示例(取消宽高则全屏显示)⬇️:

page.gif

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

Radio_button_docs_banner_b65d35fa4c.png.webp

属性及含义介绍

属性描述
typeGFRadioType 类型,分为基本、方形、圆形和自定义
sizedouble 类型,即 GFSize 中的小、中和大,也可以任何double
radioColor单选按钮中心圆点的颜色
activeBgColor选中状态的背景颜色
inactiveBgColor未选中时的背景颜色
activeBorderColor选中状态的边框颜色
inactiveBorderColor未选中时的边框颜色
onChanged当用户选中或取消单选按钮时调用
activeIconWidget 类型,用于更改选中按钮的图标,自定义类型下生效
inactiveIconWidget 类型,用于更改未选中按钮的图标,自定义类型下生效
customBgColor更改自定义类型下的背景颜色
autofocus若当前范围内没有其他节点处于焦点时,是否将此组件选为初始焦点
focusNode一个可选的焦点节点,用作此小部件的焦点节点。
value此单选按钮对应的值
groupValue一组单选按钮的当前选定值。 如果单选按钮的 valuegroupValue 匹配,则认为单选按钮被选中。
toggleable是否设置单选按钮值,默认 false

1.基础样式的单选按钮⬇️:

chose.gif

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.自定义样式示例:

custom.gif

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

Sticky_headers_docs_baner_compressed_-_a1zk2C7.gif

属性及含义介绍

属性描述
stickyContentWidget 类型,定义标题内容
contentWidget 类型,定义内容
enableHeaderOverlaptrue时,stickyContent 将与 content 重叠。仅在方向为 Axis.vertical 时有效。 默认 false
stickyContentPosition内容位置,默认为 GFPosition.start
callback允许添加自定义的 stickyHeader 卡住偏移值
direction允许子级以垂直/水平方式对齐,默认为 Axis.vertical
stickyContentBuilderbuilder 小部件可用于定义 stickyContentBuilder

粘性标题列表是项目开发中一个比较常见的需求,它要求列表滚动过程中当前分区的表头始终吸附在列表顶部,使用 GFStickyHeader 可以帮我们简单快捷的实现这个功能,这是一个示例⬇️:

nian.gif

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系列组件及基本使用方式就已经介绍完毕了,如有疏漏不当的地方请指出,作者会第一时间修正。整理不易,如果对你有帮助的话,不妨点赞评论支持一下吧 ~🎉🎉🎉