How can I create a Flutter UI design with a profile picture that looks like this?

Question

I need to code similar to this UI design but I don't know how can I achieve something like this and I try something it is good but have some problems I need to place this profile picture similar to this photo how can I do that my widget is hear

enter image description here

Card(
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          Container(
            width: double.infinity,
            height: 200.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 120.0),
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'In the making',
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10.0),
                Text(
                  'sampe test **',
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Trainee Software Developer (Flutter)',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(height: 10.0),
                Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    '#Flutter',
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                ElevatedButton(
                  onPressed: () {
                    // Add your navigation logic here
                  },
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  ),
                  child: Text('View Profile'),
                ),
              ],
            ),
          ),
        ],
      ),
    );

enter image description here

Answer 1

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 120.0),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Card(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [

                  const SizedBox(height: 80,),

                  const Text('In the making', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold,),),

                  const SizedBox(height: 10.0),

                  const Text('sample test **',style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold,)),

                  const Text('Trainee Software Developer (Flutter)', style: TextStyle(fontSize: 16.0),),

                  const SizedBox(height: 10.0),

                  Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: const Text('#Flutter', style: TextStyle(fontSize: 16.0, color: Colors.white,),),
                  ),

                  const SizedBox(height: 10.0),

                  ElevatedButton(
                    onPressed: () {
                      // Add your navigation logic here
                    },
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                    ),
                    child: const Text('View Profile'),
                  ),
                ],
              ),
            ),
          ),


          //Circle Avatar
          Positioned(
            width: MediaQuery.of(context).size.width,
            top: -75,
            child: CircleAvatar(
              radius: 75,
              backgroundColor: Colors.transparent,
              child: ClipOval(child: Image.network('https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg')),
            ),
          ),
        ],
      ),
    );
  }
}