如何在Flutter中显示条形码扫描仪的结果? 这是一个条形码/ QR码扫描仪应用程序,具有以下布局: Devices, Sensors
我正在使用的flutter软件包是: barcode_scan:^ 2.0.1 。
当我在窗口小部件列表的脚手架中使用“文本”窗口小部件时,出现错误消息“只能在初始化程序内部访问静态成员”。
我正在提供我的应用代码:
add.dart:
import 'package:flutter/material.dart';
import 'scan.dart';
class Add extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AddPage(),
theme: ThemeData(
primarySwatch: Colors.blue
)
);
}
}
class AddPage extends StatefulWidget{
@override
State createState()=> AddPageState();
}
class AddPageState extends State<AddPage>{
String result = 'Hey there!';
@override
void initState(){
super.initState();
//barCodeText();
}
Future barCodeText() async{
String data = await ScanState().scanQR();
setState(() {
result = data;
});
widgetOptions[0] = Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: Text(result)),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: barCodeText,
label: Text('Scan'),
icon: Icon(Icons.camera_alt),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
List<Widget> widgetOptions = <Widget>[
Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: Text(result)),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: barCodeText,
label: Text('Scan'),
icon: Icon(Icons.camera_alt),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(15, 30, 0, 0),
child: Text(
"Add Sensors",
style: TextStyle(
fontSize: 30,
height: 2,
fontWeight: FontWeight.bold,
),
)
),
Form(
child: Container(
padding: const EdgeInsets.all(15),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFeceff1),
hintText: 'Sensor 1',
contentPadding: const EdgeInsets.all(15.0),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(0),
borderSide: BorderSide(color: Color(0xFFbdbdbd))
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(0),
),
),
),
SizedBox(height: 50.0),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFeceff1),
hintText: 'Sensor 2',
contentPadding: const EdgeInsets.all(15.0),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(0),
borderSide: BorderSide(color: Color(0xFFbdbdbd))
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(0),
),
),
),
SizedBox(height: 50.0,),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFeceff1),
hintText: 'Sensor 3',
contentPadding: const EdgeInsets.all(15.0),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(0),
borderSide: BorderSide(color: Color(0xFFbdbdbd))
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(0),
),
),
),
SizedBox(height: 50.0,),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFeceff1),
hintText: 'Sensor 4',
contentPadding: const EdgeInsets.all(15.0),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(0),
borderSide: BorderSide(color: Color(0xFFbdbdbd))
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(0),
),
),
)
],
),
)
),
],
),
),
)
];
void _onItemTapped(int index){
setState((){
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Stack(
children: <Widget>[
widgetOptions.elementAt(_selectedIndex),
]),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('DEVICES'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('SENSORS'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.teal,
onTap: _onItemTapped,
),
);
}
}
Scan.dart:
import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/services.dart';
class Scan extends StatefulWidget {
@override
ScanState createState() => ScanState();
}
class ScanState extends State<Scan> {
@override
void initState(){
super.initState();
}
@override
Widget build(BuildContext context) {
return Container();
}
String result = "Hey There !";
Future scanQR() async{
try{
String qrResult = await BarcodeScanner.scan();
setState(() {
result = qrResult;
return result;
});
}on PlatformException catch(e){
if(e.code == BarcodeScanner.CameraAccessDenied){
setState(() {
result = "Camera permission was denied";
return result;
});
}else{
setState(() {
result = "Unknown Error $e";
return result;
});
}
}on FormatException{
setState(() {
result = "You pressed the back button before scanning anything";
return result;
});
}catch(ex){
setState(() {
result = "Unknown Error $ex";
return result;
});
}
}
}
请为我提供可能的解决方案。
答案 0 :(得分:0)
我解决了这个问题。 我要做的就是使小部件列表中的小部件成为有状态的。 这为我解决了问题。