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

前言

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

三、🗂 组件示例

21. 闪光组件 GFShimmer

属性及含义描述

属性	描述
child	用以显示微光效果的子组件
direction	动画方向，默认`GFShimmerDirection.leftToRight`
duration	动画时长，默认1.5s
showGradient	是否显示渐变色
gradient	渐变色，`showGradient`为`true`时生效
shimmerEffectCount	动画执行次数，默认0（无限循环）
showShimmerEffect	控制动画效果的活跃状态
mainColor	主要颜色
secondaryColor	次要颜色

1.GFShimmer和之前分享的 Shimmer 基本一致，通过包裹组件实现微光动画效果，一般用于加载动画，这是一个简单的示例⬇️：

GFShimmer(
    child: Container(
        width: 100,
        height: 100,
        // 这里的颜色不会在GFShimmer中显示，但不能为transparent
        color: Colors.green,
))

2.这里包裹的是一个行列样式，也可以包裹GFListTile等封装好的组件来快速实现（SizedBox和透明的Container不会被GFShimmer显示）：

GFShimmer(child: shimmerTest())

Widget shimmerTest() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
            Container(
                width: 80,
                height: 80,
                color: Colors.white,
            ),
            const SizedBox(width: 12),
            Expanded(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                        Container(
                        width: double.infinity,
                        height: 15,
                        color: Colors.white,
                        ),
                        const SizedBox(height: 6),
                        Container(
                            width: MediaQuery.of(context).size.width * 0.5,
                            height: 15,
                            color: Colors.white,
                        ),
                        const SizedBox(height: 6),
                        Container(
                            width: MediaQuery.of(context).size.width * 0.25,
                            height: 15,
                            color: Colors.white,
                        ),
                    ],
                ),
            )
        ],
    ),);
}}

3.渐变色微光效果(目前有明显的顿挫，不知道后期会不会优化，两种颜色建议使用属性mainColor和secondaryColor，多色建议使用 Shimmer)：

GFShimmer(
    child: const Text(
        'GF Shimmer',
        style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700),
        ),
    showGradient: true,
    gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
),

22.动画 GFAnimation

属性及含义描述

属性	描述
duration	动画执行的持续时间
reverseDuration	反向动画执行的持续时间
alignment	定义动画组件在动画期间的对齐方式
activeAlignment	定义动画组件在动画期间的对齐方式（在 `onTap` 之后）
child	显示动画效果的子组件
curve	动画曲线，默认为 `Curves.linear`
type	`GFAnimation` 的类型，即 `align`、`size`、`container`、`rotateTransition`、`scaleTransition`、`slideTransition` 和 `textStyle`
width	定义 `AnimatedContainer` 初始宽度
changedWidth	定义 `AnimatedContainer` 的宽度，它可以在动画期间展开
height	定义 `AnimatedContainer` 初始高度
changedHeight	定义 `AnimatedContainer` 的高度，它可以在动画期间展开
activeColor	定义onTap触发时 `AnimatedContainer` 的颜色
color	定义 `AnimatedContainer` 的颜色
padding	定义 `child` 或 `AnimatedContainer` 的填充
margin	定义 `child` 或 `AnimatedContainer` 的边距
onTap	用户点击 `child` 时的调用
turnsAnimation	对于 `GFAnimationType.rotateTransition`，可以在 `RotationTransition` 小部件中添加自定义的转弯动画
scaleAnimation	对于 `GFAnimationType.scaleTransition`，可以在 `ScaleTransition` 小部件中添加自定义缩放动画
controller	动画的控制器。
textDirection	定义 `AnimatedDefaultTextStyle` 的文本方向，即 [ltr,rtl]
slidePosition	对于 `GFAnimationType.slideTransition`，它为组件的位置设置动画
style	文本风格
textAlign	文本对齐方式
textOverflow	文本溢出处理
maxLines	最大行数
textWidthBasis	文本基础宽度
fontSize	字号
fontWeight	字重

