How to move the actions along with title in flexibleSpace in SliverAppBar in Flutter?

Question

I am trying to implement something similar to this in Flutter.

https://a.imge.to/2019/08/22/mgrjU.png

But I am stuck on this at the moment.

https://a.imge.to/2019/08/22/mgB62.png

The action buttons are pinnned to the top of the UI and do not move with the text. Is there any way to bring them down in the Sliver?

I have not been able to find a way to add actions to the flexibleSpace part of the SliverAppBar

SliverAppBar(
      floating: false,
      pinned: true,
      expandedHeight: 150.0,
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      flexibleSpace: const FlexibleSpaceBar(
        title: Text("User Status", textAlign: TextAlign.justify,),
        titlePadding: EdgeInsets.all(15.0),
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.refresh),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {},
        )
      ],
    );

I want the action buttons to come down with the title text. And when the user scrolls, the buttons should move with the title text.

Answer 1

I'm not sure how you did it, try this working code.

Output:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          floating: false,
          pinned: true,
          expandedHeight: 150.0,
          backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
          flexibleSpace: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                width: 200,
                child: FlexibleSpaceBar(title: Text("User Status")),
              ),
              Spacer(),
              IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((_, i) {
            return ListTile(title: Text("Item ${i}"));
          }, childCount: 20),
        ),
      ],
    ),
  );
}