Al crear una tarjeta (por ejemplo, utilizando el código de Docs) , ¿cómo puedo anclar un FAB a la tarjeta (el círculo verde en la imagen a continuación), como en este pregunta para Android.

enter image description here

Vi una pregunta similar para adjuntar un FAB a AppBar, pero la solución se basa en que AppBar tenga una altura fija. Al usar una tarjeta, la altura no se fija con anticipación, por lo que no se puede usar la misma solución.

3
S.D. 13 ene. 2019 a las 01:38

3 respuestas

La mejor respuesta

Puede colocar el FloatingActionButton en un widget Align y jugar con la propiedad heightFactor.

Por ejemplo:

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),
            ),
          )
        ],
      ),
    );
  }
}

enter image description here

6
chemamolins 12 ene. 2019 a las 23:03

La solución correcta es usar un widget "Pila" y "Posicionado" como:

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
Raugaral 2 abr. 2020 a las 14:41

Solución correcta para FAB de anclaje.

Otra solución con pila y contenedor. El lugar de FAB se basa en el tamaño del widget de Contenedor hermano y los clics / toques funcionan correctamente.

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!'),
            ),
          ),
        ],
      ),
    );
  }
}

Floating Action Button

Enlace CodePen para ancla FAB

-1
Galti 24 may. 2020 a las 14:05