1.旋转动画示例⬇️：

屏.gif

class GFAnimationPage extends StatefulWidget {
    const GFAnimationPage({Key? key}) : super(key: key);
    @override
    State<GFAnimationPage> createState() => _GFAnimationPagePageState();
}

class _GFAnimationPagePageState extends State<GFAnimationPage> with TickerProviderStateMixin {
    late AnimationController controller;
    late Animation<double> animation;
    bool isWorking = false;

    @override
    void initState() {
        controller = AnimationController(duration: const Duration(seconds: 5), vsync: this);
        animation = CurvedAnimation(parent: controller, curve: Curves.linear);
        super.initState();
    }
    
    @override
    void dispose() {
        controller.dispose();
        super.dispose();
    }

    ...

    GFAnimation(
        turnsAnimation: animation,
        controller: controller,
        type: GFAnimationType.rotateTransition,
        alignment: Alignment.center,
        child: Image.asset(
            'images/mypicture.png',
            width: 80,
            height: 80,
        ),
    ),

    GFButton(
        text: isWorking ? '停止' : ' 播放',
        color: isWorking ? Colors.green : Colors.blue,
        onPressed: () {
            isWorking ? controller.stop() : controller.repeat();
        setState(() {
        isWorking = !isWorking;
        });
    }),
    
}

2.缩放动画：

...

GFAnimation(
    turnsAnimation: animation,
    controller: controller,
    type: GFAnimationType.scaleTransition,
    alignment: Alignment.center,
    child: Image.asset(
        'images/mypicture.png',
        width: 80,
        height: 80,
    ),
),

3.对齐动画：

...

GFAnimation(
    turnsAnimation: animation,
    controller: controller,
    type: GFAnimationType.align,
    alignment:
    isWorking ? Alignment.bottomLeft : Alignment.bottomRight,
    child: Image.asset(
        'images/mypicture.png',
        width: 80,
        height: 80,
    ),
)

4.过渡动画：

...

offsetAnimation = Tween<Offset>(
    begin: Offset(0, 0),
    end: Offset(1, 0),
).animate(CurvedAnimation(
    parent: controller,
    curve: Curves.linear,
));

...

Container(
    color: Colors.white,
    width: MediaQuery.of(context).size.width,
    child: GFAnimation(
        controller: controller,
        slidePosition: offsetAnimation,
        type: GFAnimationType.slideTransition,
        child: Image.asset(
            'images/mypicture.png',
            width: 80,
            height: 80,
        ),
    ),
)

5.一个可以在给定的时间内自动转换尺寸的动态组件：

bool selected = false;
late AnimationController controller;
late Animation<double> animation;

@override
void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
}

@override
void dispose() {
    controller.dispose();
    super.dispose();
}

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text('data'),
        GFAnimation(
            onTap: () {
                if (mounted) {
                    setState(() {
                        selected = !selected;
                    });
                }
            },
            width: selected ? 100 : 50,
            height: selected ? 100 : 50,
            type: GFAnimationType.size,
            controller: controller,
            child: Image.asset(
                'images/mypicture.png',
                width: 80,
                height: 80,
            ),
        ),
        Row(
            children: [
                Expanded(child: SizedBox()),
                GFButton(onPressed: () {})
            ],
        )
    ],
)

6.动画容器：

late AnimationController controller;
late Animation<double> animation;
double fontSize = 30;

@override
void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.linear);
    controller.repeat();
}

@override
void dispose() {
    controller.dispose();
    super.dispose();
}

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text('这是一段文字'),
        GFAnimation(
            width: 50,
            changedWidth: 100,
            height: 50,
            changedHeight: 100,
            activeColor: Colors.transparent,
            color: Colors.transparent,
            fontSize: fontSize,
            type: GFAnimationType.container,
            child: Image.asset(
                'images/mypicture.png',
                width: 80,
                height: 80,
            ),
        ),
        Row(
            children: [
                Expanded(child: SizedBox()),
                GFButton(text: '这是个按钮', onPressed: () {})
            ],
        )
    ],
)

