笔记：flutter中一些流行的 UI 相关库推荐（不断更新）

jcLee952024-04-11 18:11

笔记：flutter中一些流行的 UI 相关库（不断更新）

  • CSDN：https://jclee95.blog.csdn.net
  • 本文收录了很多在 flutter pub 上显示流行度较高的第三方UI库和UI框架，对它们的效果进行了截图，目的是方便开发时进行查找；
  • 这些模块多数来自于 flutter pub 官方主页 Flutter Favorites 、Most popular packages 、Top Flutter packages
  • 也有一些仅仅只 popularity 值比较高
  • 本文给出了图片和链接，并不介绍各个模块的用法，需要使用的读者可以点击链接到对应库的页面查看

flutter中一些流行的 UI 相关库

载入效果/Loading

loading_animation_widget

https://pub.dev/packages/loading_animation_widget


flutter_easyloading

进度条

step_progress_indicator

https://pub.dev/packages/step_progress_indicator




开关/按钮/滑块

action_slider

用于确认操作并在后续加载后提供有关操作成功的反馈的滑块。LTR且RTL均受支持。

animated_toggle_switch (与 action_slider 类似)

完全可定制的，可拖动的和动画开关，有多种选择和平滑加载动画。它有用于滚动和大小动画的预建构造函数，但它也允许您使用CustomAnimatedToggleSwitch创建自己的开关。

LTR和RTL都受支持。

没有(初始)选择的开关也是可能的。

AnimatedToggleSwitch的大多数生成器参数都有一个标准版本和一个自定义版本。这确保了你可以很容易地开始，并且如果需要的话还可以定制很多。有几种选择来设计它的样式。







syncfusion_flutter_sliders

Flutter Sliders包是用于创建高度交互式和UI丰富的slider组件，以便在Flutter应用程序中进行过滤。



load_switch

加载开关

toggle_switch

yako_theme_switch

只是您应用程序主题的一个很酷的开关

日历、时间、日期

table_calendar

nepali_date_picker

支持 Bikram Sambat(尼泊尔语)的 Material 和 Cupertino 风格的日期选择器、日期范围选择器和日历。

表单/输入/按钮/挑选

mask_text_input_formatter

https://pub.dev/packages/mask_text_input_formatter

country_code_picker

https://pub.dev/packages/country_code_picker

https://pub.dev/packages/dropdown_button2

like_button

numberpicker

时间轴

timeline_tile

https://pub.dev/packages/timeline_tile

文字/文本

flutter_linkify

https://pub.dev/packages/flutter_linkify

将文本 URL 和电子邮件转换为 Flutter 文本中可点击的内联链接。

auto_size_text

自动调整文本大小，以完全符合其边界的Flutter组件。

animated_text_kit

旋转 淡入淡出 打字机1 打字机2 缩放 着色
波浪 闪烁 文本液体填充

typewritertext

弹框/对话框/警告/alert/dialog

rflutter_alert

https://pub.dev/packages/rflutter_alert


adaptive_dialog

https://pub.dev/packages/adaptive_dialog





搜索


边框

dotted_border

启动画面

animated_splash_screen

扩展/折叠/抽屉

