flutter_boilerplate

flutter_boilerplate

Flutter生产级应用启动模板

此Flutter启动模板为生产环境优化,集成图标生成、REST API、分析监控等功能,帮助开发者快速搭建项目框架。模板整合dio、firebase、go_router等实用组件,支持自定义状态管理和应用架构。简化初始配置,加速Flutter应用开发流程。

Flutter模板项目初始化应用开发FirebaseGithub开源项目

Flutter 样板

这是我用于生产应用程序的 Flutter 初始模板,适用于带有 REST 后端的项目。

这个模板的主要目的是让你能够尽快开始下一个生产就绪的 Flutter 项目,而无需处理初始项目设置的所有麻烦。

这是什么

这是一个简单的样板模板,用于创建生产就绪的 Flutter 应用程序,包括图标/启动屏幕生成、REST 样板以及报告(分析、性能和崩溃报告),所有这些都已为你配置好。

这不是什么

由于大家在状态管理和应用架构方面有些过于固执己见,这个模板不对这些主题做出任何意见。

因此,这不是你的状态管理和应用架构模板。 所以,你可以选择任何状态管理方法或移动东西来创建你喜欢的架构。

或者 fork 这个仓库,根据你的喜好自定义模板,使其成为你自己的!

也就是说,我可能会考虑在未来创建包含我的架构和状态管理观点的分支。

开始使用

  1. 获取模板

    通过以下方式之一使用此仓库创建你的项目:

    • 在 Github 上,点击 "Use this template" 按钮,这将允许你使用此仓库作为基线创建项目,或者
    • 将此仓库克隆到你的本地机器
  2. 安装依赖

    运行 flutter pub get 获取依赖项。

  3. 应用程序包名

    现在要在 Android 和 iOS 清单中更改应用程序的包名/捆绑标识符,请运行 flutter pub run change_app_package_name:main <com.new.package.name>

  4. 应用程序名称 接下来,你需要更改应用程序的用户可读标签 - Info.plist(对于 iOS)中的 CFBundleName 和/或 CFBundleDisplayName,以及 AndroidManifest.xml(对于 Android)中应用程序节点的 android:label 字段。

    很遗憾这一步是手动的;如果 change_app_package_name 能为你做这个就好了。

    注意:你还需要在 pubspec.yaml 中更改包的 namedescription

  5. 应用图标

    然后我们将使用 flutter_launcher_icons 包自动生成你的应用启动器图标。

    • 将你想要作为启动器图标的图像复制到 assets/icon/icon.png
    • 现在运行 flutter pub run flutter_launcher_icons。这个命令将从 PNG 文件为不同的 DPI 自动生成 Android 和 iOS 启动器图标,并将它们放置在各自的资源目录中。

    注意:查看包文档以获取有关生成启动器图标的更多配置选项,并相应地更新你的 pubspec.yaml。 例如,你可能想要为不同平台使用不同的图标,因为 Android 允许你使用透明图标,而 iOS 不允许。 然而,此模板中包含的默认配置在大多数情况下已经足够。

  6. 启动屏幕

    然后我们将为两个平台生成原生启动屏幕,你的应用将在加载完成之前显示这些屏幕,为此我们将使用 flutter_native_splash

    • 将你想要在启动屏幕中心显示的图像复制到 assets/splash/splash.png
    • 要更改启动屏幕的背景颜色,请转到 pubspec.yaml 中的 flutter_native_splash -> color 部分,输入你喜欢的颜色代码。默认是白色。
    • 最后,运行 flutter pub run flutter_native_splash:create 以从启动图像生成资源并更新你的清单文件。
  7. 环境变量

    我们将使用 envied 包.env 文件加载应用程序配置。 这将允许我们在不同环境(如生产、暂存或调试模式)下运行应用程序时轻松切换不同的应用程序配置。

    所有 .env 文件都可以放在项目的根目录中。 要设置新环境,创建一个带有 .env 扩展名的新文件(例如 .envdebug.envstaging.env),然后复制 .env-sample 的内容并根据需要填充它。

    lib/env.dart 文件将环境变量导入到应用程序中。查看文档以了解如何使用 envied 包。

    要混淆和隐藏敏感的 ENV 变量,请使用 obfuscate 属性,如下所示:@EnviedField(obfuscate: true)

    注意: 所有 .env 文件(和 enviedenv.g.dart 文件)默认都被 .gitignore 忽略,因为它们可能包含敏感信息,如路径、密钥等。 要指定新的环境变量键,请将它们添加到 .env-sample 文件中,其他开发人员将复制该文件,并提供相应的配置。

  8. Firebase 报告

    在这一步中,我们将把不同的 Firebase 报告工具集成到你的应用程序中,包括 Firebase AnalyticsFirebase PerformanceCrashlytics

    • Firebase 控制台 上创建你的 Firebase 项目
    • 下载你的 GoogleService-Info.plistgoogle-services.json,并将它们放入 iOS 和 Android 的相应文件夹中。我已经在 .gitignore 中忽略了这些文件,这样你就不会不小心将它们检入版本控制系统。
    • 好了,就这样。你完成了!不需要进一步配置;我已经为你做好了。

    注意:

    • 我们在这个项目中使用的所有 Firebase 服务都是免费的 - 至少在写这篇文章时是这样 - 所以它们不会产生任何费用。
    • 通过这一步,我们还使用 dio_firebase_performanceFirebase Performance Monitoring 集成到你的 HTTP 客户端中,这是一个 Dio 拦截器,它将测量所有 HTTP 调用的性能并将统计数据报告给 Firebase。
  9. 待办事项

    在 lib 文件夹中查找任何 TODO,并解决它们。

  10. 开始工作!

    现在开始开发你的应用程序。祝你编码愉快。

  11. 部署

    在发布 Android 应用之前,请确保通过以下方式签名:

    如果你还没有,生成一个 Keystore 文件。如果你已经有了,忽略这一步,转到下一步。

    转到 android/key.properties 并包含你的 Keystore 路径、别名和密码。

  12. 盈利!

