How to increase the size of the SingleScrollChildView 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? When I run the code, I see a blank screen on the phone emulator. I think its because I exceeded the page size and I am confused as to how to increase the SingleScrollChildView size in Flutter.
This is the whole code:
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 iPhoneXXS11Pro2 extends StatelessWidget {
iPhoneXXS11Pro2({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: SingleChildScrollView(
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,
),
),
),
new 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!
asked on Stack Overflow Sep 13, 2020 by 
programmer
programmer 1 Answer
You can do this by the below way.
Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: //Here your code will be here,
),
)
If you need another scroll view, ad a column as a child of scroll view, and then set again that code inside it for another scroll view.
answered on Stack Overflow Sep 13, 2020 by 
Salim Murshed
User contributions licensed under CC BY-SA 3.0