Question

我正在使用该库（https://github.com/pedromassango/flutter_delivery）用于抽屉。并且我想在主页（容器）小部件中显示本地html内容，并且我遵循了此Webview教程（http://www.coderzheaven.com/2019/05/25/load-local-html-file-into-webview-in-flutter-call-js-function-from-flutter/）

但是对我没有任何帮助！在此先感谢！

http://www.coderzheaven.com/2019/05/25/load-local-html-file-into-webview-in-flutter-call-js-function-from-flutter/

main.dart

import 'dart:convert';
import 'package:delivery/circular_image.dart';
import 'package:delivery/menu_page.dart';
import 'package:flutter/material.dart';
import 'package:delivery/zoom_scaffold.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(new MyApp());
String filePath = '/assests/files/abc1.html';
WebViewController _webViewController;
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'Zoom Menu',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  MenuController menuController;

  @override
  void initState() {
    super.initState();

    menuController = new MenuController(
      vsync: this,
    )..addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    menuController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (context) => menuController,
      child: ZoomScaffold(
        menuScreen: MenuScreen(),
        contentScreen: Layout(

            contentBuilder: (cc) => Container(
                  color: Colors.grey[600],
                    child: WebView(
                      initialUrl: filePath,
                      javascriptMode: JavascriptMode.unrestricted,
                      onWebViewCreated: (WebViewController webViewController) {
                        _webViewController = webViewController;
                        _loadHtmlFromAssets();
                      },
                    ),

                )),
      ),
    );
  }
  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
        mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
}



pubspec.taml

name: delivery
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:
  webview_flutter: ^0.3.14+1
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  provider: ^2.0.0
dev_dependencies:
  flutter_test:
    sdk: flutter


# The following section is specific to Flutter.
flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assests/files/
    - assests/files/abc1.html

＃我想显示本地html文件内容，但什么也不显示！

＃但可与文本颜色等小部件一起使用

Answer 1

我认为您输入的资产路径错误。

从

更改资产路径

String filePath = '/assests/files/abc1.html';

收件人

String filePath = '/assets/files/abc1.html';

Answer 2

第1步，将/assets/files/abc1.html更改为asset / files / abc1.html，删除第一个/
步骤2 initialUrl：”

完整代码

import 'dart:convert';
import 'package:delivery/circular_image.dart';
import 'package:delivery/menu_page.dart';
import 'package:flutter/material.dart';
import 'package:delivery/zoom_scaffold.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(new MyApp());
String filePath = 'assets/sample.html';
WebViewController _webViewController;
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'Zoom Menu',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  MenuController menuController;

  @override
  void initState() {
    super.initState();

    menuController = new MenuController(
      vsync: this,
    )..addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    menuController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (context) => menuController,
      child: ZoomScaffold(
        menuScreen: MenuScreen(),
        contentScreen: Layout(

            contentBuilder: (cc) => Container(
              color: Colors.grey[600],
              child: WebView(
                initialUrl: '',
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _webViewController = webViewController;
                  _loadHtmlFromAssets();
                },
              ),

            )),
      ),
    );
  }
  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
        mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
}

工作演示

我的Flutter（dart）代码是否有问题？ 'UI中未显示本地HTML'

2 个答案: