Como adicionar HTML embutido no Webview Flutter

Foto de Ahmad Odeh no Unsplash

Achei que você também dançasse depois de ver a imagem acima, porque estou agora! Haha ...

Ok, de volta ao assunto do dia… Não vou passar por todo aquele “ criar um app flutter, blá, blá, blá ”. Eu acredito que você pode ou já criou um app Flutter, eu acredito em você!

Agora eu tenho o arquivo dardo chamado: 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,
        );
      }),
    );
  }

}

De qualquer forma, você tem algum comentário ou algo a dizer, me avise.
Ou você quer doar para este jovem e elegante macho alfa incrivelmente bonito ... Você ainda pode me pedir!

Aqui está a parte 2, usando Javascript

aplausos e continue codificando!

Suggested posts

Android | Gboard foi atualizado com um novo layout para tablets

O Google atualizou o layout de seu teclado bem a tempo para o lançamento do Pixel Fold e do Pixel Tab.

Android | Gboard foi atualizado com um novo layout para tablets

O Google atualizou recentemente seu aplicativo de teclado Gboard para Android para incluir um novo layout otimizado para tablets. Percebi esta manhã que estava tendo alguma dificuldade para digitar e, após uma inspeção mais detalhada, percebi que o teclado havia sido trocado.

Google | O que é E/S?

O Google escolheu um nome interessante para sua conferência anual de desenvolvedores.

Google | O que é E/S?

O nome "I/O" significa entrada e saída. A princípio, fiquei confuso com esse nome, mas depois de pesquisar na Wikipedia, percebi que é um acrônimo simples e direto.

Related posts

Chega de senhas — como as senhas substituirão sua senha

Chega de senhas — como as senhas substituirão sua senha

Para evitar ambigüidade, os seguintes termos serão usados; Autenticador; O celular que está sendo utilizado para fazer o login no Site; O site ou aplicativo que o usuário está usando para fazer a solicitação de login do Serviço; O fornecedor que fornece o serviço fornecido, por exemplo

Rede de TV Twitter

Rede de TV Twitter

O que é velho agora é novo de novo e o que costumava ser a coisa brilhante e brilhante agora parece opaco. Não estou falando de jeans JNCO fazendo um retorno entre os garotos legais do centro da cidade junto com outras modas do final dos anos 1990.

O desafio de leitura Goodreads é tóxico

O desafio de leitura Goodreads é tóxico

A coceira na minha mão aumentou enquanto eu negociava com o livreiro local por mais um livro. Este livro, como o resto que comprei recentemente, encontraria seu trono na minha pilha 'To Be Read' (TBR); e ainda assim, eu comprei.

Coletando OSINT para caçar ameaças

Coletando OSINT para caçar ameaças

Olá, entusiastas cibernéticos! Bem-vindo de volta ao OSINT para a série de caça a ameaças. No primeiro artigo, apresentei uma visão geral do OSINT e sua importância na caça às ameaças.