项目技术

DevTool

官方文档 (opens new window)

掘金：Flutter 的可视化界面、绘制性能调优 🔧 —— DevTools (opens new window)

Fluro 路由

Fluro (opens new window)：

• 支持参数通配符 /room/:id
• 简化自定义动画

router/index.dart，定义路由：

import 'package:fluro/fluro.dart';
import 'package:moments/pages/test/index.dart';
import 'package:moments/pages/login/index.dart';
import 'package:moments/pages/article_detail/index.dart';
import 'package:moments/pages/not_found/index.dart';
import 'package:flutter/material.dart';

class AppRouter {
  static late FluroRouter router;
  static late Function navigateTo;

  // 1. 定义路由
  static String root = '/'; // 必须要有一个根路由
  static String test = '/test';
  static String login = '/login';
  static String articleDetail = '/article_detail/:id';

  static List<Map> routes = [
    {
      "path": root, // 必须要有个根路由
      "handler": handlerMaker(const PageTest()),
    },
    {
      "path": test,
      "handler": handlerMaker(const PageTest()),
    },
    {
      "path": login,
      "handler": handlerMaker(const PageLogin()),
    },
    {
      "path": articleDetail,
      "handler": articleDetailHandler,
    },
  ];

  // 通用的 Handler
  static Handler handlerMaker(Widget widget) {
    return Handler(handlerFunc: (context, Map<String, List<String>> params) {
      return widget;
    });
  }

  // params Handler
  static Handler articleDetailHandler =
      Handler(handlerFunc: (context, Map<String, List<String>> params) {
    return PageArticleDetail(articleId: params['id']![0]);
  });

  // 404 Handler
  static Handler notFoundHandler =
      Handler(handlerFunc: (context, Map<String, List<String>> params) {
    return const PageNotFound();
  });

  // 3. 编写路由处理函数
  static void configureRoutes() {
    router = FluroRouter();
    navigateTo = router.navigateTo;
    
    for (var route in routes) {
      router.define(route['path'], handler: route['handler']);
    }

    router.notFoundHandler = notFoundHandler;
  }
}

Application.dart，初始化路由：

import 'package:flutter/material.dart';
import 'package:moments/router/index.dart';

class Application extends StatelessWidget {
  const Application({super.key});

  @override
  Widget build(BuildContext context) {
    AppRouter.configureRoutes();
    
    return MaterialApp(
      title: 'moments',
      onGenerateRoute: AppRouter.router.generator,
    );
  }
}

article_detail.dart 路由通配符：

import 'package:flutter/material.dart';

class PageArticleDetail extends StatelessWidget {
  final String articleId;

  const PageArticleDetail({Key? key, required this.articleId})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageArticleDetail')),
      body: Center(child: Text('PageArticleDetail $articleId')),
    );// Navigator.pushNamed(context, '/article_detail/123'); 或 APP.navigateTo(context, '/article_detail/123', transition: TransitionType.fadeIn);
  }
}

技术杂记

如何访问根目录？

当使用 package:当前项目名称 时，通常指的是在Flutter项目中lib目录下的代码。

常用命令

flutter doctor # 检查环境
flttuer devices # 查看设备
flutter emulators # 查看模拟器
flutter run # 运行应用

保存时热重载

• 运行和调试模式下 vscode 中， 设置 Dart: Hot Reload On Save Dart: Flutter Hot Reload On Save 为 默认

其实我更想解决的是，如何在终端命令行中，保存时热重载。但没有很好的办法。

调试 web

命令，指定 端号 和 ip 开启 web 服务：

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 8989

对应的 launch.json 是（需要在服务启动后，修改浏览器中的连接为当前ip地址）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Flutter (Chrome)",
      "program": "lib/main.dart",
      "deviceId": "chrome",
      "request": "launch",
      "type": "dart",
      "args": [
        "--web-hostname",
        "0.0.0.0",
        "--web-port",
        "8989"
      ]
    }
  ]
}