How to increase the size of SingleChildScrollView in flutter?
I am making an app in which one of the pages is scrollable. I used a SingleChildScrollView to scroll over the page. I need to add more stuff to it and when I do, it gives an error because of the limited height.
Can anyone help me in expanding the size of SingleChildScrollView so that I can complete my app?
This is the whole code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xdflutter/Component61.dart';
import './Component31.dart';
import './Component22.dart';
import './Component21.dart';
import './start.dart';
import 'package:adobe_xd/page_link.dart';
import 'package:flutter_svg/flutter_svg.dart';
class tester extends StatelessWidget {
tester({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
// ignore: unnecessary_statements
(context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
Transform.translate(
offset: Offset(0.0, 290.0),
child:
// Adobe XD layer: 'right' (shape)
Container(
width: 315.0,
height: 287.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/right.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -275.0),
child: SizedBox(
width: 434.0,
child: Text(
'What you should know \nbefore you begin? ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 36,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, -260.0),
child: SizedBox(
width: 348.0,
height: 108.0,
child: Component31(),
),
),
Transform.translate(
offset: Offset(-0.5, -376.5),
child: SvgPicture.string(
_svg_kr65u6,
allowDrawingOutsideViewBox: true,
),
),
Transform.translate(
offset: Offset(0.0, -370.0),
child: SizedBox(
width: 166.0,
child: Text(
'R:Right',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 15.0),
child:
// Adobe XD layer: 'left' (shape)
Container(
width: 307.0,
height: 278.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/left.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -320.0),
child: SizedBox(
width: 130.0,
child: Text(
'L:Left',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 50.0),
child:
// Adobe XD layer: 'face' (shape)
Container(
width: 312.0,
height: 289.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(54.0),
image: DecorationImage(
image: const AssetImage('assets/images/face.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -300.0),
child: SizedBox(
width: 142.0,
child: Text(
'F:Face',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 90.0),
child: Container(
width: 314.0,
height: 298.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/back.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -270.0),
child: SizedBox(
width: 173.0,
child: Text(
'B: Back ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 130.0),
child: Container(
width: 314.0,
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/upper.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -230.0),
child: SizedBox(
width: 192.0,
child: Text(
'U: Upper',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 165.0),
child: Container(
width: 310.0,
height: 296.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/down.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -190.0),
child: SizedBox(
width: 187.0,
child: Text(
'D: Down',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 145.0),
child: SizedBox(
width: 329.0,
child: Text(
'R2: Right twice',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 160.0),
child: Container(
width: 312.0,
height: 294.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/r2.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.5, 170.0),
child: SizedBox(
width: 442.0,
height: 0.0,
child: Component22(),
),
),
Transform.translate(
offset: Offset(0.0, 185.0),
child: SizedBox(
width: 408.0,
child: Text(
'Counter-clockwise \nrotations',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.5, 380.0),
child: SizedBox(
width: 442.0,
height: 0.0,
child: Component22(),
),
),
Transform.translate(
offset: Offset(0.0, 200.0),
child: SizedBox(
width: 500.0,
height: 200.0,
child: Component61(),
),
),
Transform.translate(
offset: Offset(0.5, 260.0),
child: SizedBox(
width: 442.0,
height: 0.0,
child: Component22(),
// THIS IS IF I NEED TO ADD LINE BELOW SLICE TURNS
),
),
Transform.translate(
offset: Offset(0.0, 190.0),
child: SizedBox(
width: 238.0,
child: Text(
'Slice turns ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(0.0, 280.0),
child: Container(
width: 312.0,
height: 303.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/m_anti.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, -80.0),
child: SizedBox(
width: 226.0,
child: Text(
'M: Middle ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
// Expanded(
// child: (SingleChildScrollView(
// child: Column(
// children: <Widget>[
Transform.translate(
offset: Offset(0.0, 100.0),
child: Container(
width: 304.0,
height: 297.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/m.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(0.0, 250.0),
child: Container(
width: 304.0,
height: 297.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: const AssetImage('assets/images/m.png'),
fit: BoxFit.fill,
),
),
),
),
Transform.translate(
offset: Offset(18.8, 3751.0),
child: SizedBox(
width: 338.0,
child: Text(
'M\': Middle anti-\nclockwise ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 42,
color: const Color(0xff000000),
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
),
textAlign: TextAlign.center,
),
),
),
Transform.translate(
offset: Offset(-33.5, 4618.5),
child: SizedBox(
width: 442.0,
height: 0.0,
child: Component22(),
),
),
Transform.translate(
offset: Offset(35.5, 100.5),
child: SizedBox(
width: 305.0,
height: 0.0,
child: Component22(),
),
),
Transform.translate(
offset: Offset(35.5, 100.5),
child: SizedBox(
width: 305.0,
height: 0.0,
child: Component22(),
),
),
Transform.translate(
offset: Offset(51.0, 100.0),
child: SizedBox(
width: 273.0,
height: 56.0,
child: Component21(),
),
),
Transform.translate(
offset: Offset(91.0, 100.0),
child: PageLink(
links: [
PageLinkInfo(
transition: LinkTransition.Fade,
ease: Curves.easeOut,
duration: 0.3,
pageBuilder: () => start(),
),
],
child: SizedBox(
width: 193.0,
height: 43.0,
child: Text(
'Begin learning! ',
style: TextStyle(
fontFamily: 'Corbel',
fontSize: 28,
color: const Color(0xffffffff),
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.right,
),
),
),
),
],
),
),
),
);
};
}
}
const String _svg_kr65u6 =
'<svg viewBox="-33.5 113.5 442.0 121.0" ><path transform="translate(-33.5, 113.5)" d="M 442 0 L 0 0" fill="none" stroke="#707070" stroke-width="3" stroke-miterlimit="4" stroke-linecap="butt" /><path transform="translate(-33.5, 234.5)" d="M 442 0 L 0 0" fill="none" stroke="#707070" stroke-width="3" stroke-miterlimit="4" stroke-linecap="butt" /></svg>';
Thanks in advance!
programmer 3 Answers
You can use the below code.
Container(
height: MediaQuery.of(context).size.height * .5,
child: SingleChildScrollView(
//Your Codes go here
),
)
Here MediaQuery.of(context).size.height is your total screen's height and MediaQuery.of(context).size.height * .5 means the half of your screen. so scrolling will be happens between the half of your screen.
answered on Stack Overflow Sep 13, 2020 by 
Salim Murshed
I didn't understand exactly but you can use column in singleChildScrollView without limited height.like this example you can add widgets:
`
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Text('hello'),
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Container(
height: 100,
color: Colors.yellow,
),
Container(
height: 100,
color: Colors.orange,
),
Column(
children: <Widget>[
Text('hello'),
Text('hello'),
],
)
],
),
),
`
answered on Stack Overflow Sep 13, 2020 by 
Ali Mohammadzadeh • edited Sep 13, 2020 by Ali Mohammadzadeh
Ali Mohammadzadeh • edited Sep 13, 2020 by Ali MohammadzadehMake changes according to this
class tester extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(height: 100,
color: Colors.green,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.yellow,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.orange,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.pink,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.black,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.red,),
SizedBox(height: 20,),
Container(height: 100, color: Colors.yellow,),
],
),
),
),
);
}
}
answered on Stack Overflow Sep 14, 2020 by 
Mr vd
Mr vdUser contributions licensed under CC BY-SA 3.0