Flutter - FloatingActionButton中的SimpleDialog

时间:2017-06-20 14:34:53

标签: dart flutter

我点击SimpleDialog后尝试创建FloatingActionButton,但按下该按钮时没有任何反应。

我做错了什么?

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) {},
            )
          ],
        );
      }     
    ),    
  );
}

4 个答案:

答案 0 :(得分:32)

我注意到接受的答案是使用child showDialog实际上已弃用,所以我建议避免使用它。您应该使用builder代替,我提供了一个示例:

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

答案 1 :(得分:10)

你需要将它包装在show ActionDialog

showDialog(context: context, child:
    new AlertDialog(
      title: new Text("My Super title"),
      content: new Text("Hello World"),
    )
);

编辑:

child现已弃用。根据文档和Mark Sullivan的回答,这是一个最新的工作解决方案。

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

答案 2 :(得分:3)

在显示来自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"),
                  )
              );
            }),
      )
    );
  }
}

它不会显示“警报对话框”,但是会引发异常“找不到MaterialLocalizations”。

如果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会自动创建“材质定位”,否则需要手动创建。

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

希望有帮助

答案 3 :(得分:0)

要执行此操作,请遵循以下代码

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

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);
 },

enter image description here