Flutter SnackBar不显示

Question

我已经实现了一个提交表单的函数。我希望在提交后出现SnackBar警告。我尝试过了，但是它没有起作用。在我添加SnackBar路由之后，也不起作用了。

addTicket() async {
if (_formKey.currentState.validate()) {
  _formKey.currentState.save();

  try{
    DocumentReference ref = await db.collection('CostalLineTicketDetails').
    document(ticketCato).collection("Tickets").add(
        {
          'startStation':startStation,
          'endStation':endStation,
          'price':price,
          'ticketType':ticketCato,
          'contactNo':contactNo,
          'dateTime':dateTime,
        });
    setState(() => id = ref.documentID);
    Navigator.push(context, new MaterialPageRoute(builder: (context) => CostalLine()));

    Scaffold.of(context).showSnackBar(SnackBar(content: Text('Ticket Added Sucessfully')));

  }catch(e){
    print(e);
  }
}

} }

- Ruchira Swarnapriya

Answer 1

1. 在切换到其他屏幕后，无法在同一页面上显示showSnackBar。
2. 您可以声明_scaffoldKey并像这样将其传递给Scaffold

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

Scaffold(
      key: _scaffoldKey,

然后像这样打开 snackbar

_scaffoldKey.currentState.showSnackBar(SnackBar(
        content: Text(
         'Welcome',
        ),
        duration: Duration(seconds: 2),
      ));

输出：

---

编辑

您也可以使用闪光灯，无需每次传递_scaffoldKey。

例如：

   void _showBasicsFlash({
    Duration? duration,
    flashStyle = FlashBehavior.floating,
  }) {
    showFlash(
      context: context,
      duration: duration,
      builder: (context, controller) {
        return Flash(
          controller: controller,
          behavior: flashStyle,
          position: FlashPosition.bottom,
          boxShadows: kElevationToShadow[4],
          horizontalDismissDirection: HorizontalDismissDirection.horizontal,
          child: FlashBar(
            content: Text('This is a basic flash'),
          ),
        );
      },
    );
  }

- Ravinder Kumar

---

FlushBar 无法在空安全模式下运行。 - ALI HUSSEIN

@ALIHUSSEIN 是的，FLushBar已经停止维护了，但是还有一些很好的替代品，比如Flash。 - Ravinder Kumar

FlushBar 现已发布，支持空安全。 - M Karimi

scaffoldKey.currentState.showSnackBar已被弃用，请使用ScaffoldMessenger.of(context).showSnackBar。 - Dylan Karimagoko

Answer 2

try this,

addTicket() async {
if (_formKey.currentState.validate()) {
  _formKey.currentState.save();

  try{
    DocumentReference ref = await 
    db.collection('CostalLineTicketDetails').
    document(ticketCato).collection("Tickets").add(
        {
          'startStation':startStation,
          'endStation':endStation,
          'price':price,
          'ticketType':ticketCato,
          'contactNo':contactNo,
          'dateTime':dateTime,
        });
    setState(() => id = ref.documentID);
   // Navigator.push(context, new MaterialPageRoute(builder: (context) => CostalLine()));

    Scaffold.of(context).showSnackBar(SnackBar(content: 
    Text('Ticket Added Sucessfully')));

  }catch(e){
    print(e);
   }
   }
   }
   } 

- Jay Gadariya

---

你在脚手架中定义了键吗？它显示错误吗？如果是，那么请发布错误。 - Jay Gadariya

没有错误。正如我所提到的，添加了那个Snackbar后路由也不起作用了。 - Ruchira Swarnapriya

我的更新答案不会带你到下一页，但如果它显示snackbar，那么你必须在推送到costalLine()活动之前显示snackbar，或者你可以在**costalLine()**活动中显示snackbar。 - Jay Gadariya

Answer 3

将此代码定义在任何通用的dart文件中，您可以在任何地方调用此函数，并显示一个通用类型的脚手架。

import 'package:flutter/material.dart';

void showWarningSnackBar(BuildContext context, String message) {
// Find the Scaffold in the widget tree and use it to show a SnackBar.
  ScaffoldFeatureController<Widget, dynamic> _scaffold;

  // Find the Scaffold in the widget tree and use it to show a SnackBar.
  _scaffold = Scaffold.of(context).showSnackBar(SnackBar(
    content: InkWell(
      onTap: () {
        _scaffold.close();
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          AppImage.asset(
              assetName: YOUR_IMAGE_NAME,
              fit: BoxFit.contain,
              width: 20,
              color: COLOR),
          const SizedBox(
            width: 10,
          ),
          Text(
            '$message',
            maxLines: 2,
          ),
        ],
      ),
    ),
    duration: const Duration(seconds: 10),
    backgroundColor: COLOR,
  ));
}

- Asim Khan