How to make containers constant size and scrollable in both directions?

Question

I have the following simple code:

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      return Scaffold(
        appBar: AppBar(
          title: Text('D E S K T O P'),
        ),
        body: Row(
          children: [
            SingleChildScrollView(
              child: Container(
                color: Colors.green,
                height: constraints.maxHeight,
                width: constraints.maxWidth * (3 / 4),
              ),
            ),
            SingleChildScrollView(
              child: Container(
                  height: constraints.maxHeight,
                  width: constraints.maxWidth / 4,
                  color: Colors.red),
            ), //), //Text('hi'),
          ],
        ),
      );
    });
  }
}

It creates 2 simple containers. But when I resize the Chrome window, containers also resize and don't have scrollability. What I want to have is containers with constant sizes that are scrollable in both horizontal and vertical directions.

Answer 1

Provide two different controllers on them.

SingleChildScrollView(
   controller: ScrollController(),

To have horizontal scroll use another SingleChildScrollView on body

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final topController = ScrollController();
    return Scaffold(
      appBar: AppBar(
        title: Text('D E S K T O P'),
      ),
      body: Scrollbar(
        controller: topController,
        thumbVisibility: true,
        scrollbarOrientation: ScrollbarOrientation.bottom,
        child: SingleChildScrollView(
          controller: topController,
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              SingleChildScrollView(
                child: Container(
                  color: Colors.green,
                  height: 1300,
                  width: 200,
                ),
              ),
              SingleChildScrollView(
                controller: ScrollController(),
                child: Container(
                  height: 1300,
                  width: 800,
                  color: Colors.red,
                ),
              ), //), //Text('hi'),
            ],
          ),
        ),
      ),
    );
  }
}