Flutter好用的轮子推荐05：一个顶N个！界面开发提速大杀器Getwidget ?（一）

前言

Flutter 是 Google 开源的应用开发框架，仅通过一套代码就能构建支持Android、iOS、Windows、Linux等多平台的应用。Flutter的性能非常高，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。

本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善??。

多图长文预警⚠️⚠️⚠️

由于Getwidget内含组件十分丰富，涵盖了按钮、图片、轮播图、Tabbar、弹窗…等高达三十多类常用组件，不得已将其分为五篇文章介绍，可在右侧目录查看相关组件的详细介绍。

正文

一、? 轮子介绍

• 名称：getwidget
• 概述：GetWidget完全免费，内置了1000多个预构建的小组件，您可以使用这些小组件加快自己开发进程并构建出色的应用。
• 出版商：navin10sharma@gmail.com
• 仓库地址：getwidget
• 推荐指数： ⭐️⭐️⭐️⭐️⭐️
• 常用指数： ⭐️⭐️⭐️⭐️⭐️
• 预览：

二、⚙️ 安装及使用

dependencies:
  getwidget: ^2.0.5
复制代码

import 'package:getwidget/getwidget.dart';
复制代码

三、? 组件示例

1. 按钮 GFButton

属性及含义介绍

属性	含义
onPressed	单击回调
onLongPress	长按回调
onHighlightChanged	监听按钮点击状态的回调： value -> true : 按钮按下 value -> false : 按钮松开
text	按钮文字
textStyle	文本样式
boxShadow	阴影效果
buttonBoxShadow	按钮阴影效果，默认false，当boxShadow属性不为空时失效
hoverColor	鼠标指针悬停时的按钮颜色
highlightColor	按钮高亮颜色
splashColor	水波纹颜色
elevation	按钮启用但未按下时的高度
hoverElevation	指针悬停时的按钮高度
highlightElevation	按钮高亮时的高度
disabledElevation	按钮未启用时的高度
padding	按钮内边距
constraints	按钮最大/小尺寸限制
borderShape	定义边框的形状
animationDuration	按钮动画时长
clipBehavior	裁剪样式
focusNode	按钮焦点
autofocus	当前没有其他组件处于焦点时，是否将此组件选为初始焦点
materialTapTargetSize	可点击范围
child	子组件，通常是按钮文字，Text不为空时此项失效
type	按钮样式
color	按钮颜色
textColor	按钮文字颜色
position	icon位置
size	按钮尺寸（高度）
borderSide	按钮边框
icon	图标
blockButton	设为true将按钮宽度设为全宽，左右各留一部分间距
fullWidthButton	全宽按钮
colorScheme	主题颜色
enableFeedback	声音/震动反馈
disabledColor	按钮禁用时的填充颜色
disabledTextColor	按钮禁用时的文字颜色

1.Button几乎是App中使用最多的组件，可以看到GFButton可定制的属性非常多，但它的初步构建非常简单，你只需要为它指定点击回调方法，就可以得到一个：⬇️

GFButton(
    text: 'GFButton',
    onPressed: () {},
)
复制代码

2.设为不可点击只需将onPressed置为null：

GFButton(
    text: 'GFButton',
    onPressed: null,
)
复制代码

3.type设置GFButton的按钮样式:

4.shape设置GFButton的按钮形状:

5.fullWidthButton 或 blockButton若为true,则代表GFButton的宽度为其所在父组件能为其分配的最大宽度，它们的区别在于,若其父组件宽度为全屏宽度时blockButton会为其左右各留出部分间距：

6.size设置按钮的高度，GFButton给定了三种规格尺寸的高度，也可以直接设置：

7.icon属性实现了一个带有图标的按钮，可以使用position调整icon位置：

8.单图标类型的按钮可以使用GFIconButton:

GFIconButton(
    icon: Icon(Icons.star),
    onPressed: () {}
)
复制代码

上面的示例仅介绍了GFButton的几个常用属性，它的可定制性远远不止如此，大家可参考属性及含义介绍自己尝试一下。

2.角标 GFBadge

属性及含义介绍

属性	含义
text	角标文本
color	角标背景颜色
textColor	角标文本颜色
shape	角标形状，circle、pills、square、默认standard
size	角标尺寸，LARGE、MEDIUM、SMALL或自定义尺寸（double）
border	边框
child	子组件，一般为文本，若text不为空则此项失效

1.GFBadge是在组件上用于提示的角标，通常将文本作为子组件，GFBadge默认形状是带圆角的矩形。⬇️

// 默认
GFBadge(
  text: '9',
),

// 圆点
GFBadge(
  shape: GFBadgeShape.circle,
  size: 15,
),
复制代码

2.使用GFButtonBadge或GFButton都可以实现一个带有角标的按钮，GFButtonBadge默认会将角标显示在右侧，也可以通过position来调整位置。

GFButtonBadge(
  text: 'GFButtonBadge',
  onPressed: () {},
  icon: const GFBadge(
    child: Text("12"),
  ),
),

GFButton(
  onPressed: () {},
  text: 'GFButton',
  icon: const GFBadge(
    child: Text("12"),
  ),
)
复制代码

