GetWidget：Flutter UI组件库完全指南

诸余煦

于 2025-06-09 09:01:49 发布

阅读量435

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00621/article/details/148523658

GetWidget：Flutter UI组件库完全指南

getwidget Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. 项目地址: https://gitcode.com/gh_mirrors/ge/getwidget

项目概述

GetWidget是一个基于Flutter SDK构建的100%免费开源UI库，旨在让Flutter开发变得更简单、更高效。该项目提供了1000多个预构建的组件，开发者可以快速复用这些组件来开发移动应用和Web应用。

核心特性

1. 丰富的组件库

GetWidget提供了大量开箱即用的组件，包括但不限于：

基础组件：按钮(GFButton)、徽章(GFBadge)、头像(GFAvatar)等
布局组件：卡片(GFCard)、平铺布局(GFTile)等
导航组件：标签栏(GFTab)、抽屉(GFDrawer)、应用栏(GFAppbar)等
交互组件：轮播(GFCarousel)、折叠面板(GFAccordion)、提示框(GFAlert)等
信息展示：吐司(GFToast)、排版(GFTypography)等

2. 跨平台支持

所有组件都经过精心设计，完美适配：

iOS平台
Android平台
Web应用

3. 高度可定制

每个组件都提供了丰富的自定义选项，开发者可以轻松调整样式、颜色、动画等参数以满足不同项目的设计需求。

快速入门

安装步骤

在项目的pubspec.yaml文件中添加依赖：

dependencies:
  getwidget: ^最新版本号

运行Flutter包获取命令：

flutter pub get

在代码中导入组件：

import 'package:getwidget/getwidget.dart';

基础使用示例

以创建一个带图标的按钮为例：

GFButton(
  onPressed: () {},
  text: "点击我",
  icon: Icon(Icons.share),
  type: GFButtonType.solid,
)

组件深度解析

GFButton组件详解

GFButton是GetWidget中最常用的组件之一，支持多种样式：

按钮类型：
- 实心按钮(GFButtonType.solid)
- 描边按钮(GFButtonType.outline)
- 透明按钮(GFButtonType.transparent)
按钮形状：
- 圆角矩形
- 圆形
- 方形
按钮大小：
- 大号
- 中号(默认)
- 小号

GFCarousel轮播组件

这是一个功能强大的轮播组件，特点包括：

支持自动播放
自定义切换动画
无限循环模式
分页指示器定制

示例代码：

GFCarousel(
  items: imageList.map(
    (url) => Container(
      margin: EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
        child: Image.network(url, fit: BoxFit.cover, width: 1000.0),
      ),
    ),
  ).toList(),
  onPageChanged: (index) {
    setState(() {
      index;
    });
  },
)