Flutter本地资源服务插件local_assets_server的使用

Flutter本地资源服务插件local_assets_server的使用

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  local_assets_server: ^2.0.2+10

示例

以下是一个完整的示例代码，展示了如何使用local_assets_server插件来创建一个本地HTTP服务器，并通过WebView加载本地资源。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '本地资源服务演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '本地资源服务演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isListening = false;
  String? address;
  int? port;
  WebViewController? controller;

  void _incrementCounter() {
    controller?.evaluateJavascript('window.increment()');
  }

  [@override](/user/override)
  initState() {
    _initServer();
    super.initState();
  }

  _initServer() async {
    final server = new LocalAssetsServer(
      address: InternetAddress.loopbackIPv4,
      assetsBasePath: 'web', // 指定本地资源的基础路径
      logger: DebugLogger(), // 日志记录器
    );

    final address = await server.serve(); // 启动服务器并获取地址和端口

    setState(() {
      this.address = address.address;
      port = server.boundPort!;
      isListening = true;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: isListening
          ? WebView(
              debuggingEnabled: true, // 启用调试功能
              initialUrl: 'http://${address}:${port}', // 使用本地服务器的地址和端口
              javascriptMode: JavascriptMode.unrestricted, // 允许JavaScript执行
              onWebViewCreated: (WebViewController c) {
                controller = c; // 保存WebView控制器
              },
            )
          : Center(child: CircularProgressIndicator()), // 显示加载指示器
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 增加计数器
        tooltip: '增加',
        child: Icon(Icons.add), // 图标
      ),
    );
  }
}

更多关于Flutter本地资源服务插件local_assets_server的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地资源服务插件local_assets_server的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter本地资源服务插件local_assets_server的代码案例。这个插件允许你在Flutter应用中启动一个本地HTTP服务器，从而可以通过HTTP请求访问你的本地资源文件（如图片、JSON文件等）。

首先，确保你已经将local_assets_server插件添加到了你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  local_assets_server: ^最新版本号 # 请替换为实际的最新版本号

然后，在你的Flutter项目中，你可以按照以下步骤使用local_assets_server：

  1. 导入插件：

    在你的Dart文件中导入local_assets_server插件：

    import 'package:local_assets_server/local_assets_server.dart';
import 'package:http/http.dart' as http;

  2. 启动本地服务器：

    在你的Flutter应用的初始化代码中（例如MainActivity.kt或AppDelegate.swift中，或者在Dart代码的initState方法中），启动本地服务器：

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 启动本地服务器
  final server = await LocalAssetsServer.start(
    port: 8080, // 你可以指定一个端口号
    rootDirectory: 'assets', // 指定资源文件的根目录
    allowCors: true, // 是否允许跨域请求
  );

  // 打印服务器URL（仅在开发中使用，生产环境中不要暴露此信息）
  print('Local server started at http://localhost:${server.port}');

  runApp(MyApp());
}

    注意：rootDirectory应该是你Flutter项目中包含资源文件的目录，通常是assets目录。确保你的资源文件已经被正确添加到pubspec.yaml中的assets部分。

  3. 访问本地资源：

    在你的Flutter应用中，你可以使用HTTP客户端（如http包）来访问本地服务器上的资源。例如，如果你有一个名为example.json的文件在assets目录中，你可以这样访问它：

    import 'dart:convert';

void fetchLocalFile() async {
  try {
    final response = await http.get(Uri.parse('http://localhost:8080/example.json'));

    if (response.statusCode == 200) {
      final jsonData = jsonDecode(response.body);
      print(jsonData);
    } else {
      throw Exception('Failed to load local file: ${response.statusCode}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

    你可以在任何需要的地方调用fetchLocalFile函数来访问你的本地资源文件。

以上就是一个使用local_assets_server插件在Flutter中启动本地HTTP服务器并访问本地资源文件的完整代码案例。请确保在生产环境中注意安全性，不要将本地服务器的URL暴露给不受信任的用户。

回到顶部