23.边框 GFBorder

GW_Borders_5a797fcdc5.png.webp

属性及含义描述

属性	描述
child	`Widget` 类型的子元素，可以是任何组件或文本等
padding	`child` 的填充
strokeWidth	`double` 类型，用于定义边框的粗细
color	用于更改边框类型的颜色
dashedLine	用于实现边框实线和虚线的数组，例如`dashedLine: [14, 4]`, 这里的14代表单个实线长度，4代表虚线长度
type	`GFBorderType` 的类型，用于定义不同类型的边框，即圆形、矩形和椭圆形
radius	边框的圆角属性

1.基础样式⬇️：

GFBorder(
    color: Color(0xFF19CA4B),
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)

2.虚线边框：

GFBorder(
    color: Color(0xFF19CA4B),
    // 这里的14代表单个实线长度，4代表虚线长度
    dashedLine: [14, 4],
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)

3. 点边框：

GFBorder(
    color: Color(0xFF19CA4B),
    dashedLine: [1, 2],
    type: GFBorderType.rect,
    child: Image.asset(
        'images/picture.png',
        width: 200,
        fit: BoxFit.fitWidth,
    ),
)

4.圆角边框：

GFBorder(
    radius: Radius.circular(20),
    color: Color(0xFF19CA4B),
    dashedLine: [2, 0],
    type: GFBorderType.rRect,
    child: Container(
        height: 100,
        color: Color(0xFFE9FFEF),
    ),
)

5.椭圆形边框：

GFBorder(
    type: GFBorderType.oval,
    dashedLine: [2, 0],
    color: Color(0xFF19CA4B),
    strokeWidth: 2,
    child: Center(child: Text('Oval Border')),
)

6.圆形边框（虚线、点等同理）：

SizedBox(
    width: 100,
    height: 100,
    child: GFBorder(
        type: GFBorderType.circle,
        dashedLine: [1, 0],
        color: Color(0xFF19CA4B),
        strokeWidth: 2,
        child: Center(
        child: Text(
            'Circular Border',
            textAlign: TextAlign.center,
        )),
    ),
),

24.底部抽屉 GFBottomSheet

属性及含义描述

属性	描述
minContentHeight	内容的最小高度。当 `enableExpandableContent` 为 false 时生效，必须大于或等于0，默认值为 0
maxContentHeight	内容的最大高度。必须大于等于0。默认值为300
stickyHeader	`GFBottomSheet` 的表头。可以通过滑动或点击 `stickyHeader` 进行交互
contentBody	`GFBottomSheet` 的主体。可以通过滑动或点击 `contentBody` 进行交互
stickyFooter	`GFBottomSheet` 的底部。可以通过滑动或点击 `stickyFooter` 进行交互
stickyFooterHeight	定义 `GFBottomSheet` 的底部高度
stickyHeaderHeight	定义 `GFBottomSheet` 的表头高度
elevation	可以理解为垂直高度，控制 `GFBottomSheet` 下方的阴影。必须大于等于 0，默认值为 0。
enableExpandableContent	是否允许 `contentBody` 展开。默认值为 false。
controller	`GFBottomSheet`控制器
animationDuration	展开 / 收起动画持续时长

示例代码⬇️：

import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';

class GFBottomSheetPage extends StatefulWidget {
    const GFBottomSheetPage({Key? key}) : super(key: key);
    @override
    State<GFBottomSheetPage> createState() => _GFBottomSheetPagePageState();
}

