笔记：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 包)

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的非官方实现。它是根据官方文件编写的。

相关推荐
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
CSDN_PBB4 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
夜流冰9 小时前
编程参考 - C语言可变参数
笔记
格雷亚赛克斯9 小时前
Qt笔记31-69
数据库·笔记·qt
Long_poem9 小时前
【自学笔记】版本控制与持续集成基础知识点总览-持续更新
笔记·ci/cd
Stream٩( 'ω' )و10 小时前
109~133笔记
笔记
weixin_5025398510 小时前
rust学习笔记2-rust的包管理工具Cargo使用
笔记·学习·rust
恋猫de小郭10 小时前
Flutter 正在推进全新 PlatformView 实现 HCPP， 它又用到了 Android 上的什么黑科技
android·科技·flutter
Jackson@ML11 小时前
React入门 – 1. 学习React的预备知识
javascript·react.js·ui
孤独得猿11 小时前
排序算法复习——包括插入排序、希尔排序、冒泡排序、快排（包括霍尔法、挖坑法、快慢指针法）、堆排、选择排序、归并排序等 （代码采用c/c++混编）
c语言·数据结构·c++·笔记·算法·排序算法
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04本地部署DeepSeek教程（Mac版本）05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06DeepSeek r1本地安装全指南07DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具08DeepSeek RAGFlow构建本地知识库系统09在Windows下安装Ollama并体验DeepSeek r1大模型10Page Assist - 本地Deepseek模型 Web UI 的安装和使用