flutter web 优化和flutter_admin_template

简介: flutter web 优化和flutter_admin_template

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

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’


  1. 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”))

  1. 打包web flutter build web --web-renderer auto

  –dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/

Setup

1 Clone the repo

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

2 Running:

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


第三方依赖

名称及版本 作用
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

相关文章
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
248 5
Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验
在移动应用开发中,Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验。本文深入探讨了键盘的显示与隐藏、输入框的焦点管理、键盘类型的适配、输入框高度自适应、键盘遮挡问题处理及性能优化等关键技术,结合实例分析,旨在帮助开发者提升应用的用户体验。
115 6
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
97 6
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
实战指南:用Python协程与异步函数优化高性能Web应用
在快速发展的Web开发领域,高性能与高效响应是衡量应用质量的重要标准。随着Python在Web开发中的广泛应用,如何利用Python的协程(Coroutine)与异步函数(Async Functions)特性来优化Web应用的性能,成为了许多开发者关注的焦点。本文将从实战角度出发,通过具体案例展示如何运用这些技术来提升Web应用的响应速度和吞吐量。
50 1
优化Web应用性能的十种策略
在当今的数字化时代,Web应用的性能直接影响用户体验和业务成效。本文深入探讨了优化Web应用性能的十种策略,从前端的资源优化到后端的架构改进,涵盖了缓存机制、异步加载、数据库优化等关键技术手段。这些策略不仅能提升响应速度,还能显著减少服务器负担和带宽消耗,为开发者提供了一系列切实可行的解决方案。
[收藏]优化基于Win 2000系统的Web服务器性能
[收藏]优化基于Win 2000系统的Web服务器性能
Struts 2 开发者的秘籍:隐藏的表单标签库功能,能否成为你下个项目的大杀器?
【8月更文挑战第31天】Struts 2表单标签库是提升Web页面交互体验的神器。它提供丰富的标签,如`<s:textfield>`和`<s:select>`,简化表单元素创建与管理,支持数据验证和动态选项展示。结合示例代码,如创建文本输入框并与Action类属性绑定,显著提升开发效率和用户体验。通过自定义按钮样式等功能,Struts 2表单标签库让开发者更专注于业务逻辑实现。
69 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
  • 9
    通过外部链接启动 Flutter App(详细介绍及示例)
  • 10
    部署使用 CHAT-NEXT-WEB 基于 Deepseek