web-dev-qa-db-ja.com

アクティビティの上に透明なフルスクリーンダイアログを作成する方法-Flutter

アクティビティの上に透明な全画面ダイアログを作成しようとしています。私はこれを試しました thread しかし、解決策は動作しません。

要するに、私が必要なのは：

  • 全画面ダイアログ。
  • ダイアログに使用するウィジェットを除く透明な背景

ここに私のコードがあります：

ダイアログを開くには

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

ダイアログビューの場合

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は、前述の@creativecreatorormaybenotのように、Colors.transparentという背景色を持つウィジェットにすることができます。

15
gareoke

私にとっては、以下が働いた：

    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には backgroundColorプロパティ があります。同様にtransparentにする必要があります：

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