Column widget not positioning widgets properly when using Stack widget-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,
        ),
      ],
    );
  }
}

score 1 · Answer 1 · answered Jan 29 '22 at 11:08

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.

answered Jan 29 '22 at 11:08

reza

1,354
1
7
25

score 1 · Answer 2 · answered Jan 29 '22 at 13:22

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

score 0 · Answer 3 · answered Jan 29 '22 at 18:03

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

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

3 Answers3