3
votes

FlutterActionButton déplaçable dans Flutter

Je veux créer un bouton flottant déplaçable et si possible imprimer la position du glissement dans la console.

flutter dart

0 commentaires

3 Réponses :

6
votes

En raison de la possibilité de composer des widgets Flutter de la manière que vous voulez, vous pouvez simplement le faire comme ceci:

Draggable(
    feedback: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    child: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    childWhenDragging: Container(),
    onDragEnd: (details) => print(details.offset))

Ceci Draggable peut être passé comme argument floatingActionButton à un Échafaudage .
Le paramètre feedback contrôle à quoi ressemblera le widget qui est glissé à la fin et child spécifie à quoi le Glissable code> devrait ressembler à. Comme vous ne voulez probablement voir qu'un un FloatingActionButton à la fois , vous pouvez passer un Container vide à childWhenDragging.

Le Offset (position) du glisser sera imprimé sur la console lorsque vous relâchez le glisser. p >

2 commentaires

juste une chose ! quand je relâche le bouton flottant il revient à sa première position !!! de l'aide ?

@saidbendrioue Oui, c'est le comportement attendu. Si vous souhaitez mettre à jour sa position, vous devrez probablement le placer dans une Stack avec un widget Positioned et mettre à jour la position lorsque onDragEnd est appelé en utilisant un StatefulWidget et setState .

3
votes

J'avais besoin d'ajouter un widget positionné pour définir la position de mon bouton

class _MyHomePageState extends State<MyHomePage> {
  Offset position =Offset(20.0, 20.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Stack(
      children: <Widget>[
        Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("data_repo/img/bg1.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          left : position.dx,
          top  : position.dy ,
          child : Draggable(
          feedback: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {})
            ),
          child: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
          ),
          childWhenDragging: Container(),
          onDragEnd: (details){
            setState(() {
              position = details.offset;
            });
            print(position);
            print(position.dx);
            print(position.dy);
            }))
      ],
    ));
  }
}

0 commentaires

3
votes

Vous pouvez utiliser le package DraggableFloatingButton: https://pub.dartlang.org/packages/draggable_floating_button < / a>

0 commentaires