构建和使用带有 Back4app 的 Flutter DevTools 扩展

介绍 flutter devtools 是一个强大的调试、检查和分析 flutter 应用程序的工具套件。通过 dart 和 flutter devtools 扩展框架，开发人员可以创建自定义扩展，以增强他们的调试和开发工作流程。这些扩展可以构建为 flutter 网络应用，并无缝集成到 devtools 套件中。 在本教程中，我们将探讨如何创建一个 flutter devtools 扩展，将其与使用 back4app 作为后端服务的 flutter 应用集成，并使用自定义扩展调试该应用。这将帮助您构建量身定制的开发者工具，从而简化您的开发过程，并提供对应用行为的更深入洞察。 先决条件 要完成本教程，您需要： 一个 back4app 账户。请在 back4app com https //www back4app com 注册一个免费账户。 在您的本地计算机上设置 flutter 开发环境。如果您尚未设置，请遵循 flutter 安装指南 https //flutter dev/docs/get started/install 。 对 dart、flutter 小部件和使用 flutter devtools 有基本了解。 步骤 1 – 设置您的 back4app 后端 创建一个 back4app 项目 登录到您的 back4app 账户 https //www back4app com/ 并创建一个新项目。 创建 parse 类 在本教程中，创建一个名为 themesettings 的 parse 类，以存储您的 flutter 应用的主题配置数据： themename (字符串)：主题的名称。 primarycolor (字符串)：主题的主色。 accentcolor (字符串)：主题的强调色。 用示例数据填充类 向 themesettings 类添加几个记录，以模拟您的 flutter 应用将使用的主题配置。 获取您的 back4app 凭据 导航到您的项目设置以检索您的应用程序 id 和客户端密钥，这些是您将需要将 flutter 应用连接到 back4app 的。 步骤 2 – 创建 flutter devtools 扩展 创建一个新的 flutter 项目 打开您的终端或命令提示符并运行： flutter create theme builder extension 设置扩展目录 导航到您的项目根目录并为您的 devtools 扩展创建一个新目录 mkdir devtools extension 在此目录中，创建一个 config yaml 文件以存储 devtools 所需的元数据 package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png 添加依赖项 打开 pubspec yaml 并添加以下依赖项 dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version 运行 flutter pub get 来安装这些依赖项。 创建 devtools 扩展 在 lib/main dart , 用以下代码替换默认内容，以将您的 flutter 网络应用包装在一个 devtoolsextension 小部件中 import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } 这将您的应用包装在 devtoolsextension 小部件中，该小部件处理主题和与 devtools 套件的集成。 添加 devtools 集成 修改您的应用以集成 devtools 特定功能，例如使用 devtoolsbutton 而不是常规的 elevatedbutton class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } 此更改确保您的扩展 ui 与 devtools 套件的其余部分无缝融合。 步骤 3 – 与 back4app 集成 在您的扩展中初始化 parse 由于此扩展将与 back4app 交互，请在您的扩展中初始化 parse import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(devtoolsextension(child themebuilderapp())); } 获取并使用主题数据 在您的扩展中使用来自 back4app 的数据来生成和应用主题 class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } 这段代码从 back4app 获取主题设置并将其显示在列表中。选择一个主题可能会触发额外的逻辑来应用它。 步骤 4 – 在模拟环境中测试您的扩展 在模拟环境中运行扩展 要在不每次编译的情况下测试您的扩展，请使用模拟的 devtools 环境 flutter run d chrome dart define=use simulated environment=true flutter run d chrome dart define=use simulated environment=true 模拟连接的应用程序 启动另一个您的扩展将连接的 flutter 应用程序。将连接应用程序的 vm 服务 uri 和 dtd 服务 uri 复制并粘贴到模拟环境中。 步骤 5 – 构建和发布扩展 构建扩展 一旦您对扩展感到满意，就为生产构建它： flutter pub get flutter build web output=devtools extension/build 验证扩展 使用 devtools 验证命令确保您的扩展配置正确： dart run devtools extensions validate 发布扩展 将您的扩展发布到 pub dev 以便其他开发者可以使用它： flutter pub publish 结论 在本教程中，您学习了如何创建一个 flutter devtools 扩展，将其与 back4app 集成以提供后端服务，并在模拟环境中进行测试。通过扩展 devtools，您可以构建自定义工具，以提高您的生产力并提供有关应用程序行为的新见解。一旦您的扩展准备就绪，将其发布到 pub dev 允许其他开发者受益于您的工作。 有关使用 flutter 与 back4app 的更多信息，请查看 back4app 文档 https //www back4app com/docs 和 flutter devtools 文档 https //flutter dev/docs/development/tools/devtools/overview 祝您编码愉快！