I want to built a split screen for larger devices. One half should be as small as possible but as large as needed and the other half should occupy the rest of the screen.

I figured I'd use a Row containing two Scaffolds (one wrapped in a Expanded widget) like so:

Row(children: [
  Scaffold(appBar: MyAppBar1(), body: Container()),
  Expanded(child: Scaffold(appBar: MyAppBar2(), body: Container())),
])

However, I get the following error message when wrapping a Scaffold inside a Row:

RenderCustomMultiChildLayoutBox object was given an infinite size during layout.

I know that I could just wrap the Scaffold inside a SizedBox with a fixed width, but I want the Scaffold to automatically take the right size.

CodePudding user response：

You do not need to use two Scaffolds. Use two columns inside one Column in Scaffold. Wrap the second Column with Expanded. This way your first part will take as much space as needed and the second part will take the remaining space.

home: Scaffold(
      body: Column(
        children: [
          Column(
            children: [],
          ),
          Expanded(
            child: Column(
              children: [],
            ),
          ),
        ],
      ),
    )

CodePudding user response：

Scaffold itself doesn't have a width constraint, so it will try to occupy as much space as possible (if I'm remembering correctly), and Row on its part won't try to constrain it, hence the error.

You have two options:

• wrap the Scaffold in another Expanded, then use the flex argument on both the Expanded to give them size relative to each other (i.e., if one has flex: 1 and the other flex: 2, the second one will have twice the size of the first)
• wrap the Scaffold in a ConstrainedBox and set the constraints yourself, which I guess in this case would be the maxWidth set on the smaller side

As others pointed out, anyway, if you don't really need another Scaffold, you can simply use two Column and get a similar result.