I am trying to create BottomSheet based on content size but does not working. In Sheet i have used following widgets Container->Column->ListView Builder.

I tried following options but still not working as excepted.

isScrollControlled: true, 

ListView Property : shrinkWrap: true, and checked With Wrap widget also not working.

Wrap widget without listview is Working.

Please find the code :

class BottomStringlistController {
  var selectedValue = "";
  void showSheet(BuildContext context, List<String> values, String currentTitle, {required Function(String value) onCompletion}){
    var bottomSheet = showModalBottomSheet<void>(
      // isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return
          Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius:  BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          child:
          Padding(
            padding: const EdgeInsets.all(15.0),
            child:
            SingleChildScrollView(
              child:  Expanded(
                child:  Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          currentTitle.toUpperCase(),
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: getProportionateScreenWidth(14),
                            fontWeight: FontWeight.bold,
                            color: kPrimaryColor,
                          ),
                        ),
                        const Spacer(),
                        IconButton(onPressed:(){
                          Navigator.pop(context);
                        },
                          icon: const Icon(Icons.close,color: kPrimaryColor,),
                        ),
                      ],
                    ),
                    const Divider(color: kPrimaryColor,),
                    SizedBox(height: getProportionateScreenWidth(15),),
                    ListView.builder(
                      shrinkWrap: true,
                      itemCount: values.length,
                      itemBuilder: (context, index){
                        return GestureDetector(
                          onTap: (){
                            selectedValue = values[index];
                            Navigator.pop(context);
                          },
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(values[index].toUpperCase(),
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                    fontSize: getProportionateScreenWidth(12),
                                    fontWeight: FontWeight.normal,
                                    color: Colors.black
                                ),
                              ),
                              const SizedBox(height: 10),
                            ],
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    ).whenComplete(() {
      onCompletion(selectedValue);
    });
  }
}

SS Attached :

I am learning flutter and noob at it.

CodePudding user response：

Wrap your Column with SingleChildScrollView

class BottomStringlistController {
  var selectedValue = "";

  void showSheet(BuildContext context, List<String> values, String currentTitle,
      {Function(String value) onCompletion}) {
     showModalBottomSheet<void>(
      //isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        currentTitle.toUpperCase(),
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const Spacer(),
                      IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: const Icon(Icons.close),
                      ),
                    ],
                  ),
                  ListView.builder(
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: values.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          selectedValue = values[index];
                          Navigator.pop(context);
                        },
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              values[index].toUpperCase(),
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontWeight: FontWeight.normal,
                                  color: Colors.black),
                            ),
                            const SizedBox(height: 10),
                          ],
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      },
    ).whenComplete(() {
      onCompletion(selectedValue);
    });
  }
}

CodePudding user response：

This example will help you to build showModalBottomSheet according to items size, Wrap with Listview.seprated

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
@override   Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );   } }

class MyHomePage extends StatefulWidget {   
 const MyHomePage({Key key}) : super(key: key);

  @override   _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> {   
List<String> l = ["Monday", "Tuesday", "Wednesday", "Thursday"];   
@override   Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
         showModalBottomSheet(
          context: context,
          isScrollControlled: false,
          backgroundColor: Colors.transparent,
          builder: (context) {
            return Container(
              child: DraggableScrollableSheet(
                builder: (_, controller) {
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(25.0),
                        topRight: const Radius.circular(25.0),
                      ),
                    ),
                    child: ListView.builder(
                      controller: controller,
                      itemCount: l.length,
                      itemBuilder: (_, index) {
                        return ListTile(
                          title: Text(l[index]),
                        );
                      },
                    ),
                  );
                },
              ),
            );
          },
        );
        },
      ),
    );   } }