WebViewScaffold es el complemento Flutter WebView. Si desea abrir cualquier página web sin usar el navegador de su dispositivo, puede hacerlo fácilmente usando el widget WebViewScaffold.
Propiedades de WebViewScaffold:
- url : La url en la que queremos buscar.
- barra de aplicaciones : laagregue appBar en nuestra aplicación flutter.
- withZoom : si permite que su página web se acerque o se aleje , póngalo en verdadero, de lo contrario, falso.
- initialChild : Se utiliza paraagregue su propio widget mientras se carga la página web.
- oculto : si es verdadero , muéstrenos CircularProgressIndicator mientras se carga la página web.
Ejemplo:
dardo principal
Dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main()=> runApp(MaterialApp(
home:MyHomePage(),
debugShowCheckedModeBanner: false,
theme:ThemeData(
primarySwatch: Colors.blue
)
));
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
TextEditingController controller=TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin= FlutterWebviewPlugin();
var url= "https://google.com";
@override
void initState() {
super.initState();
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {});
}
searchURL(){
setState(() {
url = "https://www."+controller.text;
flutterWebviewPlugin.reloadUrl(url);
controller.text=url;
});
}
@override
Widget build(BuildContext context) {
return WebviewScaffold(
url: url,
withZoom: true,
hidden: true,
// initialChild: Container(
// child:Center(child: Text("Loading"),)
// ),
appBar: AppBar(
backgroundColor: Colors.green,
leading: Icon(Icons.search),
title: TextField(
controller: controller,
textInputAction: TextInputAction.search,
onSubmitted:(url)=>searchURL(),
style: TextStyle(
color: Colors.white
),
decoration: InputDecoration(
hintText: "Search Here",
hintStyle: TextStyle(color: Colors.white)
),
),
actions: [
IconButton(icon: Icon(Icons.arrow_back),
onPressed: (){
flutterWebviewPlugin.goBack();
controller.text="";
}
),
IconButton(icon: Icon(Icons.arrow_forward),
onPressed: searchURL,),
],
),
);
}
}
Producción:
Explicación:
- Agregue flutter_webview_plugin en las dependencias en el archivo pubspec.yaml .
- Ahora regrese al archivo main.dart .
- inicialmente, la URL es «https://google.com» y cuando se inicia la aplicación, se cargará esta URL .
- Cuando el usuario escriba la URL y presione Intro, se llamará a searchURL() y se cargará la URL solicitada .
- Si el usuario quiere regresar, presione la tecla arrow_back .
- Si desea agregar su propio hijo inicial, elimine el comentario de initialChild y agregue su widget.
- establezca withZoom = true si permite que su página web se acerque o se aleje.
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA