3
votes

Ancrer le bouton d'action flottant sur la carte

Lors de la création d'une carte (par exemple en utilisant le code de la documentation ), comment puis-je ancrer un FAB à la carte (le cercle vert dans l'image ci-dessous), comme dans ce question pour Android .

J'ai vu une question similaire à joindre un FAB à l'AppBar, mais la solution repose sur l'AppBar étant une hauteur fixe. Lors de l'utilisation d'une carte, la hauteur n'est pas fixée à l'avance, la même solution ne peut donc pas être utilisée.

flutter dart

0 commentaires

3 Réponses :

8
votes

Vous pouvez placer le FloatingActionButton dans un widget Align et jouer avec la propriété heightFactor .

Par exemple:

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          SizedBox(height: 100.0, width: double.infinity),
          Align(
            alignment: Alignment(0.8, -1.0),
            heightFactor: 0.5,
            child: FloatingActionButton(
              onPressed: null,
              child: Icon(Icons.add),
            ),
          )
        ],
      ),
    );
  }
}

0 commentaires

0
votes

La bonne solution consiste à utiliser des widgets "Stack" et "Positioned" comme:

return Stack(
      children: <Widget>[
        Card(
          color: Color(0xFF1D3241),
          margin: EdgeInsets.only(bottom: 40), // margin bottom to allow place the button
          child: Column(children: <Widget>[
          ...
          ],
        ),
        Positioned(
          bottom: 0,
          right: 17,
          width: 80,
          height: 80,
          child: FloatingActionButton(
            backgroundColor: Color(0xFFF2638E),
            child: Icon(Icons.play_arrow,size: 70,)
          ),
        ),
      ],
    );

0 commentaires

0
votes

Solution correcte pour l'ancre FAB.

Une autre solution utilisant pile et conteneur. L'emplacement de FAB est basé sur la taille du widget Container de son frère et les clics / pressions fonctionnent correctement.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(bottom: 28),
            child: Container(
              width: double.infinity,
              height: 150,
              color: Color.fromRGBO(55, 55, 55, 0.2),
              padding: EdgeInsets.all(15),
              child: Text(
                  'Any container with bottom padding with half size of the FAB'),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 10,
            child: FloatingActionButton(
              child: Icon(
                Icons.play_arrow,
                size: 40,
              ),
              onPressed: () => print('Button pressed!'),
            ),
          ),
        ],
      ),
    );
  }
}

Lien CodePan pour l'ancre FAB

0 commentaires