flutter

Flutter Bug - Weird space in bottomsheet on iOS only


Hello I am getting this on iOS only. Anyone having the same issues?

The space at the last item in the listview has an added weird space of about 50 pixel that is coming from the SDK. Not sure how to fix it. It only shows up on iOS.

Has anyone encountered this bug before? I am not sure how to fix this. Thanks.


        showModalBottomSheet(//linked resource LR_000025
            context: context,
            backgroundColor: Colors.transparent,
            builder: (context) {
                
                return WillPopScope(
                    child: Container(
                        child: Container(
                            decoration: BoxDecoration(
                                color: Theme.of(context).colorScheme.background,
                                borderRadius: BorderRadius.only(
                                    topLeft: const Radius.circular(20),
                                    topRight: const Radius.circular(20),
                                ),
                            ),
                            child: SingleChildScrollView(
                                child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                        
                                        ListView.separated(
                                            //key: listViewKey,
                                            //controller: _listviewController,
                                            scrollDirection: Axis.vertical,
                                            shrinkWrap: true,
                                            primary: false,
                                            itemCount: DeliveryTypes.values.length,
                                            separatorBuilder: (context, index) {
                                                
                                                return Container(
                                                    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                                                    child: Divider(height: 1),
                                                );
                                                
                                            },
                                            itemBuilder: (context, index) {
                                                
                                                return Container(
                                                    child: ListTile(
                                                        title: Center(
                                                            child: Text(
                                                                'labelToDisplay',
                                                                style: TextStyle(
                                                                    fontSize: 15,
                                                                ),
                                                            ),
                                                        ),
                                                        onTap: () {
                                                            
                                                            //turn the flag off
                                                            widget.appStore.modalWasDismissed();
                                                            
                                                            //dismiss the dialog
                                                            Navigator.of(context).pop();
                                                            
                                                            //update the status to display
                                                            _deliveryTypeToDisplayChanged(DeliveryTypes.values.elementAt(index));
                                                            
                                                            setState(() {
                                                                //update UI
                                                            });
                                                            
                                                        }
                                                    ),
                                                );
                                                
                                            },
                                        ),
                                        
                                        //seperator
                                        Container(
                                            padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                            child: Divider(height: 1),
                                        ),
                                        
                                        //bottom buffer
                                        SizedBox(
                                            height: 30,
                                        ),
                                        
                                    ],
                                ),
                            ),
                        ),
                    ),
                    onWillPop: () async {
                        
                        //turn the flag off
                        widget.appStore.modalWasDismissed();
                        
                        //dismiss the bottomsheet
                        return true;
                        
                    },
                );
                
            },
        );
        

In my pubspec: environment: sdk: ">=2.12.0 <3.0.0"

here is the reproducabled code on ios:

main.dart

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(
      title: 'ios bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Listview.seperated unexpected gap on iOS'),
    );
  }
    
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
    
  @override
  State<MyHomePage> createState() => _MyHomePageState();
    
}

class _MyHomePageState extends State<MyHomePage> {
  
    void _buttonPressed() {
        
        _showBottomSheet();
        
    }
    
    void _showBottomSheet() {
        
        showModalBottomSheet(//linked resource LR_000025
            context: context,
            backgroundColor: Colors.transparent,
            builder: (context) {
                
                return WillPopScope(
                    child: Container(
                        decoration: const BoxDecoration(
                            color: Colors.teal,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(20),
                                topRight: Radius.circular(20),
                            ),
                        ),
                        child: SingleChildScrollView(
                                child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                        
                                        ListView.separated(
                                            scrollDirection: Axis.vertical,
                                            shrinkWrap: true,
                                            primary: false,
                                            itemCount: 3,
                                            separatorBuilder: (context, index) {
                                                
                                                return Container(
                                                    color: Colors.yellow,
                                                    padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                                                    child: const Divider(height: 1),
                                                );
                                                
                                            },
                                            itemBuilder: (context, index) {
                                                
                                                return Container(
                                                    color: Colors.orange,
                                                    child: ListTile(
                                                        title: const Center(
                                                            child: Text(
                                                                'labelToDisplay',
                                                                style: TextStyle(
                                                                    fontSize: 15,
                                                                ),
                                                            ),
                                                        ),
                                                        onTap: () {
                                                            
                                                            //dismiss the dialog
                                                            Navigator.of(context).pop();
                                                            
                                                            setState(() {
                                                                //update UI
                                                            });
                                                            
                                                        }
                                                    ),
                                                );
                                                
                                            },
                                        ),
                                        
                                        //seperator
                                        Container(
                                            color: Colors.red,
                                            padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                                            child: const Divider(height: 1),
                                        ),
                                        
                                        //bottom buffer
                                        const SizedBox(
                                            height: 30,
                                        ),
                                        
                                    ],
                                ),
                            ),
                    ),
                    onWillPop: () async {
                        
                        //dismiss the bottomsheet
                        return true;
                        
                    },
                );
                
            },
        );
        
    }
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
                        
            const Padding(
                            padding: EdgeInsets.fromLTRB(30, 30, 30, 30),
                            child: Text(
                                'Press the button below to see the bottomsheet with the extra gap on iOS',
                            ),
                        ),
                        
                        Container(
                            color: Colors.grey,
                            child: ListView.separated(
                                scrollDirection: Axis.vertical,
                                shrinkWrap: true,
                                primary: false,
                                itemCount: 3,
                                separatorBuilder: (context, index) {
                                    
                                    return Container(
                                        color: Colors.yellow,
                                        padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                                        child: const Divider(height: 1),
                                    );
                                    
                                },
                                itemBuilder: (context, index) {
                                    
                                    return Container(
                                        color: Colors.orange,
                                        child: ListTile(
                                            title: const Center(
                                                child: Text(
                                                    'labelToDisplay',
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                    ),
                                                ),
                                            ),
                                            onTap: () {
                                                
                                                //dismiss the dialog
                                                Navigator.of(context).pop();
                                                
                                                setState(() {
                                                    //update UI
                                                });
                                                
                                            }
                                        ),
                                    );
                                    
                                },
                            ),
                        ),
                        
                        IconButton(
                            icon: const Icon(
                                Icons.add,
                                size: 40,
                            ),
                            onPressed: _buttonPressed,
                        ),
                        
          ],
        ),
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
        
  }
}

pubspec

name: test
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: '>=3.1.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:

  uses-material-design: true

enter image description here enter image description here


Solution

  • Add padding to zero for ListView.Separated

        ListView.separated(
           padding: EdgeInsets.all(0),
            /*
             //rest of your code...
            */
        )