El acceso a sitios web, imágenes y archivos mediante códigos QR es muy utilizado en la actualidad. Estos códigos QR se utilizan para realizar pagos, lo cual es fácil de usar. Puede ver esta función en varias aplicaciones de pago como Google Pay, Amazon Pay y muchas más. En el artículo de hoy vamos a ver cómo generar códigos QR para ciertos enlaces y escáneres de códigos QR en la app flutter.
Siga los pasos a continuación para crear una aplicación simple de escáner y generador QR en Flutter:
Paso 1: Primero agregue la siguiente dependencia en su archivo pubspec.yaml
Dart
dependencies: path_provider: ^1.6.24 qr_flutter: ^3.2.0 barcode_scan_fix: ^1.0.2
Ahora haga clic en pub.get para configurar.
Paso 2: ahora navegue hasta el archivo main.dart() y devuelva Material App()
Primero, hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título de nuestra aplicación y luego declaramos el tema de nuestra aplicación como primarioSwatch como índigo. Luego le hemos dado nuestra primera pantalla o aplicación deslizante en el hogar: HomePage()
Dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
//Given Title
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
//Given Theme Color
theme: ThemeData(
primarySwatch: Colors.indigo,
),
//Declared first page of our app
home: HomePage(),
);
}
}
Paso 3: Declarar StatefulWidget() para HomePage
En StatefulWidget() devuelve el widget Scaffold() . En Scaffold() Widget en la sección del cuerpo, hemos declarado que Container() tiene ancho y alto. En ese Container() le hemos dado a Column dentro de la cual le hemos dado mainAxisAlignment como centro y CrossAxisAlignment como un tramo. Después de eso, le hemos dado una imagen como imagen de red debajo de esa imagen, le hemos dado FlatButton() redondeado que tiene color, radio de borde y lado de borde. En ese FlatButton le hemos dado el método onPressed que se usa para navegar a la siguiente pantalla ScanQR().
Debajo de eso, hemos dado otro FlatButton() redondeado que tiene color, radio de borde y lado de borde. En ese FlatButton le hemos dado el método onPressed que se usa para navegar a la siguiente pantalla GenerateQR() .
Dart
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: 500,
height: 500,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
//Display Image
Image(image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQyYwscUPOH_qPPe8Hp0HAbFNMx-TxRFubpg&usqp=CAU")),
//First Button
FlatButton(
padding: EdgeInsets.all(15),
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=> ScanQR()));
},
child: Text("Scan QR Code",style: TextStyle(color: Colors.indigo[900]),),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(color: Colors.indigo[900]),
),
),
SizedBox(height: 10),
//Second Button
FlatButton(
padding: EdgeInsets.all(15),
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>
GenerateQR()));
},
child: Text("Generate QR Code", style: TextStyle(color: Colors.indigo[900]),),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(color: Colors.indigo[900]),
),
),
],
),
)
);
}
}
Paso 4: Navegación a la página ScanQR().
En este archivo primero, hemos importado el paquete barcode_scan_fix . Luego hemos creado StateFulWidget para la clase ScanQR . En ese estado, hemos declarado String como qrcoderesult = ‘Not yet Scanned’ . Después de eso, en Scaffold() hemos declarado Appbar con el título. En la sección del cuerpo, hemos declarado Column() envuelto con Container() y dado mainAxisAlignment como centro y CrossAxisAlignment como extensión. Después de eso, hemos declarado dos widgets de texto, el primer widget de texto declarado para el título dado. Y el segundo widget de texto se usa para declarar la String que hemos dado. Después de eso, le hemos dado unFlatButton() y en su método onPressed , le hemos dado codeScanner que se utiliza para escanear el código QR que hemos importado de la biblioteca bar_code_scan_fix.
Dart
import 'package:barcode_scan_fix/barcode_scan.dart';
import 'package:flutter/material.dart';
class ScanQR extends StatefulWidget {
@override
_ScanQRState createState() => _ScanQRState();
}
class _ScanQRState extends State<ScanQR> {
String qrCodeResult = "Not Yet Scanned";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Scan QR Code"),
),
body: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
//Message displayed over here
Text(
"Result",
style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
Text(
qrCodeResult,
style: TextStyle(
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
SizedBox(
height: 20.0,
),
//Button to scan QR code
FlatButton(
padding: EdgeInsets.all(15),
onPressed: () async {
String codeSanner = await BarcodeScanner.scan(); //barcode scanner
setState(() {
qrCodeResult = codeSanner;
});
},
child: Text("Open Scanner",style: TextStyle(color: Colors.indigo[900]),),
//Button having rounded rectangle border
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.indigo[900]),
borderRadius: BorderRadius.circular(20.0),
),
),
],
),
),
);
}
}
Paso 5: Navegar a la página GenerateQr().
Primero hemos dado StateFulWidget() para la clase GenerateQr() . En eso, hemos dado la variable final como TextEditingController(). En la sección Scaffold() le hemos dado appbar junto con el título. En la sección del cuerpo , le hemos dado a Container() que tiene Column() con mainAxisAlignment como centro y CrossAxisAlignment como extensión. Envuelto con SingleChildScrollView(). Después de eso, le hemos dado TextField()para dar enlace de entrada para convertir en un código de barras. Después de eso, le hemos dado FlatButton() que convertirá nuestro enlace en un código QR. En el onPressed de este FlatButton() hemos declarado su lógica en la que se utiliza la biblioteca importada qr_link para convertir el enlace en código QR.
Dart
import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
class GenerateQR extends StatefulWidget {
@override
_GenerateQRState createState() => _GenerateQRState();
}
class _GenerateQRState extends State<GenerateQR> {
String qrData="https://github.com/ChinmayMunje";
final qrdataFeed = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
//Appbar having title
appBar: AppBar(
title: Center(child: Text("Generate QR Code")),
),
body: Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
//Scroll view given to Column
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
QrImage(data: qrData),
SizedBox(height: 20),
Text("Generate QR Code",style: TextStyle(fontSize: 20),),
//TextField for input link
TextField(
decoration: InputDecoration(
hintText: "Enter your link here..."
),
),
Padding(
padding: const EdgeInsets.all(8.0),
//Button for generating QR code
child: FlatButton(
onPressed: () async {
//a little validation for the textfield
if (qrdataFeed.text.isEmpty) {
setState(() {
qrData = "";
});
} else {
setState(() {
qrData = qrdataFeed.text;
});
}
},
//Title given on Button
child: Text("Generate QR Code",style: TextStyle(color: Colors.indigo[900],),),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(color: Colors.indigo[900]),
),
),
),
],
),
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chinmaymunje96 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA