1. 程式人生 > >Flutter ------- WebView載入網頁

Flutter ------- WebView載入網頁

在Flutter 載入網頁?也是有WebView的哦,和Android一樣


1.新增依賴

dependencies:
flutter_webview_plugin: ^0.2.1+2

2.匯入庫

import 'import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; //匯入前需要配置

效果圖:


程式碼:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> titleContent = [];
    titleContent.add(new Text(
      "關於我們",
      style: new TextStyle(color: Colors.white),
    ));
    titleContent.add(new Container(width: 50.0));
    // WebviewScaffold是外掛提供的元件,用於在頁面上顯示一個WebView並載入URL
    return new WebviewScaffold(
      url:"https://blog.csdn.net/dickyqie",
      // 登入的URL
      appBar: new AppBar(
        title: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: titleContent,
        ),
        iconTheme: new IconThemeData(color: Colors.white),
      ),
      withZoom: true,
      // 允許網頁縮放
      withLocalStorage: true,
      // 允許LocalStorage
      withJavascript: true, // 允許執行js程式碼
    );
  }
}

WebView庫 詳細的說明文件

https://pub.dev/packages/f