How can I have an overflowing logo in a Flutter app Bar?

Question

The Logo should be slightly offset to the bottom and be between the body and the normal app bar.

Somehow no matter what I try with Overflowboxes or similar constructions the logo gets cutted of the one or the other way.

      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(100), AppBar
        child: AppBar(
          title: Text(
            'My App',
            style: Theme.of(context).textTheme.headlineLarge,
          ),
          backgroundColor: Colors
              .transparent, 
          elevation: 0, 
        ),
      ),
      body: Stack(
        children: [
          ListView.builder(
            itemCount: DUMMY_MEALS.length,
            itemBuilder: (ctx, index) {
              final mealData = DUMMY_MEALS[index];
              return Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: MealItemInOverview(
                    mealData.id,
                    mealData.title,
                    mealData.preparation_time,
                    mealData.ingredients,
                    mealData.steps),
              );
            },
          ),
          Positioned(
            top:
                -60,
            right:
                20, 
            child: CircleAvatar(
              radius:
                  50, 
              backgroundImage: AssetImage('assets/images/images.png'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

You can try adding clipBehavior on Stack.

Stack(
  clipBehavior: Clip.none, //this is hardEdge by default
) 

Answer 2

appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(80), // Adjusted height to accommodate the overlap
        child: AppBar(
          title: Text(
            'My App',
            style: Theme.of(context).textTheme.headlineLarge,
          ),
          elevation: 0, 
          backgroundColor: Colors
              .transparent, transparent.
          flexibleSpace: Stack(
            clipBehavior: Clip.none, // this changed it :)
            children: [
              Positioned(
                top:
                    70,
                right:
                    16, 
                child: CircleAvatar(
                  radius: 50, 
                  backgroundImage: AssetImage('assets/images/mylogo.png'),
                ),
              ),
            ],
          ),
        ),