skip to Main Content

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


  1. Chosen as BEST ANSWER

    I have solved this by just adding this parameter to showModalBottomSheet:

    onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
    

  2. try using Expanded with a Column and ListView

    showModalBottomSheet(
     context: context,
     builder: (BuildContext context) {
      return Container(
        // Add decoration or other styling here
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Header'),
            Expanded(
              child: ListView(
                shrinkWrap: true,
                children: [
                  // Add your list items here
                ],
              ),
            ),
          ],
        ),
      );
     },
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search