Jak dodać wbudowany kod HTML w Webview Flutter

Myślałem, że ty też będziesz tańczyć po obejrzeniu powyższego obrazka, ponieważ teraz jestem! Ha ha…

OK, wracając do dnia dzisiejszego… Nie zamierzam przechodzić przez to wszystko „ stwórz aplikację flutter, blah blah blah ”. Wierzę, że możesz lub już stworzyłeś aplikację Flutter, wierzę w Ciebie!

Teraz mam plik darta o nazwie: Webview.dart.

import 'package:flutter/material.dart';

class Webview extends StatefulWidget {
  @override
  _WebviewState createState() => _WebviewState();
}

class _WebviewState extends State<Webview> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: ^2.0.9

dev_dependencies:
  flutter_test:
    sdk: flutter

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "connelblaze.cb.ranqz"
    minSdkVersion 20
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

<manifest...
>
<uses-permission android:name="android.permission.INTERNET" />
...
<application

import 'package:flutter/material.dart';
import 'package:ranqz/screen/Home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:ranqz/screen/Webview.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Container(
        child: Center(
          child: GestureDetector(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => Webview()));

            },
            child: Text("Go to webview"),
          ),
        ),
      ),
    );
  }
}

import 'dart:async';
import 'dart:convert';

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

class Webview extends StatefulWidget {
  @override
  _WebviewState createState() => _WebviewState();
}

class _WebviewState extends State<Webview> {
  final Completer<WebViewController> _controller =
  Completer<WebViewController>();
  WebViewController _con;

  /*
  *
  * Webview
  * */

  String setHTML(String email, String phone, String name) {
    return ('''
    <html>
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      </head>
      
        <body style="background-color:#fff;height:100vh ">

          <div style="width: 50%; margin: 0 auto;margin-top: 200px">
            <table class="table table-striped">
              <tbody>
                <tr>
                  <th>Name</th>
                  <th>$name</th>
                </tr>
                <tr>
                  <th>Email</th>
                  <td>$email</td>
                </tr>
                <tr>
                  <th>Phone</th>
                  <th>$phone</th>
                </tr>
              </tbody>
            </table>
            <a type="button" class="btn btn-success" style="width: 210px" href="https://connelevalsam.github.io/connelblaze/">
              Submit
            </a>
          </div>
        </body>
      </html>
      

    ''');
  }

  _printz() => print("Hello");

  _loadHTML() async {
    _con.loadUrl(Uri.dataFromString(
        setHTML(
          "[email protected]",
          "+2347034857296",
          "Connel Asikong"
        ),
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Webview'),
      ),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            // _controller.complete(webViewController);
            _con = webViewController;
            _loadHTML();
          },
          onProgress: (int progress) {
            print("WebView is loading (progress : $progress%)");
          },
          navigationDelegate: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              print('blocking navigation to $request}');
              return NavigationDecision.prevent;
            }
            print('allowing navigation to $request');
            return NavigationDecision.navigate;
          },
          onPageStarted: (String url) {
            print('Page started loading: $url');
          },
          onPageFinished: (String url) {
            print('Page finished loading: $url');
          },
          gestureNavigationEnabled: true,
        );
      }),
    );
  }

}

W każdym razie, masz jakiś komentarz lub cokolwiek do powiedzenia, uderz do mnie.
Albo chcesz przekazać darowiznę temu niesamowicie przystojnemu młodemu, eleganckiemu samcowi alfa… Nadal możesz mnie uderzyć!

Oto część 2, używając JavaScript

okrzyki i kontynuuj kodowanie!