<img height=200 src="https://yellow-cdn.veclightyear.com/2b54e442/7715bb0b-411a-4204-a33d-4e7c29f30a92.png">

使用的包

  • change_app_package_name - 使用单个命令更改应用程序包名。它使过程变得非常简单和快速。
  • dio - 我认为这是 Flutter 最好的 HTTP 客户端。可重用的拦截器,对吧?
  • dio_http_cache - Dio 拦截器,用于缓存请求。它拦截请求以响应缓存的数据,或拦截新的远程响应以进行缓存。非常可配置。
  • dio_log - 这是一个 Dio 拦截器,可以在应用程序的 UI 中显示你的请求和响应日志
  • envied - 从 .env 文件加载配置。
  • firebase_analytics - Firebase Google Analytics 的 Flutter 插件,这是一个应用测量解决方案,提供 Android 和 iOS 上的应用使用情况和用户参与度的洞察。
  • firebase_crashlytics - Firebase Crashlytics 的 Flutter 插件。它向 Firebase 控制台报告未捕获的错误。
  • firebase_performance - Firebase 性能监控的 Flutter 插件,这是一个应用测量解决方案,可在 Android 和 iOS 上监控跟踪和 HTTP/S 网络请求。
  • firebase_performance_dio - Dio 的拦截器实现,将 HTTP 请求指标数据发送到 Firebase。
  • flutter_launcher_icons - 一个命令行工具,简化了更新 Flutter 应用启动器图标的任务。
  • flutter_native_splash - 自动生成用于在 Android 和 iOS 中添加启动屏幕的原生代码。可以自定义特定平台、背景颜色和启动图像。
  • freezed - 简单但功能强大的代码生成器,用于不可变类,具有联合/模式匹配/复制等所有好东西。由 Provider 的创建者和维护者 Remi Rousselet 制作。可以与 json_serializable 配合使用,满足你所有的 fromJson()toJson() 需求。
  • go_router - 这个包建立在 Flutter 框架的 Router API 之上,提供了方便的基于 URL 的 API 来在不同屏幕之间导航。
  • screenshots - Screenshots 是一个独立的命令行实用程序和包,用于捕获 Flutter 的屏幕截图图像。
  • pretty_dio_logger - Dio 拦截器,它漂亮地打印通过 Dio 的 HTTP 请求和响应到控制台

给我买杯咖啡

编辑推荐精选

扣子-AI办公

扣子-AI办公

职场AI,就用扣子

AI办公助手,复杂任务高效处理。办公效率低?扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作,覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应,生活工作无缝切换,提升50%效率!

堆友

堆友

多风格AI绘画神器

堆友平台由阿里巴巴设计团队创建,作为一款AI驱动的设计工具,专为设计师提供一站式增长服务。功能覆盖海量3D素材、AI绘画、实时渲染以及专业抠图,显著提升设计品质和效率。平台不仅提供工具,还是一个促进创意交流和个人发展的空间,界面友好,适合所有级别的设计师和创意工作者。

图像生成AI工具AI反应堆AI工具箱AI绘画GOAI艺术字堆友相机AI图像热门
码上飞

码上飞

零代码AI应用开发平台

零代码AI应用开发平台,用户只需一句话简单描述需求,AI能自动生成小程序、APP或H5网页应用,无需编写代码。

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码,轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统,允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令,自动执行排序、公式计算和数据透视等操作,支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内,支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程,代码自动修复

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT,就用博思AIPPT!

博思AIPPT,新一代的AI生成PPT平台,支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等,内置海量精美PPT模板,涵盖商务、教育、科技等不同风格,同时针对每个页面提供多种版式,一键自适应切换,完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命,一站式智能商拍平台

潮际好麦深耕服装行业,是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌,以及国内10万+淘宝、天猫、京东等主流平台的品牌商家,为卖家节省将近85%的出图成本,提升约3倍出图效率,让品牌能够快速上架。

下拉加载更多