Flutter + webview在android真机上运行html指南

1、在flutter项目中安装两个插件jaguar_flutter_asset和webview_flutter。

2、测试：在android studio里面打开该android项目确保程序可以正常运行。

注：该处需提前配置好gradle和阿里云镜像。

3、将打包后的文件夹放在根目录的assets文件夹下（需新建assets文件夹）。

注：需提前在项目里打包配置好publicpath防止路径出错。

4、配置publicspec.yaml

注：每个目录每个层级都要配置完整。
5、Main.dart主要运行代码

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:jaguar/jaguar.dart';
import 'package:jaguar_flutter_asset/jaguar_flutter_asset.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ServerService().start(); // 启动本地服务器
  runApp(MyApp());
}

class ServerService {
  Jaguar? _server;

  Future<void> start() async {
    if (_server != null) return;
    
    _server = Jaguar(address: "127.0.0.1", port: 8000);
    _server!.addRoute(serveFlutterAssets());
    await _server!.serve(logRequests: true);
    print('服务器已启动：http://127.0.0.1:8000');
  }

  Future<void> stop() async {
    if (_server == null) return;
    await _server!.close();
    _server = null;
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: HomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 已移除AppBar
      body: SafeArea(
        child: WebViewWidget(
          controller: WebViewController()
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..loadRequest(Uri.parse('http://127.0.0.1:8000/dist/index.html')),
        ),
      ),
    );
  }
}

注：net::ERR_CLEARTEXT_NOT_PERMITTED 报错需在android的AndroidManifest.xml文件里设置android:usesCleartextTraffic=“true”