/flutter_ui_tool

Flutter开发App所需的UI技能

Primary LanguageDartApache License 2.0Apache-2.0

FlutterUITool

声明1：本项目仅供学习，部分参考别人页面的功能也已标注出原出处，如有侵犯原作者的地方请联系本人添加标注或删除。

本项目包括：

  • 首页（Alert、Button、TextField、TabBar、BottomNavigationBar、Sliver、登录模板、侧边栏、我的、个人中心、引导页）
  • 局部（Text、Image等小组件、地址、时间/日期、标签、进度条、侧滑删除、下拉筛选菜单、滚动到指定位置、监听所在位置 ）
  • 动画（Animation系列、Tween、Curves、其他、插件-animations ）
  • 项目中用到的封装的工具类（size_util、tost_util、platform_utils、log_utils、color_util、style_util、theme_util等 ）
  • 夜间模式、多语言

运行环境

提示：null-safe环境

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.0.1 21A559 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)

运行截图

Button、TextField、Alert_Dialog 的封装使用

1 2 3
Button TextField Alert_Dialog

TabBar

1 2 3
top_bar_NoScroll top_bar_Scroll top_bar_Height44

BottomNavigationBar

1 2 3 4
常规 底部线条 切换变色 ios风格
1 2 3 4
顶部线条 气泡bar 按钮固定中间 圆形突出
1 2 3 4
曲线 凸起弧度1 凸起弧度2 凹入

Sliver

1 2 3 4
家族控件 SliverAppBar+tab sliver+nestedScroll 组合测试

登录模板

1 2 3 4
常规-登录 常规-注册 常规-快速登录 常规-忘记密码
1 2 3 4
上下交替 前后翻转 present跳转 BottomSheet弹出
1 2 3 4
手机号登录 表情动效 验证码登录 视频背景登录

侧边栏

1 2 3 4
左边-内部 左边-外部 左边-弧度 右边-外部

我的

1 2
导航栏渐变 卡片

个人中心

1 2 3
顶部弧度 个人详情模式1 个人详情模式2

引导页

1 2 3
本地图片 网络图片 动画式

Widgets

1 2 3 4
文字 图片 ToggleButton Check-Switch

地址

1 2 3
picker 城市 国家

时间

1 2 3 4
picker选择 时钟选择 绘制实时钟表 绘制实时闹钟

标签

1 2 3
Chip 热门 添加删除

进度条

1 2 3
单向 双向 无节点

侧滑删除

1 2
单向侧滑 双向侧滑

下拉筛选菜单

1 2
仿美团 多选

滚动到指定位置、监听所在位置

1 2 3 4
滚动到指定位置1 滚动到指定位置2 监听所在位置1 监听所在位置2

动画

1 2 3
Tween+Animation Curvers 路由过渡动画Transition

特别鸣谢