web-dev-qa-db-fra.com

Comment ajouter plusieurs boutons flottants dans Stack Widget dans Flutter

En faisant flotter une vue sur une autre vue en utilisant Stack Widget . Ça marche bien. Maintenant, je dois ajouter deux boutons flottants à gauche et à droite du bas de l'écran. J'ai ajouté un bouton à droite mais je ne sais pas comment ajouter un bouton flottant à gauche. Simple comme l'image ci-dessous.

enter image description here

Toute aide sera appréciable

dartwidgetstackflutter
6
Magesh Pandian

Vous pouvez utiliser le widget Align pour positionner votre FloatingActionButton dans le Stack .

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(...),
    ),
  ],
)

Un bouton utilise une constante Alignment.bottomLeft pour sa propriété alignment et l'autre respectivement Alignment.bottomRight.

16
creativecreatorormaybenot

Vous pouvez également utiliser quelque chose comme ça en utilisant location comme centerDocked pour ne pas obtenir cet étrange alignement à gauche.

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.navigate_before),
                ),
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.navigate_next),
                )
              ],
            ),
          )
11
MTechViral
floatingActionButton: Stack(
      children: <Widget>[
        Padding(padding: EdgeInsets.only(left:31),
        child: Align(
          alignment: Alignment.bottomLeft,
          child: FloatingActionButton(
            onPressed: picker,
            child: Icon(Icons.camera_alt),),
        ),),

        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            onPressed: picker2,
          child: Icon(Icons.add_photo_alternate),),
        ),
      ],
    )
4
hardik

il suffit d'ajouter row as floatingActionButton in Scafold et de définir la position centerFloat

comme EX 

Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      //store btn
      floatingActionButton: Container(
        child: Row(
          children: <Widget>[
            //add left Widget here with padding left
            Spacer(
              flex: 1,
            ),
            //add right Widget here with padding right
          ],
        ),
      ),
    );
1
Mahmoud Abu Elheja

N'oubliez pas de définir "heroTag: null" pour chaque bouton d'action flottant. sinon vous obtiendrez un écran noir!

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
  ],
)
0
Naimish Vinchhi