web-dev-qa-db-fra.com

[Flutter] Afficher la boîte de dialogue sur le widget

En flottant, nous voulons superposer une boîte de dialogue au-dessus du widget.

Nous avons pu afficher le dialogue après avoir appuyé sur le bouton.

Cependant, nous voulons afficher cette boîte de dialogue au moment de l'affichage du widget qui aime charger la boîte de dialogue.

Nous avons mis en œuvre comme suit.

import 'package:flutter/material.Dart';

class XxxxxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // [NG]We want to show dialog on Container widget.
    // showMyDialog(context);
    return Container(
      child: FlatButton(
        child: Text('Show'),
        onPressed: () {
          // [OK]We can show dialog.
          showMyDialog(context);
        },
      ),
    );
  }

  void showMyDialog(BuildContext context) {
    showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: const Text(
            'Message',
          ),
          actions: <Widget>[
            FlatButton(
              child: const Text('OK'),
              onPressed: () {
                Navigator.of(context).pop(true);
              },
            ),
          ],
        );
      },
    );
  }
}

Lorsque nous utilisons du code [NG], l'erreur suivante se produit.

I/flutter (28618): When the exception was thrown, this was the stack:
I/flutter (28618): #0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.Dart:3436:11)
I/flutter (28618): #1      Element.markNeedsBuild (package:flutter/src/widgets/framework.Dart:3462:6)
I/flutter (28618): #2      State.setState (package:flutter/src/widgets/framework.Dart:1141:14)
I/flutter (28618): #3      OverlayState.insertAll (package:flutter/src/widgets/overlay.Dart:301:5)
I/flutter (28618): #4      OverlayRoute.install (package:flutter/src/widgets/routes.Dart:40:24)
I/flutter (28618): #5      TransitionRoute.install (package:flutter/src/widgets/routes.Dart:182:11)
I/flutter (28618): #6      ModalRoute.install (package:flutter/src/widgets/routes.Dart:740:11)
I/flutter (28618): #7      NavigatorState.Push (package:flutter/src/widgets/navigator.Dart:1443:11)
I/flutter (28618): #8      showDialog (package:flutter/src/material/dialog.Dart:642:53)
I/flutter (28618): #9      XxxxxWidget.showMyDialog (package:xxxxx/Widgets/xxxxx_widget.Dart:20:5)
I/flutter (28618): #10     XxxxxWidget.build (package:xxxxx/Widgets/xxxxx_widget.Dart:7:5)
[abridgement]

Nous avons également essayé FutureBuilder mais n’avons pas pu résoudre ce problème.

Comment devrions-nous résoudre ce problème?

$ flutter doctor -v
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale ja)
    • Flutter version 0.5.1 at /Applications/flutter
    • Framework revision c7ea3ca377 (3 months ago), 2018-05-29 21:07:33 +0200
    • Engine revision 1ed25ca7b7
    • Dart version 2.0.0-dev.58.0.flutter-f981f09760

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/xxxxx/src/Android-sdks
    • Android NDK at /Users/xxxxx/src/Android-sdks/ndk-bundle
    • Platform Android-27, build-tools 27.0.3
    • Android_HOME = /Users/xxxxx/src/Android-sdks
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/Java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 27.1.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] VS Code (version 1.25.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected devices (1 available)
    • ASUS Z017DA • XXXXXXXXXXXXXXX • Android-arm64 • Android 8.0.0 (API 26)

! Doctor found issues in 1 category.

Nous avons déjà installé l'extension Flutter . Mais le médecin Flutter a déclaré ne pas installer . Ce n'est pas important pour cette question.

dartflutter
4
Ganessa

Nous devons afficher le dialogue une fois done avec la construction du widget . Vous pouvez utiliser la fonction Future.delayed comme ci-dessous (I testée, cela fonctionne).

class XxxxxWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
// [NG]We want to show dialog on Container widget.

 Future.delayed(Duration.zero, () => showMyDialog(context)); // import 'Dart:async';
 return Container(
  child: FlatButton(.... //same as question

Explication:

Comme Dart est basé sur boucle d'événement à un seul thread, lorsque nous créons des tâches asynchrones, il place ces événements à la fin de la file d'attente des événements et poursuit son exécution en cours. S'il vous plaît se référer ci-dessous exemple pour plus de détails,

void main() {
  print("first");
  Future(() => print("second"));
  print("third");
  Future(() => print("forth"));

}

La sortie sera

first
third
second
forth

C'est très semblable à 

DispatchQueue.main.async {
 print("Async1") //printJob
}

Une fois terminé avec building the widget, affichez la dialog. Consultez ma réponse pour un problème similaire.

3
Dinesh Balasubramanian

La question que vous avez son normal sur Flutter alors voyons le code.

Je suppose que le problème est dans le constructeur du widget, il faut que ce soit comme ça: 

showMyDialog(BuildContext context) {
 showDialog(
  context: context,
  builder: (BuildContext context){
  return new AlertDialog(
    content: Text(
        'Message Here',
      ),
      actions: <Widget>[
        FlatButton(
          child: const Text('OK'),
          onPressed: () {
            Navigator.of(context).pop(true);
          },
        ),
      ],
   );
  }
 );
}

Essaye ça 

0
Roger Cuesta