I'm trying to get my CircleAvatar widget to position as in the following image but I can't seem to make that happen

Question

1Here is my code. I tried using the bottom constructor from the appbar and I tried using the CircleAvatar in the body but I can't seem to make it so that it would position at the middle of the appbar and the body. Any tips maybe? Since I'm new to the mobile development world.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xFFf65d46),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(100), bottomLeft: Radius.circular(100)
              // bottomLeft: Radius.circular(-1000),
              ),
        ),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(250),
          child: Container(),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: const [
          CircleAvatar(
            backgroundImage: AssetImage('assets/images/logo_2.png'),
            radius: 75,
          ),
        ],
      ),
    );
  }
}

Answer 1

Instead of put that in body, try this:

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(250),
    child: Stack(
      alignment: Alignment.center,
      clipBehavior: Clip.none,
      children: [
        AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Color(0xFFf65d46),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(100),
                bottomLeft: Radius.circular(100)
                // bottomLeft: Radius.circular(-1000),
                ),
          ),
        ),
        Positioned(
          bottom: -75 ,
          child: CircleAvatar(
            backgroundImage: AssetImage('assets/images/logo_2.png'),
            radius: 75,
          ),
        ),
      ],
    ),
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: const [],
  ),
)