How to use FractionallySizedBox in Column with Scroll?

Question

I have a simple layout in my flutter app:

Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(centerTitle: true, title: Text('test')),
  body: SingleChildScrollView(
    child: Column(
      children: [
        Expanded(
          flex: 7,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              FractionallySizedBox(
                widthFactor: 0.55,
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: TextField(),
                ),
              ),
              SizedBox(
                height: 15,
              ),
            ],
          ),
        ),
        Expanded(
            child: Column(
          children: [
            Text('some text'),
            FractionallySizedBox(
              widthFactor: 0.55,
              child: RaisedButton(
                child: Text('Hello'),
              ),
            ),
          ],
        ))
      ],
    ),
  ),
);

It works but without SingleChildScrollView. With SingleChildScrollView I have error:

RenderBox was not laid out: RenderRepaintBoundary#0b8c5 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

I need the field and the button to occupy the same width - for this I use FractionallySizedBox.

Also I need to split the screen proportionally (in height) - for this I use Expanded with Flex.

But I also need scrolling when the keyboard appears. If I use SingleChildScrollView it gives an error. Perhaps this is not the best way - I would be grateful for any advice.

I have used several options but I get this error. How can this be fixed?

user_2179571 · Answer

You can copy paste run full code below
Step 1: Use LayoutBuilder wrap SingleChildScrollView and ConstrainedBox
Step 2: RaisedButton use Expanded
You can see working demo below
code snippet

body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                maxHeight: constraints.maxHeight,
              ),
              child: Column(
              
  ...
  Expanded(
        flex: 3,
        child: RaisedButton(
          onPressed: () {
            print("hi");

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //resizeToAvoidBottomInset: true,
        appBar: AppBar(centerTitle: true, title: Text('test')),
        body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                maxHeight: constraints.maxHeight,
              ),
              child: Column(
                children: [
                  Expanded(
                    flex: 7,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        FractionallySizedBox(
                          widthFactor: 0.55,
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: TextField(),
                          ),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                      child: Column(
                    children: [
                      Text('some text'),
                      Expanded(
                        flex: 3,
                        child: RaisedButton(
                          onPressed: () {
                            print("hi");
                          },
                          child: Text('Hello'),
                        ),
                      ),
                    ],
                  ))
                ],
              ),
            ),
          );
        }));
  }
}

How to use FractionallySizedBox in Column with Scroll?

1 Answers