Sliver App Bar not displaying correctly - Flutter

We can use SliverAppBar title to hold name & Motif because it will be always visible to the UI. on Next part avatar image also be always visible but will reduce the size based on scroll, in this case putting it inside flexibleSpace:FlexibleSpaceBar(title: Avatar) will be better choice. For others, info that will be vanished based on scroll, so we can use FlexibleSpaceBar( background:) for that and to populate it using column. But there will be overlap, and we can trick it using const SizedBox(height: kToolbarHeight,), at 1st child of Column.

Result

Here is a sample that can help to produce the UI, you can tweak the decoration the way like.

 SliverAppBar( pinned: true, backgroundColor: Colors.grey[200], expandedHeight: 300, title: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text( "Mrs, Surname Name", style: TextStyle( fontSize: 16, ), ), Text( "Mrs, Surname Name", style: TextStyle( fontSize: 26, ), ), ], ), shape: const ContinuousRectangleBorder( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(100), bottomRight: Radius.circular(100), ), ), flexibleSpace: FlexibleSpaceBar( background: Container( color: Colors.grey[200], padding: const EdgeInsets.only(left: 16), child: Column( ///* however we can use sizedBox to handle upperSpaces crossAxisAlignment: CrossAxisAlignment.start, // mainAxisAlignment: MainAxisAlignment.end, children: [ ///* like this const SizedBox( height: kToolbarHeight, ), ...List.generate( 4, (index) => Text("others info"), ) ], ), ), title: Row( ///* not sure why i cant avoid using Row here mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ SizedBox(), Align( alignment: Alignment.center, child: Container( height: 70, width: 70, alignment: Alignment.center, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.deepOrange, ), child: Text("img"), ), ), ], ), ), ),