flutter_zoom_drawer

  • 带有侧边菜单（抽屉）自定义实现的 Flutter 包\](带有侧边菜单（抽屉）自定义实现的 Flutter 包) ![请添加图片描述](https://file.jishuzhan.net/article/1778365191457607682/d496d6c821d4a70443f161f1670c9173.webp) ![请添加图片描述](https://file.jishuzhan.net/article/1778365191457607682/306b25a45df4a42e047f290c79b6e29b.webp)

expandable

https://pub.dev/packages/expandable

flutter_slidable

布局/拖拽/容器

reorderables

  • 各种可重新排序（又称为拖放）的 Flutter 小部件，包括可重新排序的表格、行、列、换行和条列表，使它们的子项可拖动并在小部件内重新排序。
  • https://pub.dev/packages/reorderables

表格

data_table_2

https://pub.dev/packages/data_table_2

权限/验证/校验码

pinput

pin_code_fields

https://pub.dev/packages/pin_code_fields

特效/动画/轮播/幻灯片

flutter_animate

https://pub.dev/packages/flutter_animate

hyper_effects

animations

![在这里插入图片描述](https://img-blog.csdnimg.cn/f908a090f9b14d1d9e62bca60c5a0899.png#pic_center 600x)

animate_do

一个受 Animate.css 启发的动画包，仅使用 Flutter 动画构建，零依赖。





intro_slider

https://pub.dev/packages/intro_slider


simple_ripple_animation

简单的波纹动画。

该软件包提供波纹动画小部件，可以自定义以满足您的需求。它易于设置和自定义，并且无论您选择什么颜色，它看起来都很漂亮。

smooth_page_indicator


用于创建具有从前到后或从后到前滑动的项目动画的宝丽来风格轮播。使用此包以有趣且交互式的方式显示您的内容，为您的 Flutter 应用增添一丝怀旧气息。

扫描器

flutter_barcode_scanner

https://pub.dev/packages/flutter_barcode_scanner

底部导航

convex_bottom_bar

https://pub.dev/packages/convex_bottom_bar

animated_bottom_navigation_bar

https://pub.dev/packages/animated_bottom_navigation_bar


播放器/查看器

chewie

https://pub.dev/packages/chewie


photo_view

audioplayers

3D / 立体 /3维

o3d

这是一个用于以glTF和 GLB格式渲染交互式 3D 模型的Flutter组件。


选项

choice

date_picker_plus

图表

charts_painter
[]


fl_chart

https://pub.dev/packages/fl_chart

https://flchart.dev


community_charts






d_chart








percent_indicator

chart_sparkline （迷你图）



graphic

Graphic是一个数据可视化语法和Flutter图表库。

  • 灵活的声明性语法：这种可视化语法源自Leland Wilkinson的《图形语法》，并试图在理论美感和实用性之间取得平衡。数据处理步骤和标记形状可以在声明性规范中自由组合，不限于某些图表类型。并且形状绘制方法是可定制的。
  • 交互：通过事件和选择定义，图表具有高度交互性，例如突出显示所选项目、弹出工具提示或缩放坐标。
  • 动画：构建或更改图表时可以设置标记过渡动画。入口动画有多种形式。

图标

phosphor-flutter

font_awesome_flutter

animated_icon_button

animate_icons

flutter_animated_icons

图片

image_compare_slider

受react-compare-slider的启发，这个包允许你用一个滑块轻松地比较两个图像。

easy_avatar

是一个多功能头像插件，该插件可以轻松实现圆形、圆角矩形等形状；可以实现头像出境效果（利用边框的层级关系）；也可以轻松地实现文字头像功能。

image_editor

before_after

dash_flags

extended_image

Image 扩展组件, 支持加载以及失败显示，缓存网络图片，缩放拖拽图片，图片浏览(微信掘金效果)，滑动退出页面(微信掘金效果)，编辑图片(裁剪旋转翻转)，保存，绘制自定义效果等功能

层次/堆叠

https://pub.dev/packages/card_stack_widget

一种用于 Flutter 应用的垂直可拆卸和可定制的卡堆叠。

flutter_card_swiper

这是一个类似 Tinder 刷卡器的 Flutter 包。它允许您向左、向右、向上、向下滑动，并为每个方向定义您自己的业务逻辑。非常流畅的动画，支持 Android、iOS、Web 和桌面。

抽屉

flutter_slider_drawer

带有滑块抽屉菜单自定义实现的 Flutter 包。

数据/分页/列表/网格

Infinite Scroll Pagination

无分页、可扩展和高度可定制的包，当用户向下滚动屏幕时，帮助您惰性地加载和显示小块项目-称为无限滚动分页、无限滚动分页、自动分页、惰性加载分页、渐进式加载分页等。设计成感觉像 Flutter 框架的一部分。

flutter_staggered_grid_view

提供 Flutter 栅格布局的集合。

通知

flutter_local_notifications

用于显示本地通知的跨平台插件。

awesome_notifications

主要特点:

  • 创建自定义通知:使用Awesome通知为您的Flutter应用程序轻松创建和自定义本地和推送通知。
  • 吸引用户:通过发送包含图像、声音、颜文字、按钮和许多不同布局的通知，让用户参与到你的应用中。
  • 实时事件:接收用户创建、显示、解除或点击的通知的Flutter级别代码上的实时事件。
  • 高度可定制:通过一系列可定制选项，包括翻译，您可以定制通知以满足您的特定需求。
  • 预定通知:以秒级精度重复或在特定时间安排通知，让您的用户保持最新状态。
  • 值得信赖的性能:在任何应用程序生命周期中都能放心地接收通知。
  • 易于使用:通过易于使用的界面，您可以在几分钟内开始创建自定义通知。

主题

flex_color_scheme

弹性颜色方案：

flex_color_picker

弹性颜色选择器

  • FlexColorPicker 是 Flutter 的可定制颜色选择器。可以ColorPicker显示六种不同类型的颜色选择器，其中三种用于标准 Flutter Material Design 2 颜色及其色调。用于挑选的物品的尺寸和样式可以定制。
  • 选择器还可以选择生成 Material Design 3 颜色系统精确的色调调色板，使用选择器中任何选定的颜色作为生成色调调色板的关键颜色。然后也可以从生成的色调调色板中选取颜色。 有关 Material 3 颜色系统和色调调色板的更多信息，请参阅 Material 3 设计指南网站。
  • https://pub.dev/packages/flex_color_picker


消息推送相关

flutter_native_badge

iOS和macOS上本机badge APIs的包装器。它允许你改变你的应用程序图标的徽章，通过设置计数，显示红点，清除徽章，并获得当前的徽章计数。

它目前支持iOS和macOS。其他平台尚不支持。

tim_ui_kit_push_plugin

这个是 腾讯云 推出的 Flutter 消息推送插件。

使用 腾讯云 IM 厂商推送 Flutter 集成插件 的 离线推送 能力，可快速接入主流厂商（苹果 iOS / Google FCM / OPPO / VIVO / 华为 / 小米 / 魅族 / 荣耀）的离线推送。腾讯云除了消息推送外，还提供了 UI 相关一整套方案。

其中文文档地址为：

快速入门（Flutter）

快速入门（用 Flutter 快速集成至您现有原生应用）

编辑器

flutter_code_editor


flutter_code_editor 是一个多平台代码编辑器，支持：

  • 100 多种语言的语法高亮显示，
  • 代码块折叠，
  • 自动完成，
  • 只读代码块，
  • 隐藏特定的代码块，
  • 主题，
  • 以及许多其他功能。

flutter_quill

FlutterQuill 是一个富文本编辑器和Flutter的Quill组件。该库是一个 WYSIWYG（所见即所得）编辑器，专为现代 Android、iOS、Web 和桌面平台而构建。

video_editor

一个视频编辑器，允许编辑(修剪，裁剪，旋转和缩放)和选择一个非常灵活的用户界面设计的封面。该库提供了一些工具来执行导出。这个库只用Dart编写，但使用了video_thumbnail 等外部包，这使得它目前只能在iOS和Android平台上使用(web支持目前正在进行中)。

quill_html_editor

Quill Html Editor 是一款功能强大的 HTML 富文本编辑器，专为 Android、iOS 和 Web 平台设计。它利用 QuillJs 库（一个开源 WYSIWYG 编辑器）的功能，为现代 Web 应用程序提供功能丰富的编辑体验。

app_service

App Service 是一个基于 GetX 的应用服务，提供应用级别的管理服务，如主题管理、深色模式管理和本地化管理。

diagram_editor

Flutter 图表编辑器库，用于显示和编辑自定义类型的图表。它提供了DiagramEditor 小部件以及自定义所有编辑器设计和行为的可能性。

image_editor

见 <image_editor>

其它

sliver_tools

https://pub.dev/packages/sliver_tools

flutter_credit_card

velocityx


flutter_pdfview

introduction_screen

简介屏幕允许您在应用程序首次启动时显示一个屏幕，例如解释您的应用程序。这个小部件非常可定制，设计精美。

flutter_tilt






scale_design

一个移动端 UI 框架和组件库，提供了设计师尺寸适配方案以及相应的各种组件。

flutter_context_menu

为在Flutter应用程序中创建和显示上下文菜单提供了一个灵活的、可定制的解决方案 的 一个Flutter库。它允许您轻松地将上下文菜单添加到您的UI中，为用户提供了一种方便的方式来访问特定于所选项或区域的附加选项和操作。

api_guide

用于生成 API 调用文档例如 OpenAPI 架构 的Flutter 包。

Liquid Swipe

Liquid swipe 是一款揭示性的剪辑器，可以像滑动到堆叠的容器/小部件一样产生令人惊叹的液体，其灵感来自 Cuberto 的 Liquid swipe 和 IntroViews。

Brain_fusion

Fusion Brain AI 是一种新的人工智能艺术生成工具，只需文本提示即可创建令人惊叹的图像。Fusion Brain AI 还可以对现有图像进行变体。

首先导入包：

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

然后初始化AI类：

dart 复制代码 
final AI ai = AI();

获取 Uint8List 形式的图像（PNG 格式）：

dart 复制代码 
Future<Uint8List> generate(String query) async {
  Uint8List image = await ai.runAI(query, AIStyle.anime);
  return image;
}

显示图像：

dart 复制代码 
Widget brainFusion() {
    return FutureBuilder<Uint8List>(
      // Call the generate() function to get the image data
      future: generate('YOUR TEXT'), 
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // While waiting for the image data, display a loading indicator
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          // If an error occurred while getting the image data, display an error
          return Text('Error: ${snapshot.error}');
        } else if (snapshot.hasData) {
          // If the image data is available, display the image using Image.memory()
          return Image.memory(snapshot.data!);
        } else {
          // If no data is available, display a placeholder or an empty container
          return Container();
        }
      },
    );
  }

