flutter web 优化和flutter_admin_template

文章目录

  • Flutter Admin Template
        • Live demo: https://githubityu.github.io/live_flutter_admin
        • Web 优化
    • Setup
        • 登录
        • 注册
        • 英文 亮色主题 中文 暗黑主题
        • 管理员登录权限 根据权限动态添加路由
    • 第三方依赖
    • License
    • 最后
    • 参考学习

Flutter Admin Template

Responsive web with light/dark mode and multi language supported. The objective of this project is
to develop an admin portal website with Flutter v3 (SDK version 3.13.4).

Live demo: https://githubityu.github.io/live_flutter_admin
Web 优化

通过加载web 发现https://fonts.gstatic.com/s/notosanssc下载了NotoSansSC和Roboto
https://fonts.gstatic.com/s/roboto/v20/Roboto.ttf Robot
canvaskit.wasm
家里穷出去不方便,避免去外面下载 做以下几步

  1. 定义 fontFamily: ‘NotoSansSC’

  2. Roboto 更换链接 a6.push(p.x6(d,e.G3(d),j))}}if(!m)a6.push(p.x6(“Roboto”
    ,“https://githubityu.github.io/live_flutter_admin/assets/assets/fonts/Roboto.ttf”,“Roboto”))

  3. 打包web flutter build web --web-renderer auto
    –dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/
    flutter web 优化和flutter_admin_template_第1张图片
    flutter web 优化和flutter_admin_template_第2张图片
    flutter web 优化和flutter_admin_template_第3张图片

Setup

1 Clone the repo

$ git clone https://github.com/githubityu/flutter_admin_template.git
$ cd flutter_admin_template

2 Running:

$ flutter run
登录
注册
英文 亮色主题 中文 暗黑主题
管理员登录权限 根据权限动态添加路由

flutter web 优化和flutter_admin_template_第4张图片
flutter web 优化和flutter_admin_template_第5张图片
flutter web 优化和flutter_admin_template_第6张图片
flutter web 优化和flutter_admin_template_第7张图片
flutter web 优化和flutter_admin_template_第8张图片

第三方依赖

名称及版本 作用
flutter_hooks 钩子
hooks_riverpod 状态管理
riverpod_annotation 状态管理
dio: 网络请求
retrofit 网络请求
webview_flutter 内置webview加载
ityu_tools 工具
flex_color_scheme 主题颜色
go_router 路由
go_router_builder 路由
awesome_dialog 弹框
flutter_smart_dialog 弹框提示
logger 日志

License

MIT

最后

如果你喜欢这个项目,欢迎给我一个star。里面可能还有许多需要修改的bug,欢迎大家提出来,我将持续更新这个项目)
下一步用dartfrog写接口,然后后台管理接入
dartfrog

参考学习

flutter-web-admin
flutter_admin_scaffold

你可能感兴趣的:(android,flutter,flutter,前端)