'Positioned' Widget not positioning 'Text' widget properly-Flutter

Question

Needed the Alexis Sanchez Text to be under the picture but for some reason, its going right at the bottom of the screen, I am not being able to figure out why. Here is 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(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            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: _buildProfilePhoto(),
              ),
              Positioned(
                top: 60,
                child: Text(
                  'Alexis Sanchez',
                  style: TextStyle(
                    color: AppTheme.black100,
                    fontSize: 22,
                    fontWeight: FontWeight.w600,
                    fontStyle: FontStyle.normal,
                    fontFamily: 'Poppins',
                    height: 33,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          )
        ],
      ),
      backgroundColor: AppTheme.lightBlue,
      drawer: Drawer(),
    );
  }

  Widget _buildProfilePhoto() {
    return 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),
          ),
        ),
      ],
    );
  }
}

Would anyone be able to help me out here?

Solution 1

Try using a Column like so:

Positioned(
  top: -50,
  child: Column(
     crossAxisAlignment: CrossAxisAlignment.center,
     children: [
       _buildProfilePhoto(),
       SizedBox(height: 5),
       Text(
          'Alexis Sanchez',
           style: TextStyle(
             color: AppTheme.black100,
             fontSize: 22,
             fontWeight: FontWeight.w600,
             fontStyle: FontStyle.normal,
             fontFamily: 'Poppins',
             height: 33,
           ),
           textAlign: TextAlign.center,
       ),
     ]
  )
),

Solution 2

Full working code:

import 'package:flutter/material.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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Profile',
          ),
          elevation: 0,
        ),
        body: Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _buildProfilePhoto(),
              Text(
                'Alexis Sanchez',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w600,
                  fontStyle: FontStyle.normal,
                  fontFamily: 'Poppins',
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        drawer: Drawer(),
      ),
    );
  }

  Widget _buildProfilePhoto() {
    return Center(
      child: 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: Colors.blue,
              child: Icon(Icons.camera_alt_outlined),
            ),
          ),
        ],
      ),
    );
  }
}

Result:

Comments

[G H Prakash]

use column instead of Positioned. Inside Column to you can take children's as image and name.