CODEWITHSUNDEEP
flutter
user10033434
user10033434

Reputation: 455

How can I change the elevation (z-index) of the back button in flutter

I use a Stack, DraggableScrollableSheet, and a BottomAppBar in my code. The AppBar has elevation of 0, and a transparent background. The Scaffold has extendBodyBehindAppBar set to true.

The problem i'm facing is, the back button is visible on top of the DraggableScrollableSheet when it's dragged all the way up.

My question is, how can I put it in it's expected place, under the DraggableScrollableSheet?

Thanks...

enter image description here

enter image description here

Upvotes: 0

Views: 714

Answers (1)

bugbear
bugbear

Reputation: 197

You can use a Stack:

Scaffold(
  backgroundColor: Colors.blue,
  body: SafeArea(
    child: Stack(
      children: [
        const Align(
          alignment: Alignment.topLeft,
          child: BackButton(color: Colors.white),
        ),
        DraggableScrollableSheet(
          builder: (context, scrollController) => SingleChildScrollView(
            controller: scrollController,
            child: Container(
              color: Colors.red,
              height: 1000,
            ),
          ),
          initialChildSize: .1,
          minChildSize: .1,
        )
      ],
    ),
  ),
)

If you want the red container to go all the way up to the top, you can remove the SafeArea on the Stack and use it around the BackButton instead.

You can also replace the BackButton in the above example with

AppBar(
  leading: BackButton(
    color: Colors.white,
  ),
  backgroundColor: Colors.teal,
)

but in that case I would advise you to wrap it with a SizedBox or a FractionallySizedBox to prevent it from expanding on all the page

Upvotes: 1

Related Questions