3.若要将角标显示在角落位置，可以使用GFIconBadge，它的灵活性在于，你可以将GFIconButton、GFButton甚至是一张图片、一个Container等几乎任何组件作为其子组件来使用。

 GFIconBadge(
   child: GFIconButton(
     onPressed: () {},
     icon: const Icon(Icons.ac_unit),
   ),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
 
 GFIconBadge(
   child: Image.asset(
     'images/picture.png',
     width: 50,
   ),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
 
 GFIconBadge(
   child: GFButton(onPressed: () {}, text: 'GFButton'),
   counterChild: const GFBadge(
     child: Text("12"),
     shape: GFBadgeShape.circle,
   ),
 ),
复制代码

4.GFIconBadge 可以使用position来调整其位置，分别为GFBadgePosition.topEnd、GFBadgePosition.topStart 、GFBadgePosition.bottomEnd 、GFBadgePosition.bottomStart ，对应以四角作为坐标原点时角标向内侧的偏移量。

3.头像 GFAvatar

属性及含义介绍

属性	含义
backgroundImage	头像图片
backgroundColor	背景色
child	子组件
foregroundColor	子组件颜色
radius	头像半径
maxRadius	最大半径
minRadius	最小半径
borderRadius	头像圆角，形状不为圆形时可用
shape	头像形状，square、standard以及默认circle

GFAvatar是一个简单可定制的图片组件，以下代码实现三个形状不同的头像：⬇️

// 默认圆形
GFAvatar(
    backgroundImage: NetworkImage(AvatarUrl),
),

// 矩形
GFAvatar(
    backgroundImage: NetworkImage(AvatarUrl),
    shape: GFAvatarShape.square,
),

// 带圆角的矩形
GFAvatar(
    backgroundImage: NetworkImage(AvatarUrl),
    shape: GFAvatarShape.standard,
),
复制代码

4.图片 GFImage

属性及含义介绍

属性	含义
image	可以为本地图片或网络图片，支持Gif格式图片
height	高度
width	宽度
color	背景色
child	子组件
colorFilter	遮罩，示例：colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.darken) （黑色半透明遮罩）
padding	内边距
margin	外边距
borderRadius	圆角
border	边框
boxFit	图片显示样式，是否拉伸或缩放
shape	图片形状，BoxShape.rectangle、BoxShape.circle

1.GFImageOverlay支持动态图片和静态图片,下面代码示例中实现了三种形状的图片：⬇️

// 默认矩形
GFImageOverlay(
    width: 150,
    height: 150,
    image: AssetImage('images/picture.png'),
),

// 圆形
GFImageOverlay(
    height: 150,
    image: AssetImage('images/picture.png'),
    shape: BoxShape.circle,
),

// 带圆角的矩形
GFImageOverlay(
    width: 150,
    height: 150,
    image: AssetImage('images/picture.png'),
    borderRadius: BorderRadius.all(Radius.circular(20)),
),
复制代码

2.带子组件的半透明黑色遮罩图片示例：

GFImageOverlay(
    height: 200,
    child: Center(
        child: Text('Light Overlay',
        style: TextStyle(color: GFColors.LIGHT)),
    ),
    image: AssetImage('images/picture.png'),
    colorFilter: ColorFilter.mode(
    Colors.black.withOpacity(0.5), BlendMode.darken),
    boxFit: BoxFit.cover,
    shape: BoxShape.circle,
),
复制代码

5.卡片 GFCard

属性及含义介绍

属性	含义
color	卡片背景颜色
elevation	卡片高度，决定了阴影的显示效果
shape	卡片形状
borderOnForeground	是否在子组件前绘制shape边框，默认true
padding	内边距
margin	外边距
clipBehavior	裁剪样式
semanticContainer	卡片是否为单个语义容器（暂未发现用法）
title	标题，类型为 GFListTile
content	卡片内容，一般是一些文本，也可以是其他组件
image	这是标题上方的图片，默认不显示
showImage	标题上方图片是否显示
imageOverlay	卡片背景图片，默认不显示
showOverlayImage	卡片背景图片是否显示
buttonBar	内容下方的组件数组，一般是按钮
titlePosition	设置卡片标题栏的位置
borderRadius	卡片圆角
boxFit	图片拉伸、缩放样式
colorFilter	遮罩层
gradient	渐变背景

示例1:⬇️

GFCard(
    boxFit: BoxFit.fill,
    showOverlayImage: true,
    imageOverlay: AssetImage('images/background.png'),
    title: GFListTile(
        avatar: GFAvatar(
            backgroundImage: AssetImage('images/mypicture.png'),
        ),
        titleText: '晚夜',
        subTitleText: 'Flutter工程师',
    ),
    content: Text("属性content,一般是一些文本，也可以是其他组件"),
    buttonBar: GFButtonBar(
        children: <Widget>[
            GFButton(
                onPressed: () {},
                text: '关注',
            ),
            GFButton(
                onPressed: () {},
                text: '私信',
            ),
        ],
    ),
),
复制代码

示例2：

GFCard(
     boxFit: BoxFit.cover,
     titlePosition: GFPosition.start,
     image: Image.asset(
         'images/gameplayer.png',
         height: MediaQuery.of(context).size.height * 0.2,
         width: MediaQuery.of(context).size.width,
         fit: BoxFit.cover,
     ),
     showImage: true,
     title: GFListTile(
     avatar: GFAvatar(
         backgroundImage: AssetImage('images/mypicture.png'),
     ),
     titleText: 'Game Controllers',
     subTitleText: 'PlayStation 4',
     ),
     content: Text("Some quick example text to build on the card"),
     buttonBar: GFButtonBar(
     children: const [
         GFAvatar(
             backgroundColor: GFColors.PRIMARY,
             child: Icon(
                 Icons.share,
                 color: Colors.white,
             ),
         ),
         GFAvatar(
             backgroundColor: GFColors.SECONDARY,
             child: Icon(
                 Icons.search,
                 color: Colors.white,
             ),
         ),
         GFAvatar(
             backgroundColor: GFColors.SUCCESS,
             child: Icon(
                 Icons.phone,
                 color: Colors.white,
             ),
         ),
     ],
     ),
 ),
复制代码

未完待续 下一篇：轮播图、列表模版、Tabbar、浮动组件、Toast及Switch开关