一个顶N个！界面开发提速大杀器Getwidget 🚀（四）

Haoyu
13,767 阅读7分钟

前言

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';

三、🗂 组件示例

16. 导航条 GFAppBar

Appbar_56827a9fff.png.webp

属性及含义介绍

属性描述
leading导航栏左侧组件
automaticallyImplyLeading导航栏左侧默认组件，leading为null时生效
title导航栏标题组件
actions导航栏右侧组件数组
flexibleSpace导航栏后方组件
bottom导航栏底部组件，类型是PreferredSizeWidget，通常为Tabbar
elevation导航栏相对其父组件的高度，影响了阴影效果
shape导航栏及阴影形状
backgroundColor导航栏背景颜色
brightness导航栏亮度，通常与backgroundColor、iconTheme、textTheme一起设置
iconTheme导航栏图标的颜色、大小及透明度
actionsIconTheme导航栏右侧图标的颜色、大小及透明度,若不设置则与iconTheme保持一致
textTheme导航栏标题的文字样式
primary是否填充状态栏高度，flexibleSpace不受此属性的影响，默认true
centerTitle标题栏是否居中显示
titleSpacing导航栏子组件的间隔
toolbarOpacity导航栏子组件的透明度
bottomOpacity导航栏底部组件（bottom）的子组件透明度
searchBar是否显示搜索栏，当title为null时生效，默认false
searchHintText搜索栏提示文字
searchHintStyle搜索栏提示文字风格
searchBarColorTheme搜索栏主题颜色，影响的是边框、搜索按钮、关闭按钮、光标等
searchController输入框控制器，类型为TextEditingController
onTap输入框单击回调
onChanged输入框内容变化回调
onSubmitted输入完成回调

1.GFAppbar与AppBar的属性基本一致,这是一个搭配GFIconBadge的简单示例⬇️：

image.png

GFAppBar(
    backgroundColor: GFColors.DARK,
    title: Text(
        '我的主页',
        style: appBarTitleStyle,
    ),
    centerTitle: false,
    leading: Icon(
        Icons.arrow_back_ios,
        color: GFColors.LIGHT,
        size: 18,
    ),
    titleSpacing: 0,
    actions: [
    Padding(
        padding: EdgeInsets.only(right: 16),
            child: GFIconBadge(
                position: GFBadgePosition.topEnd(top: 5, end: -5),
                child: GFAvatar(
                    radius: 20,
                    backgroundImage: AssetImage('images/mypicture.png'),
                ),
            counterChild: GFBadge(
                text: '6',
                size: 22,
                shape: GFBadgeShape.circle,
        ))),
    ],
),

static const TextStyle appBarTitleStyle = TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 16,
    letterSpacing: 0.2,
    color: GFColors.LIGHT,
);

2. Bottom为导航栏底部组件，注意类型为PreferredSizeWidget，可以通过使用PreferredSize来包裹原组件来使用，PreferredSize的preferredSize在这里的属性代表了其底边距离原GFAppBar底边的距离。

image.png

PreferredSize(
    child: GFTabBar(
    tabBarColor: GFColors.DARK,
    tabBarHeight: 40,
    indicatorColor: GFColors.LIGHT,
    length: 3,
    controller: tabController,
    tabs: [
        Tab(
            child: const Text(
                '动态',
            ),
        ),
        Tab(
            child: const Text(
                '文章',
            ),
        ),
        Tab(
            child: const Text(
                '专栏',
            ),
        ),
    ],
    ),
    preferredSize: Size(double.infinity, 40)
);

3.GFAppbar自带搜索功能，searchBar还提供了监听输入框的三种回调方法，示例如下：

image.png

GFAppBar(
    backgroundColor: GFColors.DARK,
    title: Text(
        '我的主页',
        style: appBarTitleStyle,
    ),
    centerTitle: false,
    leading: Icon(
        Icons.arrow_back_ios,
        color: GFColors.LIGHT,
        size: 18,
    ),
    titleSpacing: 0,
    actions: [
    Padding(
        padding: EdgeInsets.only(right: 16),
            child: GFIconBadge(
                position: GFBadgePosition.topEnd(top: 5, end: -5),
                child: GFAvatar(
                    radius: 20,
                    backgroundImage: AssetImage('images/mypicture.png'),
                ),
            counterChild: GFBadge(
                text: '6',
                size: 22,
                shape: GFBadgeShape.circle,
        ))),
    ],
    searchBar: true,
    searchHintText: '搜索你感兴趣的文章',
    onTap: () {
        // 输入框单机回调
    }, 
    onChanged: (value) {
        // 输入框内容变化回调
    }, 
    onSubmitted: (value) {
        // 提交回调
    }, 
),

17.搜索栏 GFSearchBarPage

Search_bar_f5cf5b7f4d.png.webp

属性及含义介绍

属性描述
searchList数据源数组（必须）
overlaySearchListItemBuilder搜索列表item样式（必须）
searchQueryBuilder根据输入返回相应逻辑的数据列表）
controller控制器，监听输入
onItemSelected搜索结果点击回调
hideSearchBoxWhenItemSelected点击搜索结果是否隐藏搜索栏
overlaySearchListHeight搜索结果列表高度（此高度应为动态值，根据初始数据与搜索结果变化而改变）
noItemsFoundWidget无对应搜索结果时搜索列表显示的组件
searchBoxInputDecoration搜索框样式

