Comment faire un dialogue en plein écran dans flutter ?

Question

Je veux créer une boîte de dialogue en plein écran. Le fond de la boîte de dialogue doit être opaque. Voici un exemple :

Comment faire comme ça dans Flutter ?

Answer 1

Vous pouvez utiliser le Navigator pour pousser une image semi-transparente ModalRoute :

import 'package:flutter/material.dart';

class TutorialOverlay extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'This is a nice overlay',
            style: TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Dismiss'),
          )
        ],
      ),
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}

// Example application:
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  void _showOverlay(BuildContext context) {
    Navigator.of(context).push(TutorialOverlay());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: RaisedButton(
            onPressed: () => _showOverlay(context),
            child: Text('Show Overlay'),
          ),
        ),
      ),
    );
  }
}

Answer 2

Voici mon implémentation qui est assez simple.

à partir du premier écran

Navigator.of(context).push(PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) =>
        RedeemConfirmationScreen()));

au 2ème écran

class RedeemConfirmationScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white.withOpacity(0.85), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
.....
  );
 }
}

et voici les résultats.

Answer 3

Sortie (en utilisant le dialogue natif de Flutter)

Appelez cette méthode pour afficher la boîte de dialogue en plein écran.

showGeneralDialog(
  context: context,
  barrierColor: Colors.black12.withOpacity(0.6), // Background color
  barrierDismissible: false,
  barrierLabel: 'Dialog',
  transitionDuration: Duration(milliseconds: 400), // How long it takes to popup dialog after button click
  pageBuilder: (_, __, ___) {
    // Makes widget fullscreen
    return SizedBox.expand(
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: SizedBox.expand(child: FlutterLogo()),
          ),
          Expanded(
            flex: 1,
            child: SizedBox.expand(
              child: ElevatedButton(
                onPressed: () => Navigator.pop(context),
                child: Text(
                  'Dismiss',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  },
);

Answer 4

Remarque : cette réponse ne traite pas de la transparence de la modale, mais répond à la question posée : "Comment créer une boîte de dialogue en plein écran dans Flutter ? J'espère que cela aidera d'autres personnes qui ont trouvé cette question en effectuant une recherche comme moi, et qui n'ont pas besoin d'une modale transparente.

Créez votre classe de dialogue modal :

class SomeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Dialog Magic'),
      ),
      body: new Text("It's a Dialog!"),
    );
  }
}

Dans la classe qui doit ouvrir la boîte de dialogue, ajoutez quelque chose comme ceci :

void openDialog() {
  Navigator.of(context).push(new MaterialPageRoute<Null>(
    builder: (BuildContext context) {
      return new SomeDialog();
    },
    fullscreenDialog: true));
}

Si vous avez besoin d'obtenir le résultat d'une action de dialogue, ajoutez un bouton à votre dialogue qui renvoie une valeur lorsque vous ouvrez la pile de navigation. Quelque chose comme ceci :

onPressed: () {
  Navigator
    .of(context)
    .pop(new MyReturnObject("some value");
}

puis, dans votre classe, en ouvrant le dialogue, saisissez les résultats avec quelque chose comme ceci :

void openDialog() async {
  MyReturnObject results = await Navigator.of(context).push(new MaterialPageRoute<MyReturnObject>(
    builder: (BuildContext context) {
      return new SomeDialog();
    },
    fullscreenDialog: true));
}

Answer 5

showDialog(
  barrierDismissible: false,
  context: context,
  builder: (BuildContext context) {
    return StatefulBuilder(builder: (context, setState) {
      return AlertDialog(
        insetPadding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0))),
          content: SizedBox.expand(
            child: Column(
              children: <Widget>[
                SingleChildScrollView(
                    physics: BouncingScrollPhysics(),
                    child: Wrap(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Expanded(
                              flex: 1,
                              child: Text(
                                "Sample type",
                                style: TextStyle(fontWeight: FontWeight.w700),
                              ),
                            ),
                            Expanded(flex: 1, child: Text(""))
                          ],
                        ),
                      ],
                    )),
              ],
            ),
          ));
    });
  },
);