Flutter - FloatingActionButton 中的 SimpleDialog

Flutter - SimpleDialog in FloatingActionButton

我试图在点击 FloatingActionButton 后创建一个 SimpleDialog,但是当按下该按钮时没有任何反应。

我做错了什么?

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    floatingActionButton: new FloatingActionButton(
      tooltip: 'Add',
      child: new Icon(Icons.add),
      backgroundColor: new Color(0xFFF44336),
      onPressed: (){
        new SimpleDialog(
          title: new Text('Test'),
          children: <Widget>[
            new RadioListTile(
              title: new Text('Testing'), value: null, groupValue: null, onChanged: (value) {},
            )
          ],
        );
      }     
    ),    
  );
}

您需要将其包装在显示操作对话框中。

showDialog(context: context, builder: (BuildContext context) {
   return new AlertDialog(
      title: new Text("My Super title"),
      content: new Text("Hello World"),
   );
}

我注意到接受的答案是将 child 用于 showDialog,这实际上已被弃用,因此我建议避免使用它。您应该改用 builder,我提供了一个示例:

onPressed: () {
    showDialog(
        context: context,
        builder: (_) => AlertDialog(
            title: Text('Dialog Title'),
            content: Text('This is my content'),
        )
    );
}

在显示来自 floatingActionButton

的对话框时,有一个特定的场景需要注意

如果你这样写代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (ctxt) => new AlertDialog(
                    title: Text("Text Dialog"),
                  )
              );
            }),
      )
    );
  }
}

它不会显示警告对话框但会抛出异常"No MaterialLocalizations found."

MaterialApp 不是调用对话框的根目录时会发生这种情况。在这种情况下,根小部件是应用程序。但是,如果我们将代码更改为

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppImpl()
    );
  }
}

class MyAppImpl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (ctxt) => new AlertDialog(
                  title: Text("Text Dialog"),
                )
            );
          }),
    );
  }
}

MaterialApp 成为根,一切正常。在这种情况下,flutter 会自动创建 Material 本地化,否则需要手动创建。

我在官方文档中没有找到任何相同的文档。

希望对您有所帮助

要做到这一点,请遵循下面给出的代码

首先在你的 pubspec.yaml 文件中添加 rflutter_alert 依赖项

dependencies:
   rflutter_alert: ^1.0.3

将它导入你想使用的地方

import 'package:rflutter_alert/rflutter_alert.dart';

并创建函数打开

 confirmationPopup(BuildContext dialogContext) {
    var alertStyle = AlertStyle(
      animationType: AnimationType.grow,
      overlayColor: Colors.black87,
      isCloseButton: true,
      isOverlayTapDismiss: true,
      titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
      descStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
      animationDuration: Duration(milliseconds: 400),
    );

    Alert(
        context: dialogContext,
        style: alertStyle,
        title: "Detete?",
        desc: "Are you sure you want to delete this Gatekeeper?",
        buttons: [
          DialogButton(
            child: Text(
              "Cancel",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
            color: appThemeColor,
          ),
          DialogButton(
            child: Text(
              "Delete",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
            color: appThemeColor,
          )
        ]).show();
  }

在你想打开的地方调用这个

 onTap: () {
    confirmationPopup(context);
 },