I want to have a modal with vertical scroll for Column widget .
this is my example code :

Future<void> deleteConfirmationDialog() async {
  var list = []; //Note: Item fetch from Getx controller 
  showDialog(
    context: Get.context!,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: getModalHeader('Confirm delete'),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        contentPadding: EdgeInsets.all(14),
        titlePadding: EdgeInsets.zero,
        children: [
          Text('You want to delete: '),
          Container(
            width: 280,
            height: 300,
            // constraints: BoxConstraints(maxHeight: 300),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey)
            ),
            child: Scrollbar(
              thumbVisibility: true,
              trackVisibility: true,
              controller: _horizontalController,
              child: SingleChildScrollView(
                physics: ScrollPhysics(),
                controller: _horizontalController,
                scrollDirection: Axis.horizontal,
                child: Scrollbar(
                  thumbVisibility: true,
                  trackVisibility: true,
                  controller: _verticalController,
                  child: SingleChildScrollView(
                    physics: ScrollPhysics(),
                    controller: _verticalController,
                    scrollDirection: Axis.vertical,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: list,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Text('Are you sure ?'),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              ElevatedButton(
                child: Text('Confirm'),
                onPressed: () {},
              ),
              SizedBox(width: 8),
              ElevatedButton(
                child: Text('Cancel'),
                onPressed: () {},
              ),
            ],
          ),
        ],
      );
    },
  );
}

my problem is vertical scroll does not align to left side of container !

How to fix this problem ?

I want to have a modal with vertical scroll for Column widget .
this is my example code :

Future<void> deleteConfirmationDialog() async {
  var list = []; //Note: Item fetch from Getx controller 
  showDialog(
    context: Get.context!,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: getModalHeader('Confirm delete'),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        contentPadding: EdgeInsets.all(14),
        titlePadding: EdgeInsets.zero,
        children: [
          Text('You want to delete: '),
          Container(
            width: 280,
            height: 300,
            // constraints: BoxConstraints(maxHeight: 300),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey)
            ),
            child: Scrollbar(
              thumbVisibility: true,
              trackVisibility: true,
              controller: _horizontalController,
              child: SingleChildScrollView(
                physics: ScrollPhysics(),
                controller: _horizontalController,
                scrollDirection: Axis.horizontal,
                child: Scrollbar(
                  thumbVisibility: true,
                  trackVisibility: true,
                  controller: _verticalController,
                  child: SingleChildScrollView(
                    physics: ScrollPhysics(),
                    controller: _verticalController,
                    scrollDirection: Axis.vertical,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: list,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Text('Are you sure ?'),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              ElevatedButton(
                child: Text('Confirm'),
                onPressed: () {},
              ),
              SizedBox(width: 8),
              ElevatedButton(
                child: Text('Cancel'),
                onPressed: () {},
              ),
            ],
          ),
        ],
      );
    },
  );
}

my problem is vertical scroll does not align to left side of container !

How to fix this problem ?

• flutter

• Can you try crossAxisAlignment: CrossAxisAlignment.stretch on column – Md. Yeasin Sheikh Commented yesterday
• @Md.YeasinSheikh , I try it and receive : BoxConstraints forces an infinite width. – mah454 Commented yesterday
• ok, gonna try after meeting( 1h) – Md. Yeasin Sheikh Commented yesterday
• @Md.YeasinSheikh: Note, my project is Flutter web . – mah454 Commented yesterday
• btw can you try bellow answer, you kinda have nested scrollView – Md. Yeasin Sheikh Commented yesterday

2 Answers 2

You have nested SingleChildScrollView widgets, one for horizontal scrolling and one for vertical scrolling. This is unnecessary and can lead to unexpected behavior. You only need one SingleChildScrollView for vertical scrolling in this case`

try This ....

void showDeleteConfirmationDialog(BuildContext context) {
List<Widget> itemsToDelete = [];

deleteConfirmationDialog(context, itemsToDelete);
}

Future<void> deleteConfirmationDialog(BuildContext context, List<Widget> 
  items) async {
       // Create a controller for the vertical scrollbar
final ScrollController _verticalController = ScrollController();

showDialog(
context: context,
builder: (BuildContext context) {
  return SimpleDialog(
    title: Text('Confirm delete'), 
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
    contentPadding: EdgeInsets.all(14),
    titlePadding: EdgeInsets.zero,
    children: [
      Text('You want to delete: '),
      Container(
        width: 280,
        height: 300,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
        ),
        child: Scrollbar(
          thumbVisibility: true,
          trackVisibility: true,
          controller: _verticalController,
          child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(), // Ensure scrolling 
  is always possible
            controller: _verticalController,
            scrollDirection: Axis.vertical, // Explicitly set vertical 
                 scrolling
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: items, // Use the passed list of widgets
            ),
          ),
        ),
      ),
      Text('Are you sure ?'),
      SizedBox(height: 8),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          ElevatedButton(
            child: Text('Confirm'),
            onPressed: () {
              // Handle confirmation logic here
              Navigator.of(context).pop(); // Close the dialog
            },
          ),
          SizedBox(width: 8),
          ElevatedButton(
            child: Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop(); // Close the dialog
            },
          ),
        ],
      ),
    ],
  );
  },
 );
}

Finally i found solution :

Future<void> deleteConfirmationDialog() async {
  var list = [];
  showDialog(
    context: Get.context!,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: getModalHeader('Confirm delete'),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        contentPadding: EdgeInsets.all(14),
        titlePadding: EdgeInsets.zero,
        children: [
          Text('You want to delete: '),
          ConstrainedBox(
            constraints: BoxConstraints(maxHeight: 300),
            child: Scrollbar(
              controller: _verticalController,
              thumbVisibility: true,
              trackVisibility: true,
              child: SingleChildScrollView(
                controller: _verticalController,
                scrollDirection: Axis.vertical,
                physics: AlwaysScrollableScrollPhysics(),
                child: ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 280),
                  child: Scrollbar(
                    controller: _horizontalController,
                    thumbVisibility: true,
                    trackVisibility: true,
                    child: SingleChildScrollView(
                      controller: _horizontalController,
                      scrollDirection: Axis.horizontal,
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: list,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Text('Are you sure ?'),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              ElevatedButton(
                child: Text('Confirm'),
                onPressed: () {},
              ),
              SizedBox(width: 8),
              ElevatedButton(
                child: Text('Cancel'),
                onPressed: () {},
              ),
            ],
          ),
        ],
      );
    },
  );
}