Flutter：使用barcode_scan插件后Snackbar不显示

Question

在我的 Flutter 应用中，我想扫描一些条形码。扫描条形码后，我想显示一个小吃店。该应用应在 Android 设备上运行。

很遗憾，小吃店从未出现。 两种功能（条码扫描和显示快餐栏）分别工作正常。

在调试期间，会发生以下情况：

1. 相机打开
2. 条码被扫描
3. 条形码存储在变量中
4. 屏幕变黑
5. 小吃店的代码已执行。小吃店不显示。
6. 离开该方法后，将再次呈现要在其上显示小吃店的视图/小部件。

条形码扫描由0.0.3版本的flutter插件barcode_scan处理。

这里是匹配代码：

final GlobalKey<ScaffoldState> keyScaffold = new GlobalKey<ScaffoldState>();

[...]

@override
Widget build(BuildContext context) {
  return new Scaffold(
    key: keyScaffold,
    [...]
}

Future scan() async {
  String snackBarMessage = "No error";

  try {
    String barcode = await BarcodeScanner.scan();
    setState(() => _barcodeController.text = barcode);
    snackBarMessage = barcode;
  } on PlatformException catch (e) {
    if (e.code == BarcodeScanner.CameraAccessDenied) {
      snackBarMessage = 'The user did not grant the camera permission!';
    } else {
      snackBarMessage = 'Unknown error: $e';
    }
  } on FormatException {
    snackBarMessage =
        'null (User returned using the "back"-button before scanning anything. Result)';
  } catch (e) {
    snackBarMessage = 'Unknown error: $e';
  }

  keyScaffold.currentState.showSnackBar(new SnackBar(
    content: new Text(snackBarMessage),
    duration: new Duration(seconds: 5),
  ));
}

Answer 1

在我的 Flutter 原型应用程序（flutter 版本 0.5.1 beta）上，我同时使用了snackbar 和barcode_scan 插件（版本0.0.4）并且snackbar 确实出现了（扫描结果为字符串)。所有学分都归于 Wahib Ul Haq，以便于小吃店编辑：

Display SnackBar in Flutter

就我而言，有两件事值得注意。

1. 我根本不使用 keyScaffold。我将 BuildContext 声明为一个变量（我称之为支架上下文）来保存 Scaffold 的主体。

2. 我声明并初始化了一个新的 Scaffold。对于它的主体，我编写了一个 Builder。在构建器内部，我将 scaffoldContext 初始化为构建器的上下文。

这是我的代码以便于理解：

import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/services.dart';
[...]

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      [...],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {  
  //This is what I meant in note #1.
  BuildContext scaffoldContext;

  String barcode;

  @override
  initState() {
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyApp'),
      ),
      //This is what I meant in note #2.
      body: Builder(builder: (BuildContext context) {
        scaffoldContext = context;
        return Center(
            child: Column(children: <Widget>[
              ListTile(
              [...]
              ),
              ListTile(
              [...]
              ),
              [...]
            ]

    ));}),

      floatingActionButton: FloatingActionButton(
        mini: true,
        child: Icon(Icons.crop_free), onPressed: fabPressed),
    )};

  void createSnackBar(String message) {
    final snackBar = new SnackBar(content: new Text(message),
        backgroundColor: Colors.black

    );

    Scaffold.of(scaffoldContext).showSnackBar(snackBar);
  }

  void fabPressed() async {
    barcode = "";

    try {
    barcode = await BarcodeScanner.scan();
    setState(() => this.barcode = barcode);

    createSnackBar(barcode);
    }
    on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this.barcode = 'The user did not grant the camera permission!';
        });
        } else {
          setState(() => this.barcode = 'Unknown error: $e');
      }
    }
    on FormatException {
      setState(() =>
  this.barcode = 'null (User returned using the "back"-button before scanning anything. Result)');
    }
    catch (e) {
      setState(() => this.barcode = 'Unknown error: $e');
    }
  }
}