web-dev-qa-db-fra.com

Comment créer une boîte de dialogue plein écran transparente en plus de l'activité - Flutter

J'essaie de créer une boîte de dialogue plein écran transparente en plus de l'activité. J'ai essayé de suivre ceci thread mais la solution ne fonctionne pas.

En bref, ce dont j'ai besoin c'est:

  • dialogue plein écran.
  • fond transparent à l'exception du widget que j'utilise pour la boîte de dialogue

voici mon code:

Pour ouvrir la boîte de dialogue

void onNextBtnClick(){
    var route = new MaterialPageRoute(
        builder: (BuildContext context) =>
        new GenreDialogUI(),fullscreenDialog: true
    );
    Navigator.of(context).Push(route);
}

Pour la vue Dialogue

import 'package:flutter/widgets.Dart';

class HolePuncherPainter extends CustomPainter {
  static final clearPaint = new Paint()
    ..color = Colors.transparent,
    ..blendMode = BlendMode.clear;

  const HolePuncherPainter();

  @override
  void Paint(Canvas canvas, Size size) {
    canvas.drawRect(
        new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class GenreDialogUI extends StatefulWidget {
   @override
   _GenreDialogUI createState() => new _GenreDialogUI();
}

class _GenreDialogUI extends State<GenreDialogUI>  {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: addAppbar(),
      body: new CustomPaint(
        Painter: HolePuncherPainter(),
        child: new Container(
        color: Colors.transparent,
        alignment: Alignment.center,
        child: UtilCommonWidget.addText('Transparent Dialog', Colors.red, 22.0, 1),
        ),
      ),
    );
  }
}
dartflutterflutter-layout
10
Rafiqul Hasan
Navigator.of(context).Push(PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) {
        return YourFullScreenAlertDialog()
    }
));

YourFullScreenAlertDialog pourrait être un widget qui a une couleur d'arrière-plan, Colors.transparent, comme @creativecreatorormaybenot mentionné précédemment.

15
gareoke

Pour moi, ce qui suit a fonctionné:

    showDialog(
  context: context,
    builder: (_) => Material(
      type: MaterialType.transparency,

      child: Center( // Aligns the container to center
          child: Container( // A simplified version of dialog.
            width: 100.0,
            height: 56.0,
            color: Colors.green,
            child: Text('jojo'),
          )
      ),
    )
);
5
midi1007

Scaffold a une propriété backgroundColor . Vous devrez également rendre celui-ci transparent :

Scaffold(
  backgroundColor: Colors.transparent,
  ...
);
1
creativecreatorormaybenot