Search code examples
flutteruser-interfaceflutter-layoutflutter-sliverflutter-sliverappbar

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


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

My app page

my ui


Solution

  • 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),
                ),
              ),
            )
          ],
          [...]
        )