How to make a widget overflow from the appbar and still be visible

Question

I have a design for an appbar like this:

But I don't know how to set for the avatar exactly. All I can do is:

PreferredSize(
    preferredSize: const Size.fromHeight(150),
    child: Container(
      height: 160,
      child: AppBar(
        centerTitle: true,
        title: Text(
          'Setting',
          style: context.bodyLarge.copyWith(
            color: Colors.white,
            fontSize: 20.sp,
            fontWeight: FontWeight.w200,
          ),
        ),
        backgroundColor: context.theme.primaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
              bottom: Radius.elliptical(
                  MediaQuery.of(context).size.width, 50.0)),
        ),
        flexibleSpace: Stack(
          children: [
            Positioned(
              left: (MediaQuery.of(context).size.width / 2) - 50,
              top: 100,
              child: CircleAvatar(
                radius: 50,
                backgroundImage: Image.network(
                        'https://avatars.githubusercontent.com/u/113747320?v=4')
                    .image,
              ),
            ),
          ],
        ),
      ),
    ),
  )

I tried to achive it with a bigger parent preferredSize but still wont work

Answer 1

In my case it is working fine!

Try this!

OUTPUT:

CODE:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: const Color(0xffea5d49),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: HeaderCurvedContainer(),
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
              ),
            ),
            const Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Icon(
                        Icons.menu,
                        color: Colors.white,
                      ),
                      Text(
                        'Profile',
                        style: TextStyle(
                          fontSize: 35.0,
                          letterSpacing: 1.5,
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      SizedBox(
                        width: 25,
                      )
                    ],
                  ),
                ),
                CircleAvatar(
                  radius: 50,
                  backgroundImage:
                      NetworkImage('https://i.pravatar.cc/150?img=2'),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class HeaderCurvedContainer extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = const Color(0xffea5d49);
    Path path = Path()
      ..relativeLineTo(0, 100)
      ..quadraticBezierTo(size.width / 2, 150.0, size.width, 100)
      ..relativeLineTo(0, -100)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}