首页 > 资讯 > 移动开发 >笔记：flutter中一些流行的 UI 相关库

746

分享到

笔记：flutter中一些流行的 UI 相关库

笔记 flutter ui 2023-09-08 17:09:51 746人浏览八月长安

摘要

笔记：Flutter中一些流行的 UI 相关库 CSDN：https://jclee95.blog.csdn.net/本文收录了很多在 flutter pub 上显示流行度较高的第三方UI库和UI框架

笔记：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 相关库

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

在这里插入图片描述

日历、时间、日期

table_calendar

适用于 Flutter 的高度可定制、功能丰富的日历小部件；
https://pub.dev/packages/table_calendar；
https://pub.dev/documentation/table_calendar/latest/

在这里插入图片描述

表单/输入/按钮/挑选

mask_text_input_fORMatter

https://pub.dev/packages/mask_text_input_formatter

请添加图片描述

country_code_picker

https://pub.dev/packages/country_code_picker

请添加图片描述

dropdown_button2

https://pub.dev/packages/dropdown_button2

请添加图片描述

like_button

允许您创建一个带有类似于 Twitter 心脏的动画效果的按钮，当您点赞时，动画效果可以增加点赞数。
https://pub.dev/packages/like_button

在这里插入图片描述

numberpicker

NumberPicker 是一个自定义小部件，设计用于通过滚动微调器选择整数或小数。
https://pub.dev/packages/numberpicker

在这里插入图片描述

时间轴

timeline_tile

https://pub.dev/packages/timeline_tile

在这里插入图片描述

文字

flutter_linkify

https://pub.dev/packages/flutter_linkify

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

请添加图片描述

animated_text_kit

包含一些很酷且很棒的文本动画的集合。
https://pub.dev/packages/animated_text_kit
https://animated-text-kit.web.app/

在这里插入图片描述

旋转
淡入淡出

在这里插入图片描述

打字机1

在这里插入图片描述

打字机2
缩放
着色

在这里插入图片描述

文本液体填充

波浪

在这里插入图片描述

闪烁

在这里插入图片描述

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

rflutter_alert

https://pub.dev/packages/rflutter_alert

在这里插入图片描述

adaptive_dialog

https://pub.dev/packages/adaptive_dialog

在这里插入图片描述

搜索

dropdown_search

https://pub.dev/packages/dropdown_search

在这里插入图片描述

启动画面

animated_splash_screen

https://pub.dev/packages/animated_splash_screen

在这里插入图片描述

扩展/折叠/抽屉

flutter_zoom_drawer

[带有侧边菜单（抽屉）自定义实现的 Flutter 包](带有侧边菜单（抽屉）自定义实现的 Flutter 包)

请添加图片描述

expandable

https://pub.dev/packages/expandable

请添加图片描述

布局/拖拽/容器

reorderables

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

在这里插入图片描述

表格

data_table_2

https://pub.dev/packages/data_table_2

在这里插入图片描述

权限/验证/校验码

pinput

https://pub.dev/packages/pinput

请添加图片描述

pin_code_fields

https://pub.dev/packages/pin_code_fields

请添加图片描述

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

flutter_animate

https://pub.dev/packages/flutter_animate

请添加图片描述

animations

高质量的 Flutter 预建动画;
该包包含预制动画，可实现常见的所需效果。动画可以根据您的内容进行自定义，并放入您的应用程序中以使用户满意。
https://pub.dev/packages/animations
https://codelabs.developers.google.com/codelabs/material-motion-flutter
容器变换
共享轴
淡入淡出

在这里插入图片描述

intro_slider

https://pub.dev/packages/intro_slider

在这里插入图片描述

smooth_page_indicator

可定制的动画页面指示器，具有一组内置效果;
https://pub.dev/packages/smooth_page_indicator

在这里插入图片描述

扫描器

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

适用于 Flutter 的简单可缩放图像/内容小部件；
PhotoView 使图像能够通过用户手势（例如捏合、旋转和拖动）进行缩放和平移。它还可以显示任何小部件而不是图像，例如容器、文本或 SVG；
尽管使用起来非常简单，但 PhotoView 的选项和控制器是高度可定制的；
https://pub.dev/packages/photo_view
https://pub.dartlang.org/documentation/photo_view/latest/photo_view/PhotoView-class.html

在这里插入图片描述

图表

fl_chart

https://pub.dev/packages/fl_chart

https://flchart.dev

在这里插入图片描述

commUnity_charts

用原生 dart 编写的 Material Design 数据可视化库。
https://pub.dev/packages/community_charts_flutter
https://juliansteenbakker.github.io/community_charts/flutter/gallery.html
https://github.com/juliansteenbakker/community_charts
Apache-2.0

在这里插入图片描述

d_chart

此包的目的是使用 community_charts_flutter 中的图表的简单方法;
https://pub.dev/packages/d_chart
Apache-2.0

在这里插入图片描述

percent_indicator

https://pub.dev/packages/percent_indicator

在这里插入图片描述

chart_sparkline （迷你图）

Flutter 的精美迷你图;
https://pub.dev/packages/chart_sparkline

在这里插入图片描述

主题

flex_color_scheme

弹性颜色方案：

使用FlexColorScheme制作基于 Flutter Material Design 的漂亮主题。应用可选的表面混合，并使用 Material-3 风格的种子配色方案。返回的主题是标准ThemeData对象。
https://pub.dev/packages/flex_color_scheme
https://rydmike.com/colorscheme
https://rydmike.com/flexcolorscheme/themesplayground-v7-1/

flex_color_picker

弹性颜色选择器

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