web-dev-qa-db-fra.com

Flutter: widget central inférieur en pile

Je veux atteindre comme cette photo. Pour simplifier, j'ai créé une pile contenant deux conteneurs. Je veux que le petit conteneur soit inférieur à l'aide d'un widget Align mais que ce ne fonctionne pas! il reste toujours au sommet

Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 170,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(0),
                          bottomRight: Radius.circular(0))),
                  // child: Image.network(tutorImage),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: 60,
                    height: 60,
                    color: Colors.black,
                  ),
                )
              ],
            ),

enter image description here

dartflutterflutter-layout
9
M.Ali

Vous pouvez utiliser la position positionnée avec aligner à l'intérieur d'une pile:

Column(
  children: <Widget>[
    Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),
  ],
);
12
Yousif khalid

Que dis-tu de ça?

Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(0),
                  bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned(
          bottom: -30,
          left: 0,
          right: 0,
          child: Center(
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),
0
dshukertjr