CODEWITHSUNDEEP
dartflutter
rafaelcb21
rafaelcb21

Reputation: 13304

Flutter - SimpleDialog in FloatingActionButton

I'm trying to create a SimpleDialog after a tap on the FloatingActionButton, however when pressing that button nothing happens.

What was I doing wrong?

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

Upvotes: 48

Views: 90402

Answers (3)

Alexi Coard
Alexi Coard

Reputation: 7742

You need to wrap this on a show action dialog.

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

Upvotes: 46

Mark O&#39;Sullivan
Mark O&#39;Sullivan

Reputation: 10778

I noticed the accepted answer is using child for showDialog which is actually deprecated, so I would recommend avoiding it. You should be using builder instead, I've provided an example:

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

Upvotes: 94

Daksh Gupta
Daksh Gupta

Reputation: 7804

There is a specific scenario which should be taken care while showing the dialog from floatingActionButton

if you write your code like this

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

It will not show Alert Dialog but throws an exception "No MaterialLocalizations found."

This happens when the MaterialApp is not the root where the dialog is called. In this case the root widget is the Application. However, if we change the code as

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

The MaterialApp becomes the root and everything works fine. In this case flutter automatically creates Material Localiation which otherwise needs to be manually created.

I didn't find any documentation for the same in the official doc.

Hope it helps

Upvotes: 12

Related Questions