web-dev-qa-db-fra.com

Flutter - SimpleDialog dans FloatingActionButton

J'essaie de créer une SimpleDialog après avoir tapé sur la FloatingActionButton; cependant, rien ne se passe lorsque vous appuyez sur ce bouton.

Qu'est-ce que je faisais mal?

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

Vous devez envelopper cela dans une émission ActionDialog

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

J'ai remarqué que la réponse acceptée utilisait child pour showDialog qui est en réalité obsolète. Je recommanderais donc de l'éviter. Vous devriez plutôt utiliser builder, j'ai fourni un exemple:

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

Il existe un scénario spécifique qui doit être pris en compte tout en affichant le dialogue de floatingActionButton

si vous écrivez votre code comme ça

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

La boîte de dialogue d'alerte ne s'affichera pas mais générera une exception "Aucune localisation de matériau trouvée".

Cela se produit lorsque MaterialApp n'est pas la racine à laquelle la boîte de dialogue est appelée. Dans ce cas, le widget racine est l'application. Cependant, si on change le code comme

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

La MaterialApp devient la racine et tout fonctionne bien. Dans ce cas, Flutter crée automatiquement une localisation de matériau qui doit sinon être créée manuellement.

Je n'ai trouvé aucune documentation pour la même chose dans le document officiel.

J'espère que ça aide

1
Daksh