flutter webview y verificacion de conexion internet
Flutter permite la generation de una app unica que se pude desplegar tanto en android como en iOS.
Aunque el desarrollo como tal es unica, el modo de compilacion dependera de
si es android, se puede compilar tanto en Linux como windows, si es para iOS.
la compilacion de hacerse en un Mac
Sistema basico del uso de webView y que verifica la conexion de internet.
Agregar la dependencia en pubspect.yaml
AndroidStudioProjects/iosfacturacion/pubspec.yaml
agregar la dependencia flutter:
dependencies:
flutter:
sdk: flutter
flutter_webview_plugin: ^0.3.11 //Actualizr a la ultima version
Tener cuidado con la identacion flutter_webview debe quedar alineado con flutter:
sino marca un error de que flutter solo permite una declaración o error semejante.
Una vez declarada la libreria debe debe ser importada, tener cuidado con los caracteres mayúsculos y minúsculos en esta aplicación
dart es en minúsculas en la documentación en general se encuentra como Dart.
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
Para que la app desarrollada pueda usar internet deben definirse los permisos en los manifiestos
de android tanto en debug (pruebas) como en release (produccion):
AndroidStudioProjects/iosfacturacion/android/app/src/debug/AndroidManifest.xml AndroidStudioProjects/iosfacturacion/android/app/src/main/AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET"/><application android:usesCleartextTraffic="true"> </application>
El uso de url dentro de la aplicacion deben quedar bien conformadas adicionar el http:// a la url para que la pagina a cargar quede bien conformada
Para generar el apk para iOS, debe configurarse Info.plist AndroidStudioProjects/iosfacturacion/ios/Runner/Info.plist
y adiccionar la siguiente linea.,
<key>io.flutter.embedded_views_preview</key>
<true/>
Para Produccion
1. Generar firma digital.
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
salida de este archivo colocarla en: android/app/key.jks
2. Crear el archivo /android/app/key.properties
storePassword=supassword
keyPassword=supasword
keyAlias=key
storeFile=/home/venus/AndroidStudioProjects/iosfacturacion/key.jks
3. Editar Archivo android/app/build.gradle
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}
def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android {
compileSdkVersion 28
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
lintOptions {
disable 'InvalidPackage'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.iosfacturacion"
minSdkVersion 16
targetSdkVersion 28
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
signingConfigs {
release {
storeFile file('key.jks')
storePassword "supassword"
keyAlias "key"
keyPassword "supassword"
}
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.release
}
}
}
flutter {
source '../..'
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
********************************************
3. Hay ocasiones en que al generar la compilacion muestra un error de
similar a esto:
ould not resolve all artifacts for configuration ':app:debugRuntimeClasspath'. Failed to transform libs.jar to match attributes {artifactType=processed-jar,
Se propone efectuar los siguientes comandos para solucionar el problema
Step 1. flutter build apk --debug
Step 2. flutter build apk --profile
Step 3. flutter build apk --release
Para solucionar el problema
****************************************************************
********************************************************
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'Dart:io'; // En este caso la app empotra un sitio web en qque esta en susitio.com en el puerto 8080String selectedUrl = 'http://susitio.com:8080/facturacion' ;
String mensaje = 'Verifique su conexion a Internet,\n\n '
'si esta correcta, comuniquese con la administracion '
'para verificar que el servidor este activo.\n\n'
'Presione el boton re-intentar.';
Future<void> verificaConexion() async {
try { //El sistema verifica la conexion buscando la pagina de google.com o cualquiera de //de su preferencia ue se tenga certeza esta en funcionamiento para usarla como //referencia de conexion //Si la conexion es exito llama la clase myApp en caso contrario el catch //dirije el sistema a la class myError
final result = await InternetAddress.lookup('google.com');
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
runApp(MyApp());
}
} catch (e) {
runApp(MyError());
}
}
void main() async {
await verificaConexion();
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.blue
),
home: WebviewScaffold(
withZoom: true,
url: selectedUrl,
appBar: new AppBar(
title: new Text("Facturacion v2.0"),
leading: IconButton(
tooltip: 'Inicio',
icon: const Icon(Icons.autorenew),
onPressed: () async {
await verificaConexion();
},
),
),
),
debugShowCheckedModeBanner: false,
);
}
}class MyError extends StatelessWidget {
static const String _title = 'Error';
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}//Si el sistema encuentra un error de conexion, carga un// widget informando del error y dejando a disposicion del// del usuario un boton par que intente conectarse de nuevo.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Error de conexion v2.0.'),
leading: IconButton(
tooltip: 're-inicio',
icon: const Icon(Icons.autorenew),
onPressed: () async {
await verificaConexion();
},
),
),
body: Center(
child:Text(mensaje,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 15)
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () async {
await verificaConexion();
},
label: Text('re-intentar'),
icon: Icon(Icons.autorenew ),
backgroundColor: Colors.pink,
),
);
}
}
}
Para generar la app de produccion, colocarse en modo consola de sus sistema, ir al directorio raiz de la apliacion.
En este caso por ejemplo:
AndroidStudioProjects/iosfacturacion
y ejecutar el comando: $ flutter build apk --release
Recordar ejecutar el comando en modo usuario, no como root.
Si todo quedo bien en la consola se muestra donde quedo generada
la app
Comentarios
Publicar un comentario