likes
comments
collection
share

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

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

前言

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.fullWidthButtonblockButton若为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角标形状,circlepillssquare、默认standard
size角标尺寸,LARGEMEDIUMSMALL或自定义尺寸(double
border边框
child子组件,一般为文本,若text不为空则此项失效

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

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

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

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

2.使用GFButtonBadgeGFButton都可以实现一个带有角标的按钮,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,它的灵活性在于,你可以将GFIconButtonGFButton甚至是一张图片、一个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.topEndGFBadgePosition.topStartGFBadgePosition.bottomEndGFBadgePosition.bottomStart ,对应以四角作为坐标原点时角标向内侧的偏移量。

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


3.头像 GFAvatar

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

属性及含义介绍

属性描述
backgroundImage头像图片
backgroundColor背景色
child子组件
foregroundColor子组件颜色
radius头像半径
maxRadius最大半径
minRadius最小半径
borderRadius头像圆角,形状不为圆形时可用
shape头像形状,squarestandard以及默认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.rectangleBoxShape.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
评论
请登录