Sliver App Bar not displaying correctly – Flutter

Issue

I’m trying to display a SliverAppBar as shown on my design

but I’m not sure it can be done in Flutter

here is my code so far

        SliverAppBar(
      // title: ,
      backgroundColor: Colors.grey[200],
      expandedHeight: 300,
      centerTitle: true,
      shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100))),
      actions: <Widget>[
CircleAvatar(
              radius: 20,
              // foregroundColor: Colors.red,
              backgroundImage: AssetImage(
                'assets/img/categories/player.png',
              ),
            ),
      ],
      flexibleSpace: FlexibleSpaceBar(
        background: Container(),
        centerTitle: true,

        title: Container(
          height: 40,
          child: Column(
            children: [
              Text("Mrs Surname Name",
                  style: TextStyle(
                    fontFamily: 'Kannada Sangam MN',
                    fontWeight: FontWeight.w500,
                    fontSize: 20,
                    // color: AppTheme.high_emphasis,
                  )),

            ],
          ),
        ),

      ),
      pinned: true,
      floating: false,
      elevation: 0,
    ),

I’d like for the name & Motif to show even when scrolled up also the Avatar but smaller

But the "Constantes" to hide when scrolled up 🙏

Solution

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"),
                    ),
                  ),
                ],
              ),
            ),
          ),
     

Answered By – Yeasin Sheikh

Answer Checked By – Pedro (FlutterFixes Volunteer)