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

Flutter – BottomSheet opening with only till half of the screen

BottomSheet doesn’t not open with full screen width in Samsung Fold device.
I attach image for full info
[[enter image description here](https://phpout.com/wp-content/uploads/2023/08/YGWnK-jpg.webp)](https://phpout.com/wp-content/uploads/2023/08/KT9m3-jpg.webp)

I want to open with full screen width for any devices. Is there any solution?

Tags:

3

Answers


  1. 0

    Use MediaQuery to get the device width height.

    void _showCustomBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        width: MediaQuery.of(context).size.width * 0.8, // Adjust the width as needed
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              title: Text('Option 1'),
              onTap: () {},
            ),
            ListTile(
              title: Text('Option 2'),
              onTap: () {},
            ),
            // Add more list tiles or widgets here
          ],
        ),
      );
    },
  );
}

    set the isScrollControlled property to true under showModalBottomSheet to get full height.

    Login or Signup to reply.
  2. 0

    you can utilize the Scaffold widget’s showBottomSheet method to display a BottomSheet. By default, this BottomSheet will take up the full width of the screen.

      showModalBottomSheet(
    context: context,
    isScrollControlled: true, 
    builder: (BuildContext context) {
      return Container(
        width: double.infinity, // Full screen width
        height: 300, 
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('BottomSheet Content'),
            // Add more widgets as needed
          ],
        ),
      );
    },
  );
}
    Login or Signup to reply.
  3. 0 
    
class _WalletScreenState extends State<WalletScreen> {
  void _showFullWidthBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) => Container(
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(title: Text('Option 1'), onTap: () => Navigator.pop(context)),
            ListTile(title: Text('Option 2'), onTap: () => Navigator.pop(context)),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wallet Screen')),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Your Wallet'),
            SizedBox(height: 20),
            Text('This is your digital wallet.'),
            SizedBox(height: 20),
            Text('Manage your cards and passes.'),
            SizedBox(height: 40),
            ElevatedButton(
              onPressed: _showFullWidthBottomSheet,
              child: Text('Show Bottom Sheet'),
            ),
          ],
        ),
      ),
    );
  }
}

    In this method, a custom Container is displayed as the bottom sheet content by using the showModalBottomSheet function. by increasing the Container width by double.infinite, you make sure it fills the entire screen.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search