按下 Flutter 的浮动操作按钮的简单对话框

Posted 2023-02-23

【中文标题】按下 Flutter 的浮动操作按钮的简单对话框

【英文标题】：Simple dialog on pressing Floating action button for Flutter

【发布时间】：2020-04-08 01:29:38

【问题描述】：

我是 Flutter 的初学者，我需要一些帮助来弄清楚我的代码出了什么问题

我正在尝试使浮动操作按钮显示一个简单的对话框（并添加内容），但我不确定为什么当我按下 FAB 时我无法将简单对话框带出。我知道它必须在无状态小部件，但我似乎无法在无状态/有状态小部件段中插入 FAB。是否有解决方法？

任何帮助将不胜感激。

 void main() 
    runApp(MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold(
       bottomNavigationBar: BottomAppBar(
         child: Text(
           "test bottom",
          style: TextStyle(
            color: Color(0xffFFFFFF),
             fontSize: 10,
            ),
           textAlign: TextAlign.center,
          ),
          color: Colors.blueGrey[600],
          ),
         backgroundColor: Colors.lightBlueAccent[50],
             appBar: AppBar(
          title: Text('test'),
           backgroundColor: Colors.blueGrey[600],
        ),
        body: SoundTest(),
       floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
         child: Icon(Icons.priority_high),
         onPressed: () 
           print('hello');
        ,
       ),
     ),
      ));
     

 class SoundTest extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
     return Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,

  children: <Widget>[
    Expanded(
      child: FlatButton(
        child: Image.asset('images/softsound.png'),
        onPressed: () 
          final player = AudioCache();
          player.play('clicksoft.wav');
          showDialog(context: context,
          );
        ,
      ),
    ),
    Expanded(
      child: FlatButton(
          child: Image.asset('images/loudsound.png'),
          onPressed: () 
            final player = AudioCache();
            player.play('clickloud.wav');
          ),
         )
        ],
      );
     
  

【参考方案1】：

方法一

参加StatefulWidget，

完整示例，查找完整代码here

class Login extends StatefulWidget 
  Login(Key key, this.title) : super(key: key);

  final String title;

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


class _MyHomePageState extends State<Login> 


  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(onPressed: ()_showDialog();),
    );
  

  void _showDialog() 
    // flutter defined function
    showDialog(
      context: context,
      builder: (BuildContext context) 
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () 
                Navigator.of(context).pop();
              ,
            ),
          ],
        );
      ,
    );
  

方法二

声明_scaffoldKey

  var _scaffoldKey = new GlobalKey<ScaffoldState>();

将_scaffoldkey 分配给您的Scaffold，

  Widget build(BuildContext context) 
    return Scaffold(
      key: _scaffoldKey,
      body: Container(),
      floatingActionButton: FloatingActionButton(onPressed: ()_showDialog();),
    );
  

然后将_scaffoldKey.currentContext 传递给这样的对话框context:_scaffoldKey.currentContext,

  void _showDialog() 
    // flutter defined function
    showDialog(
      context: _scaffoldKey.currentContext,
      builder: (BuildContext context) 
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () 
                Navigator.of(context).pop();
              ,
            ),
          ],
        );
      ,
    );
  

输出：

【讨论】：

尊敬的先生，感谢您的快速回复。似乎有问题，它说上下文（在您的代码中）未定义。有解决方法吗？

flutter: ══╡ 手势发现异常╞═════════════════════ flutter: 'package:flutter/src/widgets/ localizations.dart'：断言失败：第 447 行 pos 12：'context != flutter: null'：不正确。 flutter: flutter: 要么断言表明框架本身存在错误，要么我们应该提供实质性的flutter：此错误消息中的更多信息，以帮助您确定和修复根本原因。颤振：无论哪种情况，请通过在 GitHub 上提交错误报告此断言：颤振：github.com/flutter/flutter/issues/new?template=BUG.md

以上是我测试方法2的时候。至于方法1，错误太多。我认为它不可行

虽然我在这里使用的代码运行良好。但是你看起来很新。所以我在这里创建了一个工作示例gist.github.com/raviganwal/773d98278eca141b312943c28b180db6