How to make a container scrollable in Flutter?

Question

I have the following page code/widget:

import 'package:flutter/material.dart';
import '../constants.dart';
import '../util/my_box.dart';
import '../util/my_tile.dart';

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

  @override
  State<DesktopScaffold> createState() => _DesktopScaffoldState();
}

class _DesktopScaffoldState extends State<DesktopScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: defaultBackgroundColor,
        appBar: myAppBar,
        body: LayoutBuilder(
      builder: (context, constraints) =>  Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // open drawer
                myDrawer,
        
                // first half of page
                Expanded(
                  flex: 2,
                  child: Column(
                    children: [
                      // first 4 boxes in grid
                      ConstrainedBox(
                        constraints: BoxConstraints(
                          maxHeight: constraints.maxHeight - 16,
                        ),
                        child: AspectRatio(
                          aspectRatio: 4,
                          child: SizedBox(
                            width: double.infinity,
                            child: GridView.builder(
                              itemCount: 4,
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 4),
                              itemBuilder: (context, index) {
                                return MyBox();
                              },
                            ),
                          ),
                        ),
                      ),
        
                      // list of previous days
                      Expanded(
                        child: ListView.builder(
                          itemCount: 7,
                          itemBuilder: (context, index) {
                            return const MyTile();
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                // second half of page
                Expanded(
                  child: Column(
                    children: [
                      // right menu 1
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: double.infinity,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.blue[400],
                            ),
                          ),
                        ),
                      ),
                      // right menu 2
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.red[200],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
  }
}

The problem is that right menu1 and right menu 2 widgets resize when I reduce the height of running app window, but what I want to have is 2 constant size containers those are scrollable, not resizable. I tried to put them inside the SingleChildScrollView widget but it didn't work.

PS: I also have a second problem when I reduce the height of running app window to zero, it shows a red page with the following error message:

boxconstraints has non-normalized height constraints

It's also a pleasure letting me know how to fix the second error as well.

Answer 1

Use Box Constraints in container like

constraints: BoxConstraints(
  minHeight: 100, 
  minWidth: 100,
  maxHeight: 400
)

Then warp the parent container widget in singleChildScrollView.