CODEWITHSUNDEEP
flutterdart
Piyush Passi
Piyush Passi

Reputation: 482

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

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 pinned 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: <Widget>[
    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.

Upvotes: 9

Views: 8790

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267404

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

Output:

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),
        ),
      ],
    ),
  );
}

Upvotes: 10

Related Questions