J'ai trouvé cette question mais ne fonctionne pas pour moi.
Je joue aussi avec le widget Opacity et la couleur décoration du Container . Mais je n'ai pas trouvé de solution Il affiche toujours une couleur d'arrière-plan blanche lorsque je le définit transparent.
Regardez l'image ci-dessous, au lieu de la couleur rouge, elle doit être transparente.
Voici mon code:
_showAlertDialog(String strTitle, String strDetails) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Stack(
children: <Widget>[
Opacity(
opacity: 1, // Also tried to set 0
child: Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Color.fromRGBO(255, 0, 0, 0.5) // I played with different colors code for get transparency of color but Alway display White.
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 50,
padding: EdgeInsets.only(left: 10, right: 10, top: 2),
color: Theme.of(context).primaryColor,
child: Center(
child: Text(
strTitle,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14),
maxLines: 2,
),
),
),
Flexible(
child: Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
child: Text(
strDetails,
style: TextStyle(color: Colors.black87, fontSize: 12, fontWeight: FontWeight.w400),
),
),
),
),
],
),
),
),
Positioned(
top: 0,
right: 0,
child:
Container(
height: 24,
width: 24,
child: DecoratedBox(
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.close, color: Theme.of(context).primaryColor, size: 18,), onPressed: () {
Navigator.of(context).pop();
}),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12)
),
),
)
)
],
),
);
});
}
}
3 Réponses :
Le widget AlertDialog a une propriété backgroundColor , définissez-la simplement sur transparent.
showDialog(
context: context,
builder: (BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(dialogBackgroundColor: Colors.transparent),
child: AlertDialog(
contentPadding: EdgeInsets.zero,
content: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
color: Colors.white,
...
Et supprimez le BoxDecoration
Mettre à jour
On dirait que backgroundColor n'est pas encore disponible sur Flutter 1.0.0.
(Je suis sur le canal de développement)
stable: https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/material/dialog.dart
dev: https://github.com/flutter /flutter/blob/dev/packages/flutter/lib/src/material/dialog.dart
En vérifiant le code source de Dialog, j'ai trouvé qu'il utilisait le dialogBackgroundColor code> à partir du thème. Essayez cette méthode simple:
AlertDialog(
contentPadding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
Je ne peux pas définir backgroundColor: Colors.transparent . Cela me donne une erreur.
hmm quelle version de Flutter avez-vous?
son Flutter 1.0.0 BTW docs.flutter.io/flutter/material/AlertDialog- class.html AlertDialog lui-même n'a pas ce type de propriété
oui, vous avez raison, ne semble pas encore disponible dans cette version.
Par copier-coller class MyAlertDialog j'ai eu tellement d'erreurs. As-tu essayé?
continuons cette discussion dans le chat .
Vous pouvez également faire comme ci-dessous
backgroundColor: Color.fromRGBO(r, g, b, 0)
Que sont les variables r, g et b?
R = rouge, G = vert, B = bleu par exemple backgroundColor: Color.fromRBGO (255, 0, 0, 1). Cela rend la couleur d'arrière-plan rouge avec l'opacité définie sur 1 ou aucune opacité
Vous pouvez y parvenir simplement avec ceci:
...
color: Colors.red.withOpacity(0),
...
vous pouvez spécifier le degré d'opacité souhaité en utilisant une valeur décimale de 0 à 1, 0 étant totalement transparent tandis que 1 est totalement opaque.