Flutter showBottomSheet doesn't cover AppBar

PreemPalver2
July 16, 2023
333 views
0 votes
2 Answers

I’m using a showBottomSheet (Not modal sheet), and the content I’m displaying doesn’t go over the appbar, and I’m not sure why because I remember doing that in the past.

Here’s my code:

  @override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Testing'),
  ),
  body: TextButton(
    onPressed: () => {
      showBottomSheet(
        enableDrag: true,
        context: context,
        builder: (context) => Container(
          color: Colors.red,
        ),
      )
    },
    child: const Text('Press'),
  ),
);
  }

Result:

I don’t want to resort to show my AppBar with a Visibility tag, because then I’d have to do it for every screen! So I’m looking for a cleaner solution.

Any insights?
Thanks!

Tags: flutter

Answers

Chosen as BEST ANSWER

I found a solution by using a showModalBottomSheet instead.

void showMyBottomSheet(BuildContext context) {
    showModalBottomSheet<void>(
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) {
        return DraggableScrollableSheet(
          expand: true,
          snap: true,
          initialChildSize: 1,
          builder: (context, scrollController) {
            return SingleChildScrollView(
              controller: scrollController,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: 300,
                    color: Colors.red,
                  ),
                  Container(
                    height: 300,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 300,
                    color: Colors.red,
                  ),
                  Container(
                    height: 300,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 300,
                    color: Colors.red,
                  ),
                  Container(
                    height: 300,
                    color: Colors.blue,
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }