Flutter Question posted in
The official Flutter documentation can be found here.

Flutter SafeArea doesnt work with DraggableScrollableSheet

I’m using the Scaffold’s bottomSheet property to permanently display a DraggableScrollableSheet however it goes beyond the status bar and wrapping it with SafeArea doesn’t seem to solve my problem. I also tried to get statusbar / bottom navigationbar height so that I can deduct them manually but they always return 0.
Similar issues were all fixed with showBottomSheet()’s safe area property but in my case I don’t use a function I use the property of scaffold to display it. Are there any workaround for this or am I missing something? I’m on stable channel 3.16.5

class DraggableProblem extends StatelessWidget {
  const DraggableProblem({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: SafeArea(
        key: ValueKey('IM NOT WORKING'),//NOT WORKING
        child: DraggableScrollableSheet(
            initialChildSize: 1,
            minChildSize: 0.1,
            shouldCloseOnMinExtent: false,
            snapSizes: const [0.1, 1],
            expand: false,
            snap: true,
            builder: (context, controller) {
              return Container(
                color: Colors.red,
                child: ListView.builder(
                  controller: controller,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('Item $index'),
                    );
                  },
                ),
              );
            }),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Problem is [AppBar] because if you’re not using [AppBar], [SafeArea] will not work properly.

    class DraggableProblem extends StatelessWidget {
  const DraggableProblem({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(preferredSize: const Size.fromHeight(kToolbarHeight), child: Container()),
      bottomSheet: SafeArea(
        child: DraggableScrollableSheet(
          initialChildSize: 1,
          minChildSize: 0.1,
          shouldCloseOnMinExtent: false,
          snapSizes: const [0.1, 1],
          expand: false,
          snap: true,
          builder: (context, controller) {
            return Container(
              color: Colors.red,
              child: ListView.builder(
                itemCount: 100,
                controller: controller,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            );
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Try using Stack widget to overlay the DraggableScrollableSheet on top of the Scaffold and manually handle the safe area.

    import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      body: Stack(
        children: [
          // Your main content here
          Container(
            // Add padding to the top to account for the status bar
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Center(
              child: Text('Main Content'),
            ),
          ),

          // DraggableScrollableSheet
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: DraggableScrollableSheet(
              initialChildSize: 1,
              minChildSize: 0.1,
              shouldCloseOnMinExtent: false,
              snapSizes: const [0.1, 1],
              expand: false,
              snap: true,
              builder: (context, controller) {
                return Container(
                  color: Colors.red,
                  child: ListView.builder(
                    controller: controller,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DraggableProblem(),
  ));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search