如何在屏幕上显示条形码/ QR码扫描仪的扫描文本

时间:2020-04-26 16:45:02

标签: flutter dart

如何在Flutter中显示条形码扫描仪的结果? 这是一个条形码/ QR码扫描仪应用程序,具有以下布局: DevicesSensors

我正在使用的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;
      });
    }

  }
}

请为我提供可能的解决方案。

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。 我要做的就是使小部件列表中的小部件成为有状态的。 这为我解决了问题。