Flutter资源加载插件shelf_flutter_asset的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter资源加载插件shelf_flutter_asset的使用

插件介绍

shelf_flutter_asset 是一个简单的的手册，用于将Shelf生态系统中的文件从Flutter资产中加载。

使用示例

  1. 绑定为根处理器：

    import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_flutter_asset/shelf_flutter_asset.dart';

void main() {
  var assetHandler = createAssetHandler(defaultDocument: 'index.html');

  io.serve(assetHandler, 'localhost', 8080);
}

  2. 与shelf_router结合使用：

    import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;

void main() {
  var app = Router();
  final assetHandler = createAssetHandler();

  app.get('/hello', (Request request) {
    return Response.ok('hello-world');
  });

  app.get('/assets/<ignored|.*>', (Request request) {
    return assetHandler(request.change(path: 'assets'));
  });

  io.serve(app, 'localhost', 8080);
}

  3. 自定义根路径：

    import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;

void main() {
  var app = Router();
  final assetHandler = createAssetHandler(rootPath: 'assets/html');

  app.get('/hello', (Request request) {
    return Response.ok('hello-world');
  });

  app.get('/assets/<ignored|.*>', (Request request) {
    return assetHandler(request.change(path: 'assets/html'));
  });

  io.serve(app, 'localhost', 8080);
}

示例代码

import 'package:flutter/material.dart';
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_flutter_asset/shelf_flutter_asset.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  final assetHandler = createAssetHandler(defaultDocument: 'index.html');

  io.serve(assetHandler, 'localhost', 8080);

  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shelf Flutter Asset Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Shelf Flutter Asset Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late final WebViewController _controller;

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

    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadRequest(Uri.parse('http://localhost:8080'));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 shelf_flutter_asset 插件在 Flutter 应用中加载资源的代码示例。shelf_flutter_asset 是一个 Dart 包，它允许你将 Flutter 资产（assets）作为静态文件服务，通常用于在开发环境中提供静态资源，如 HTML、CSS、JavaScript 文件或图像等。

首先，确保你已经在 pubspec.yaml 文件中定义了所需的资产：

flutter:
  assets:
    - assets/images/logo.png
    - assets/html/index.html

然后，在你的 Dart 项目中，你可以使用 shelf_flutter_asset 来创建一个简单的服务器，该服务器将提供这些资产。以下是一个完整的示例：

  1. 添加依赖：

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

dependencies:
  flutter:
    sdk: flutter
  shelf: ^1.2.0
  shelf_flutter_asset: ^0.3.0
  1. 创建服务器：

创建一个 Dart 文件（例如 server.dart），并在其中编写以下代码：

import 'dart:io';
import 'package:shelf/shelf.dart';
import 'package:shelf_flutter_asset/shelf_flutter_asset.dart';
import 'package:flutter/services.dart' show rootBundle;

void main() async {
  // 使用 shelf_flutter_asset 创建一个处理器，指定根目录为 Flutter 的资产目录
  var handler = createFlutterAssetHandler(
    rootBundle,
    'assets/', // 这个路径应该与 pubspec.yaml 中的路径一致
  );

  // 创建一个 shelf 服务器，监听本地 8080 端口
  var server = await shelf.serve(handler, 'localhost', 8080);

  print('Serving assets at http://localhost:8080');
  // 保持服务器运行
  await server.close(); // 这行代码实际上在示例中不会被执行，除非有某种方式触发关闭
}

注意：在真实的应用场景中，你可能需要一个方式来优雅地关闭服务器，比如通过接收一个信号或请求。上面的示例代码为了简洁而省略了这部分。

  1. 运行服务器：

在命令行中，导航到你的 Flutter 项目的根目录，并运行以下命令来启动服务器：

dart run server.dart

现在，你的服务器应该正在运行，并且可以通过访问 http://localhost:8080/images/logo.png 或 http://localhost:8080/html/index.html 来加载你的 Flutter 资产。

这个示例展示了如何使用 shelf_flutter_asset 来加载和提供 Flutter 资产。根据你的具体需求，你可以进一步自定义服务器的行为，比如添加路由、认证、缓存等。

回到顶部