likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 19

前言

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
  • 推荐指数： ⭐️⭐️⭐️⭐️⭐️
  • 常用指数： ⭐️⭐️⭐️⭐️⭐️
  • 预览：

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

二、⚙️ 安装及使用

dependencies:
  getwidget: ^2.0.5

import 'package:getwidget/getwidget.dart';

三、🗂 组件示例

1. 按钮 GFButton

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（一） 属性及含义介绍

属性描述
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按钮文字颜色
positionicon位置
size按钮尺寸（高度）
borderSide按钮边框
icon图标
blockButton设为true将按钮宽度设为全宽，左右各留一部分间距
fullWidthButton全宽按钮
colorScheme主题颜色
enableFeedback声音/震动反馈
disabledColor按钮禁用时的填充颜色
disabledTextColor按钮禁用时的文字颜色

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

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

GFButton(
    text: 'GFButton',
    onPressed: () {},
)

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

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

GFButton(
    text: 'GFButton',
    onPressed: null,
)

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

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

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

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

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

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

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

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

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

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

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

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

GFIconButton(
    icon: Icon(Icons.star),
    onPressed: () {}
)

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

2.角标 GFBadge

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

属性及含义介绍

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

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

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

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

// 圆点
GFBadge(
  shape: GFBadgeShape.circle,
  size: 15,
),

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

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

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等几乎任何组件作为其子组件来使用。

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

 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 ，对应以四角作为坐标原点时角标向内侧的偏移量。

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

3.头像 GFAvatar

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

属性及含义介绍

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

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

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

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

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

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

4.图片 GFImage

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

属性及含义介绍

属性描述
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支持动态图片和静态图片,下面代码示例中实现了三种形状的图片：⬇️

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

// 默认矩形
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.带子组件的半透明黑色遮罩图片示例：

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

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

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

属性及含义介绍

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

示例1:⬇️

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

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：

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

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,
             ),
         ),
     ],
     ),
 ),
转载自:https://juejin.cn/post/7078606984739553317
评论
请登录