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,
),
],
);
}
}
CodePudding user response：
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.
CodePudding user response：
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 
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,
),
],
),
),
],
),
)
],
);
},
));