How to use FractionallySizedBox in Column with Scroll? - flutter

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?

Answer 1

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<MyHomePage> {
#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'),
),
),
],
))
],
),
),
);
}));
}
}