How to make an action botton(not really, it just a box of text)on SliverAppBar

Question

Now I use SliverAppBar and if I want to move the Text "Choices"(in the picture) to the right and when clicked(Click on to the text) it goes to another page. How I can do!! The one I made it's too close to the border and too low not at the same level.

class Poll extends StatelessWidget {
    const Poll({ Key? key }) : super(key: key);

    @override
    Widget build(BuildContext context) {
         return CustomScrollView(
            slivers: [
                SliverAppBar(
                  pinned: true,
                  backgroundColor: Colors.black,
                  flexibleSpace: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.bottomRight,
                          child: Text(
                             "Choices",
                             style: TextStyle(color: Colors.white,fontSize:20)
                          ),
                        ),
                  onTap: (){
                    Route route = MaterialPageRoute(builder: (context)=>Choices());
                    Navigator.push(context, route);
                  },
                )
            ],
         );

did you try wraping text with `GestureDetector`? and share the code 1st — Md. Yeasin Sheikh, Jul 19 '21 at 12:20

score 0 · Accepted Answer · answered Jul 19 '21 at 16:11

Unstead of using a flexibleSpace use actions :

 SliverAppBar(
      pinned: true,
      backgroundColor: Colors.black,
      actions: [
        TextButton(
          onPressed: () {
            Route route = MaterialPageRoute(builder: (context) => Choices());
            Navigator.push(context, route);
          },
          child: Text(
            "Choices",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        )
      ],
     [...]
    )

If you need more space on the right, wrap the textButton with a Padding :

SliverAppBar(
      pinned: true,
      backgroundColor: Colors.black,
      actions: [
        Padding(
          padding: EdgeInsets.only(right: 10),
          child: TextButton(
            onPressed: () {
              Route route = MaterialPageRoute(builder: (context) => Choices());
              Navigator.push(context, route);
            },
            child: Text(
              "Choices",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        )
      ],
      [...]
    )

How to make an action botton(not really, it just a box of text)on SliverAppBar

1 Answers1