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
Solution
Add padding to zero for ListView.Separated
ListView.separated(
padding: EdgeInsets.all(0),
/*
//rest of your code...
*/
)
- Flutter required keyword
- Is it possible to make characters in Flutter to have the same width?
- How to add a FlutterViewController to a UIViewController
- Flutter iOS build on the App Center fails with error: "Invalid Podfile file: Generated.xcconfig must exist
- flutter TimeOfDay to json
- How to format user input double in TextField as and when being entered by user in Flutter?
- How to add a border/corner radius to a LinearProgressIndicator in Flutter?
- Flutter: Many bloc providers cluttering widget tree
- Overflowing text does not wrap
- how to show list of dropdown from botton in flutter
- Flutter add AlertDialog to ElevatedButton.onPressed
- Flutter: There should be exactly one item with [DropdownButton]'s value
- Run Flutter widget test option is not visible in Android Studio
- Is it okay declare functions inside the build method?
- Getting error "No such module" using Xcode, but the framework is there
- How to debug Flutter app that starts from a killed / terminated state , eg receiving an FCM message?
- Error: google_fonts was unable to load font
- Why visual studio code does not recognize my phone?
- Android Studio after update Error: could not open `C:\Program Files\Android\Android Studio\jre\lib\jvm.cfg'
- The same repository for several BLoCs in flutter
- FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command
- creating dynamic style elevated button widget
- Presigned URL PutObject with Flutter and Golang
- Flutter.io Android License Status Unknown
- Dart List To Map<Sub, Padding> Iterable Problem
- How to Remove Elements from ListView.builder and Refresh the List in Flutter
- Is there anyway in Kotlin something like Dart's Completer behavior?
- How to solve flutter web api cors error only with dart code?
- Focus on the input in TextField widget
- Customized Bottom Navigation bar icon doesnt change color