Flutter: add a floating action button to an image

Question

I'm trying to add a floating action button to an image. The button will be used to change the selected image. I want the button to float over the bottom right of the image. So far all I can do is add the floating action button directly below the image. Thanks for any help!

@override
Widget build(BuildContext context) {

  // Create the view scaffold. Use a list view so things scroll.
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("My Title"),
    ),
    body: new ListView(
      children: [
        new Container(
          padding: EdgeInsets.zero,
          child: new Image.asset(
            "assets/images/background_image.png",
            fit: BoxFit.fitWidth,
          ),
        ),
        new FloatingActionButton(
          child: const Icon(Icons.camera_alt),
          backgroundColor: Colors.green.shade800,
          onPressed: () {},
        ),
        new Divider(),
        new ListTile(
          title: new Text('Email'),
          leading: const Icon(Icons.email),
          onTap: () {},
        ),
        new Divider(),
      ],
    ),
  );
}

Answer 1

You may use a Stack and Positioned widget, you can read about those widgets here:

Stack: https://docs.flutter.io/flutter/widgets/Stack-class.html

Positioned: https://docs.flutter.io/flutter/widgets/Positioned-class.html

        return new Scaffold(
              appBar: new AppBar(
                title: new Text("My Title"),
              ),
              body: new ListView(
                children: [
                  Stack(
                    children: <Widget>[
                      new Container(
                          padding: EdgeInsets.zero,
                          child: new Image.asset(
                        "assets/images/background_image.png",
                        fit: BoxFit.fitWidth,
                      )),
                      Positioned(
                        right: 0.0,
                        bottom: 0.0,
                        child: new FloatingActionButton(
                          child: const Icon(Icons.camera_alt),
                          backgroundColor: Colors.green.shade800,
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                  new Divider(),
                  new ListTile(
                    title: new Text('Email'),
                    leading: const Icon(Icons.email),
                    onTap: () {},
                  ),
                  new Divider(),
                ],
              ),
            );