I have not understood how to avoid a bottom overflow of a column in a modal bottom sheet.
I don’t want a scrollable behaviour, I just would like the column to be the right height of its 4 children, if I use SingleChildScrollView with NeverScrollableScrollPhysics(), the last attribution card widget at the bottom gets cut, without a pixel overflow.
If I wrap the Column with an Expanded, I got a bottom overflow anyways.
This widget works fine in a lot of smartphones, but not with the small iPhone SE.
This is my code, I have edited so it is runnable easily without external dependencies:
import 'package:flutter/material.dart';
// classic flutter app example
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Center(
child: AttributionButton(),
));
}
}
// define each element of the bottom sheet = a card
class AttributionCard extends StatelessWidget {
final String cardName;
const AttributionCard({super.key, required this.cardName, required});
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
height: 80,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black, width: 1.0)),
child: InkWell(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
child: Text(cardName, style: const TextStyle(fontSize: 20)),
)),
),
);
}
}
// define the bottom sheet widget
class AttributionButton extends StatelessWidget {
const AttributionButton({super.key});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
backgroundColor: Colors.transparent,
mini: true,
elevation: 0,
highlightElevation: 0,
heroTag: 'f10',
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.only(bottom: 12),
child: Column( //here overflows
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 12 / 2),
child: const Text('Attributions',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black))),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.grey.withOpacity(0.23),
shape: const CircleBorder()),
onPressed: () {
Navigator.of(context).pop();
},
child: const Icon(
Icons.clear_sharp,
color: Colors.black,
)),
]),
const AttributionCard(
cardName: 'FlutterMap',
),
const AttributionCard(
cardName: '© OpenStreetMap',
),
const AttributionCard(
cardName: '© MapTiler',
),
const AttributionCard(
cardName: '© StadiaMaps',
),
],
),
);
},
);
},
child: const Icon(
Icons.info_outline_rounded,
color: Colors.black,
),
);
}
}
2
Answers
I have solved this by just adding this parameter to showModalBottomSheet:
try using
Expanded
with aColumn
andListView