Anchor floating action button to Card

Question

When creating a Card (for example using the code from the Docs) , how can I anchor a FAB to the Card (the green circle in the image below), like in this question for Android.

I saw a similar question for attaching a FAB to the AppBar, but the solution relies on the AppBar being a fixed height. When using a Card, the height isn't fixed ahead of time so the same solution can't be used.

score 10 · Accepted Answer · answered Jan 12 '19 at 23:03

You can place the FloatingActionButton in an Align widget and play with the heightFactor property.

For example:

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

score 3 · Answer 2 · answered May 24 '20 at 14:05

Correct solution for anchor FAB.

Another solution using stack and container. FAB's place is based on its sibling Container widget's size and clicks/taps work properly.

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

CodePan link for anchor FAB

score 2 · Answer 3 · answered Apr 02 '20 at 14:41

The correct solution is to use a "Stack" and "Positioned" widged like:

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

Anchor floating action button to Card

3 Answers3