Flutter开发web应用第一课

背景

因公司新项目启动，需要给出一个web版本的核心demo，上一个项目是flutter写的windows应用，正好趁机熟悉一下flutter在web开发的使用。

新建工程

IDE为android studio,新建flutter工程，没什么差别，记得勾选web就行，目录结构如图：

工程目录结构
目录结构图

新手注意的地方

1、让 Flutter 使用 path 策略

在main.dart中，需要导入flutter_web_plugins/url_strategy.dart包，并在main(){}函数中usePathUrlStrategy();这是官方文档中让Flutter 使用 path 策略的方法：
使用前url可能长这样：flutterexample.dev/#/path/to/screen，使用后：flutterexample.dev/path/to/screen

import 'package:flutter_web_plugins/url_strategy.dart';
void main() async {
  await Global.init(); // 初始化sp本地存储
  usePathUrlStrategy();
  runApp(const MyApp());
}

2、使用本地化存储shared_preferences

这里需要注意的是，引入Getx框架的Get_storage，可以实现对象存储，但刷新网页后，数据会重置。因此需要使用shared_preferences来实现数据本地持久化。

打包应用

运行flutter build web --release打包，build/web将会生成一个包含Flutter Web 应用程序的静态文件夹，便可以将这些文件部署到任何支持静态文件的 Web 服务器上。比如 /www/wwwroot/my_domain下：

*Nginx下需要配置文件设置:

server
{
    listen 80;
    server_name my_domain;
    index index.html index.htm default.htm default.html;
    root /www/wwwroot/my_domain;
    # 防止直接访问子url会404;
    location / {
        try_files $uri $uri/ /index.html;
    }
  ......
}

如果要使用docker部署，则在release目录下新建Dockerfile(注意此文件没有后缀名)配置文件,并输入以下内容：

# 使用 Nginx 作为基础镜像
FROM nginx:latest

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 复制 Flutter Web 应用的 release 文件到工作目录
COPY build/web/ .

# 配置 Nginx 以处理路由
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 Nginx 的默认端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

请注意，上述 Dockerfile 使用了 Nginx 作为基础镜像。此外，还需要提供一个 nginx.conf 文件，以确保 Nginx 正确处理 Flutter Web 应用程序的路由。以下是一个简单的 nginx.conf 文件示例：

server {
    listen 80;
    server_name my_domain;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

请将这两个文件放在与 Dockerfile相同的目录中(release文件夹下)。然后使用以下命令构建和运行 Docker 容器：

docker build -t my_image_name .

将构建好的my_image_name文件上传至服务器后，切换到当前目录执行：

docker run -p 8080:80 my_image_name

确保端口映射适用于当前服务器的环境，并且可以通过浏览器访问 http://my_domain:8080 来查看Flutter Web 应用程序。

以上