How can I position a FloatingActionButton spanning two widget in Flutter? - flutter

Question

I trying to position a FloatingActionButton spanning two widget in flutter.
like this.
However, this is my app screen.
I can't stack the button on the center of two widget.
How can I solve my question :(? This is the sample code of my app. Thanks.
import 'package:flutter/material.dart';
class UserProfileBody extends StatelessWidget {
const UserProfileBody({
Key? key,
}) : super(key: key);
Widget _buildUserProfilePhoto(BuildContext context) {
return Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.width,
),
width: MediaQuery.of(context).size.width,
child: const Image(
fit: BoxFit.contain,
image: NetworkImage(defaultUserProfileImage),
),
);
}
#override
Widget build(BuildContext context) {
return Column(
children: [
_buildUserProfilePhoto(context),
Stack(
children: [
Align(
alignment: Alignment.topRight,
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.photo_camera),
),
),
Column(
children: [
ListTile(
title: const Text('the title'),
subtitle: const Text('the subtitle'),
onTap: () {},
)
],
),
],
),
],
);
}
}

Answer 1

You can place image inside stack, in this case UI will be
class UserProfileBody extends StatelessWidget {
const UserProfileBody({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
final double imageHeight = constraints.maxHeight * .5;
debugPrint(imageHeight.toString());
return Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
// image
Align(
alignment: Alignment.topCenter,
child: Container(
height: imageHeight,
color: Colors.green,
)
// _buildUserProfilePhoto(context),
),
Positioned(
top: imageHeight - (64 / 2), //64 is default fab size
right: 24,
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.photo_camera),
),
),
// Column(
// children: [
// ListTile(
// title: const Text('the title'),
// subtitle: const Text('the subtitle'),
// onTap: () {},
// )
// ],
// )
],
),
],
);
});
}
}
Play with
Positioned(
top: imageHeight - (64 / 2), //64 is default fab size
right: 24,
child: FloatingActionButton(
Solution 2:
And if you like place image above stack
Positioned(
top: -(64 / 2),
class UserProfileBody extends StatelessWidget {
const UserProfileBody({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
final double imageHeight = constraints.maxHeight * .5;
debugPrint(imageHeight.toString());
return Column(
children: [
Container(
height: imageHeight,
color: Colors.green,
),
SizedBox(
height: constraints.maxHeight - imageHeight,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: -(64 / 2), //64 is default fab size
right: 24,
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.photo_camera),
),
),
Column(
children: [
ListTile(
title: const Text('the title'),
subtitle: const Text('the subtitle'),
onTap: () {},
)
],
)
],
),
),
],
);
});
}
}
Use clipBehavior: Clip.none, on stack