Column widget not positioning widgets properly when using Stack widget-Flutter - flutter

Question

The first image is the design of the app from Figma. While the next image is the one which I am getting though I am using simple stack and columns. I am not being able to understand why it is coming out as such. The Text Widgets must be under the picture but they are going right at the bottom of the screen. Can anyone help me out with this one?
My code:
import 'package:flutter/material.dart';
import '../../app_theme.dart';
class ProfileScreen extends StatefulWidget {
const ProfileScreen({Key? key}) : super(key: key);
#override
_ProfileScreenState createState() => _ProfileScreenState();
}
class _ProfileScreenState extends State<ProfileScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: AppTheme.lightBlue,
title: Text(
'Profile',
style: TextStyle(color: AppTheme.black100),
),
elevation: 0,
),
body: Column(
children: [
SizedBox(
height: 50,
),
Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
topLeft: Radius.circular(16),
),
color: AppTheme.lightGrey),
),
Positioned(
top: -50,
child: _buildProfileDetails(),
),
],
)
],
),
backgroundColor: AppTheme.lightBlue,
drawer: Drawer(),
);
}
Widget _buildProfileDetails() {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/images/profile_photo.jpg'),
),
Positioned(
left: 78,
top: 60,
child: CircleAvatar(
radius: 14,
backgroundColor: AppTheme.blue,
child: Icon(Icons.camera_alt_outlined),
),
),
],
),
Text(
'Alexis Sanchez',
style: TextStyle(
color: AppTheme.black100,
fontSize: 22,
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
height: 33,
),
textAlign: TextAlign.center,
),
Text(
'Alexis Sanchez',
style: TextStyle(
color: AppTheme.black80,
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
height: 18,
),
textAlign: TextAlign.center,
),
Text(
'Alexis Sanchez',
style: TextStyle(
color: AppTheme.black80,
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
height: 18,
),
textAlign: TextAlign.center,
),
],
);
}
}

Answer 1

Stack widget extends and fills all the available space. if you want your stack to be smaller than all available space. wrap it inside a SizedBox widget.

Answer 2

If you need to control height, do like height: 1.2. and use mainAxisSize: MainAxisSize.min, on Column.
I am using different approach to gain this and will contain some extra widget for future purpose. Mostly describe on code-comment. If you face any issue while scaling/increasing size, adjust the parent Container size. Used demo color for design purpose.
Run on dartPad.
Result will be:
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
/// header Part: Name, logo, info
Container(
color: Colors.grey,
height: kToolbarHeight * 3, //adjust box Stack size
child: Stack(
children: [
/// bottom Half background
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: kToolbarHeight * 2,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
topLeft: Radius.circular(16),
),
),
),
),
/// center logo with info
Positioned(
bottom: 10,
left: 0,
right: 0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 50 * 2, // from your logo radius
width: 50 * 2 +
7, //7 is from `camera_alt_outlined` to align
child: Stack(
children: const [
CircleAvatar(
radius: 50,
backgroundColor: Colors.deepPurple,
// backgroundImage: AssetImage(
// 'assets/images/profile_photo.jpg'),
),
Positioned(
bottom: 7,
right: 0,
child: CircleAvatar(
radius: 14,
backgroundColor: Colors.blue,
child: Icon(Icons.camera_alt_outlined),
),
)
],
),
),
///now rest of Text
const Text(
'Alexis Sanchez',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
height: 1.2),
textAlign: TextAlign.center,
),
const Text(
'Alexis Sanchez',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
),
textAlign: TextAlign.center,
),
const Text(
'Alexis Sanchez',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins',
),
textAlign: TextAlign.center,
),
],
),
),
],
),
)
],
);
},
));

Answer 3

I would have put child in this container and put everything that I want on this background
Must use screenutil helps for different screen sizes
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(16.sp),
topLeft: Radius.circular(16.sp),
),
color: AppTheme.lightGrey),
),