下方示例中为包含输入字符串的所有item（区分大小写)⬇️:

search.gif

List list = [
"Flutter",
"React",
"Ionic",
"Xamarin",
];

GFSearchBar(
    searchList: list,
    overlaySearchListItemBuilder: (item) {
        return GFListTile(titleText: item.toString());
    },
    searchQueryBuilder: (query, list) {
        return list
            .where((element) => element.toString().contains(query))
            .toList();
    },
),

18.评分组件 GFRating

Ratings_3fd5700c00.png.webp

属性及含义介绍

属性描述
value分值，double类型
onChanged分值变化回调
itemCountGFRating子组件数量，默认5
spacingGFRating子组件间隔
defaultIcon默认icon
color选中部分icon颜色
borderColor未选中icon颜色
sizeicon尺寸
filledIcon完整选中icon样式
halfFilledIcon选中一半的icon样式
allowHalfRating是否可以通过拖动获取半数的分值，默认true
showTextForm是否显示分数输入框
suffixIcon评分输入框右侧组件
controller输入框控制器
inputDecorations输入框样式
margin输入框外边距
padding输入框内边距

这是一个可以通过点击、拖动、打分的评分组件，使用示例：

123.gif

GFRating(
    value: _rating,
    onChanged: (value) {
        setState(() {
            _rating = value;
        });
    },
),

19.加载动画组件 GFLoader

Loaders_Docs_Banner_24fce5e695.png.webp 属性及含义介绍

属性描述
type样式
loaderColorOne仅适用于圆点和方形样式，第1个圆点（矩形）的颜色
loaderColorTwo仅适用于圆点和方形样式，第2个圆点（矩形）的颜色
loaderColorThree仅适用于圆点和方形样式，第3个圆点（矩形）的颜色
duration仅适用于圆点和方形样式的动画持续时间
loaderIconOne仅适用于自定义样式，将图标、文本或图片用作第1个点
loaderIconTwo仅适用于自定义样式，将图标、文本或图片用作第2个点
loaderIconThree仅适用于自定义样式，将图标、文本或图片用作第3个点
androidLoaderColorAndroid加载器的动画类型
loaderstrokeWidthAndroid加载器线条宽度
size加载器尺寸
child仅适用于自定义样式，优先级高于loaderIconOne等的子组件

1.默认样式（Android风格）⬇️：

nHUo.gif

GFLoader()

2.iOS风格：

ios.gif

GFLoader(
    type: GFLoaderType.ios
)

3.圆形：

yuan.gif

GFLoader(
    type: GFLoaderType.circle
)

4.方形：

fang.gif

GFLoader(
    type: GFLoaderType.square
)

5.自定义样式，示例这里是一张本地的gif图片：

custom.gif

GFLoader(
    type: GFLoaderType.custom,
    child: Image(
        image: AssetImage('images/red_progress.gif'),
    ),
)

20.进度条 GFProgressBar

Progress_bar_docs_banner_9dfae8b20a.png.webp

属性及含义介绍

属性描述
type进度条样式
progressHeadType进度条初始（结束）位置样式，圆形GFProgressHeadType.circular或方形GFProgressHeadType.square
percentage进度百分比
backgroundColor进度条底色
progressBarColor已加载部分颜色
margin外边距
circleWidthdouble类型,定义圆形进度条的圆弧厚度
circleStartAngle圆形进度条初始位置,从上方顶点算起的角度，默认0（上方顶点）
radius圆形进度条尺寸
linearGradientprogressBarColor为null时生效，进度条渐变色
animation是否显示进度条变化时的动画
animationDuration动画时长，animation为true时生效
child子组件，通常显示百分比
autoLive设置为false表示不保留小部件的状态，默认true
animateFromLastPercentage设置为true表示根据设置的最后一个百分比值设置进度条动画，默认false
reverse显示反向进度，默认false
mask创建一个遮罩
lineHeight进度条线条宽度
width进度条总长度，样式不能为圆形
fromRightToLeft设置为true表示为从右到左的进度条
leading进度条左侧组件,仅适用于条形进度条
trailing进度条右侧组件,仅适用于条形进度条
padding内边距
alignment对齐方式
clipLinearGradient设置为true则只显示linearGradient已加载的部分

1.圆形基础样式示例⬇️：

image.png

GFProgressBar(
    percentage: 0.9,
    width: 100,
    radius: 90,
    type: GFProgressType.circular,
    backgroundColor: Colors.black26,
    progressBarColor: GFColors.DANGER,
)

2.带有前后图标的进度条示例：

image.png

GFProgressBar(
    percentage: 0.8,
    lineHeight: 20,
    alignment: MainAxisAlignment.spaceBetween,
    child: const Text(
        '80%',
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 16, color: Colors.white),
    ),
    leading: Icon(
        Icons.sentiment_dissatisfied,
        color: GFColors.DANGER
    ),
    trailing:Icon(
        Icons.sentiment_satisfied, 
        color: GFColors.SUCCESS
    ),
    backgroundColor: Colors.black26,
    progressBarColor: GFColors.INFO,
)
avatar
文章
阅读
粉丝