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

Flutter – Scaffold's BottomSheet does not Respect Safe Area

    return Scaffold(
      appBar: AppBar(...),
      bottomSheet: _buildBottomSheet(context),
      body: SingleChildScrollView(...)

The issue I got into is that the bottom sheet hides the lower part of the scroll view. The expectation is that the body of the Scaffold (e.g., scroll view) would respect the bottom sheet. (My bottom sheet is a simple Container with a button).

I got this issue with Flutter web.

Tags:

2

Answers


  1. 0

    The SafeArea widget only avoids system intrusions and not other elements of your app (https://api.flutter.dev/flutter/widgets/SafeArea-class.html).

    Potentially you could achieve the desired effect by using the bottomNavigationBar instead of bottomSheet property of the Scaffold:

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(
          child: ListView.builder(
            itemBuilder: (context, index) => Text(
              'Very Long Text Item $index',
              textAlign: TextAlign.center,
            ),
          ),
        ),
        bottomNavigationBar: Container(
          child: ElevatedButton(
              onPressed: () => print('hit'), child: Text('Button')),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    In this case you can use SafeArea widget to solve your problem.

    return Scaffold(
  appBar: AppBar(...),
  bottomSheet: _buildBottomSheet(context),
  body: SafeArea(SingleChildScrollView(...)),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search