1
votes

Comment puis-je déplacer le bouton d'action flottant sur le côté gauche de l'écran dans Flutter?

Par défaut, le bouton d'action flottant se trouve sur le côté droit de l'écran. Je connais le floatingActionButtonLocation et ses propriétés telles que endDocked , startDocked , centerDocked , mais aucun d'entre eux ne m'a aidé à le déplacer vers le côté gauche de l'écran.

flutter flutter-layout floating-action-button

0 commentaires

5 Réponses :

4
votes

Je crois que cette réponse fournie précédemment fournit l'ensemble d'options «facile à mettre en œuvre» le plus proche de votre problème.

https://stackoverflow.com/a/49761700/10768398

La réponse dit essentiellement d'utiliser quelque chose de similaire à ce qui suit sur votre composant Scaffold de votre arborescence de widgets:

, floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat

D'après les descriptions des options, il ne semble pas y avoir d'alignement à gauche.

Jetez également un œil aux options disponibles ici:

https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

6 commentaires

oui, je l'ai vu. Mais il suggère comment implémenter un bouton d'action flottant sur le centre. Et je veux qu'il soit sur le côté gauche de l'écran. Mais merci pour la réponse.

J'ai ajouté un peu à la réponse, je ne pense pas qu'il y ait une option d'alignement à gauche

Oui Monsieur, je viens de remarquer votre modification. Je suis tout à fait d'accord que par défaut, il n'y a pas d'option d'alignement à gauche.

Juste une pensée, mais un objet Stack (avec un tableau de widgets dans la pile) et avec l'un des enfants ayant un widget Positionné (le bouton souhaité) fonctionnerait-il dans votre cas?

Je n'ai pas encore essayé. Mais comme vous le suggérez, je vais aussi l'essayer.

Cela peut être considéré comme une solution si vous n'avez pas besoin de faire défiler cet écran en particulier. Le défilement ferait défiler le bouton complètement hors de l'écran.

3
votes

J'ai utilisé le code suivant pour créer le floatingActionButton sur le côté gauche en utilisant le remplissage sur le côté droit de FAB.

floatingActionButton: Padding(
    padding: const EdgeInsets.only(right: 275.0),
    child: FloatingActionButton(
      child: Icon(
        Icons.add,
        color: Colors.black,
      ),
      backgroundColor: Colors.orange,
      onPressed: (){},
    ),
  ),

1 commentaires

Je suggère d'éviter cette technique car vous avez différentes tailles d'écran et la sensation sera différente d'un appareil à l'autre.

1
votes

Fondamentalement suggéré par @ E.Bradford dans le commentaire ci-dessus, mais je voulais fournir du code, si nécessaire. Vous pouvez placer le FloatingActionButton à peu près n'importe où en l'empilant dans un widget positionné.

Stack(
  children: [
    Placeholder(),
    Positioned(
      left: 40,
      bottom: 40,
      child: FloatingActionButton(
        onPressed: () {},
      ),
    ),
  ],
)

0 commentaires

2
votes

Vous pouvez envelopper votre floatingActionButton avec Row() et donner crossAxisAlignment au centre:

floatingActionButton: Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Padding(
      padding: const EdgeInsets.only(left:25.0),
      child: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        child: Icon(Icons.message,color: Colors.white,),
        backgroundColor: Colors.green,
      ),
    ),
  ],
),

0 commentaires

1
votes

Cela placera votre FAB dans le coin inférieur gauche:

 @override
 Widget build(BuildContext context) {
   return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.startDocked,
      floatingActionButton:
          FloatingActionButton(heroTag: null, onPressed: () {}),
   );

Voir https://api.flutter.dev/flutter/material/FloatingActionButtonLocation/startDocked-constant.html

0 commentaires