class _GFBottomSheetPagePageState extends State<GFBottomSheetPage> {
    final GFBottomSheetController controller = GFBottomSheetController();
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    backgroundColor: Colors.blueGrey,
        bottomSheet: GFBottomSheet(
            animationDuration: 500,
            controller: controller,
            maxContentHeight: 150,
            stickyHeaderHeight: 100,
            stickyHeader: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]),
                child: const GFListTile(
                    avatar: GFAvatar(
                        backgroundImage: AssetImage('images/mypicture.png'),
                    ),
                    titleText: '晚夜',
                    subTitleText: 'Flutter工程师',
                ),
            ),
            contentBody: Container(
                height: 250,
                margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                child: ListView(
                shrinkWrap: true,
                physics: const ScrollPhysics(),
                children: const [
                    Center(
                    child: Text(
        'Flutter 是 Google 开源的应用开发框架，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。\n本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善🎉🎉。',
                        style: TextStyle(
                        fontSize: 15, wordSpacing: 0.3, letterSpacing: 0.2),
                        ))
                    ],
                ),
            ),
            stickyFooter: Container(
                color: GFColors.SUCCESS,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                        Text(
                            'Flutter轮子推荐',
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                            color: Colors.white),
                        ),
                        Text(
                            'Getwidget',
                            style: TextStyle(fontSize: 15, color: Colors.white),
                        ),
                    ],
                ),
            ),
        stickyFooterHeight: 50,
    ),
    floatingActionButton: FloatingActionButton(
        backgroundColor: GFColors.SUCCESS,
        child: controller.isBottomSheetOpened
        ? Icon(Icons.keyboard_arrow_down)
        : Icon(Icons.keyboard_arrow_up),
        onPressed: () {
            controller.isBottomSheetOpened
            ? controller.hideBottomSheet()
            : controller.showBottomSheet();
        }),
        );
    }
}

25.复选框 GFCheckbox

Gw_Checkboxes_3d60710f66.png.webp

属性及含义描述

属性	描述
type	复选框类型
size	复选框尺寸
activeBgColor	选中背景色
inactiveBgColor	未选中背景色
activeBorderColor	选中边框颜色
inactiveBorderColor	未选中边框颜色
onChanged	状态改变回调
value	是否选中
activeIcon	选中图标样式
inactiveIcon	未选中图标样式
customBgColor	自定义样式背景色
autofocus	在真实状态下，当当前范围内没有其他节点处于焦点时，此复选框将被选为初始焦点
focusNode	一个可选的焦点节点，用作此复选框的焦点节点。

1.基础样式（带圆角）⬇️：

GFCheckbox(
    size: GFSize.SMALL,
    activeBgColor: GFColors.SUCCESS,
    onChanged: (value) {
        setState(() {
            isChecked = value;
        });
    },
    value: isChecked,
)

2.正方形样式：

type: GFCheckboxType.square,

3.圆形样式：

type: GFCheckboxType.circle,

4.自定义样式：

GFCheckbox(
    type: GFCheckboxType.square,
    activeBgColor: GFColors.SECONDARY,
    activeIcon: Icon(Icons.sentiment_satisfied),
    onChanged: (value) {
        setState(() {
            isChecked = value;
        });
    },
    value: isChecked,
    inactiveIcon: Icon(Icons.sentiment_dissatisfied),
)

5.示例：

bool isSmileChecked = false;
bool isMiddleChecked = false;
bool isLargeChecked = false;

GFCard(
    content: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
            GFCheckbox(
                size: GFSize.SMALL,
                activeBgColor: GFColors.DANGER,
                onChanged: (value) {
                    setState(() {
                        isSmileChecked = value;
                        });
                    },
                value: isSmileChecked,
                inactiveIcon: null,
            ),
            GFCheckbox(
                activeBgColor: GFColors.SECONDARY,
                onChanged: (value) {
                    setState(() {
                        isMiddleChecked = value;
                    });
                },
                value: isMiddleChecked,
                inactiveIcon: null,
            ),
            GFCheckbox(
                size: GFSize.LARGE,
                activeBgColor: GFColors.SUCCESS,
                onChanged: (value) {
                    setState(() {
                        isLargeChecked = value;
                    });
                },
                value: isLargeChecked,
                inactiveIcon: null,
            ),
        ],
    ),
)