Comment puis-je pile des widgets qui se chevauchent les uns les autres dans flutter

J'ai besoin d'empiler des widgets comme ci-dessous

Comment puis-je pile des widgets qui se chevauchent les uns les autres dans flutter

J'ai écrit le code comme ci-dessous. Cependant, son à venir l'un après l'autre avec des valeurs par défaut de remplissage. Comment puis-je faire comme ci-dessus?

      new Row(
        children: <Widget>[
          new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
          new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
        ],
      ),
InformationsquelleAutor user983327 | 2018-04-15
  1. 38

    Vous pouvez utiliser un Pile avec Positionné de réaliser ceci:

    Comment puis-je pile des widgets qui se chevauchent les uns les autres dans flutter

    class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          //alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              new Positioned(
                left: 20.0,
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              ),
              new Positioned(
                left:40.0,
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              )

            ],
          ),
        ),
      )
    ;
  }
}

    Et de cette façon vous aurez de belles ombre baisse afin que l'icône se démarque plus:

    Comment puis-je pile des widgets qui se chevauchent les uns les autres dans flutter

    class StackExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body:  new Container(
padding: const EdgeInsets.all(8.0),
height: 500.0,
width: 500.0,
//alignment: FractionalOffset.center,
child: new Stack(
//alignment:new Alignment(x, y)
children: <Widget>[
new Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
new BoxShadow(
blurRadius: 5.0,
offset: const Offset(3.0, 0.0),
color: Colors.grey,
)
]
),
child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
new Positioned(
left: 20.0,
child: new Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
new BoxShadow(
blurRadius: 5.0,
offset: const Offset(3.0, 0.0),
color: Colors.grey,
)
]
),
child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
),
new Positioned(
left:40.0,
child: new Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
new BoxShadow(
blurRadius: 5.0,
offset: const Offset(3.0, 0.0),
color: Colors.grey,
)
]
)
,child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
)
],
),
),
)
;
}
}
    • disons que nous voulons le faire dans le centre de l'écran ? nous avons besoin de changer la gauche des biens dans chaque Positionné Widget .droit ? new Center(child: new StackExample())
    • Je ne suis pas sûr de savoir pourquoi il se passe, mais lorsque je tente de régler alignment: FractionalOffset.center, Il est centré, mais il est débordé par un autre élément
    • j'ai eu le même problème, maintenant, je suis en train d'utiliser Positioned.fromRelativeRect
    • Ah je sais pourquoi, nous avons besoin de définir explicitement les overflow: Overflow.visible, dans le Stack
    • Génial ,merci
    • Je vous remercie beaucoup. Il a travaillé beaucoup.

    InformationsquelleAutor aziza