fluent_ui

使用Flutter设计漂亮的原生Windows应用程序。Flutter的Fluent UI的非官方实现。它是根据官方文件编写的。

相关推荐
TT_Close4 分钟前
【Flutter×鸿蒙】FVM 不认鸿蒙 SDK？4步手动塞进去
flutter·swift·harmonyos
TT_Close2 小时前
【Flutter×鸿蒙】一个"插队"技巧，解决90%的 command not found
flutter·harmonyos
恋猫de小郭5 小时前
Flutter 发布官方 Skills ，Flutter 在 AI 领域再添一助力
android·前端·flutter
齐生19 小时前
iOS 知识点 - IAP 是怎样的？
笔记
恋猫de小郭20 小时前
2026 Flutter VS React Native ，同时在 AI 时代 VS Native 开发，你没见过的版本
android·前端·flutter
tingshuo29171 天前
D006 【模板】并查集
笔记
明君879971 天前
Flutter 如何给图片添加多行文字水印
前端·flutter
四眼肥鱼1 天前
flutter 利用flutter_libserialport 实现SQ800 串口通信
前端·flutter
tingshuo29172 天前
S001 【模板】从前缀函数到KMP应用 字符串匹配 字符串周期
笔记
火柴就是我2 天前
让我们实现一个更好看的内部阴影按钮
android·flutter
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04OpenClaw优化飞书API 额度已耗尽问题05Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services06本地部署 OpenClaw + DeepSeek-R1 完全指南07Window 10部署openclaw报错node.exe : npm error code 12808小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）09OpenClaw大龙虾机器人完整安装教程10Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