I have a card I am displaying with some info. I want to wrap it in a SingleChildScrollView as I have more items to add to the card, but when I do the screen just blanks out? I have tried putting it as root (Scaffold body) and before the Card but it won't work?
return Scaffold(
backgroundColor: globals.pageBackgroundColor,
appBar: AppBar(
title: Text('Company name'),
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context, true);
})),
body: Padding(
padding: EdgeInsets.all(10),
child: Card(
child: Container(
decoration:
BoxDecoration(color: globals.widgetBackgroundColor),
child: Column(
children: <Widget>[
Container(
height: 120,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white),
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Container(
alignment: Alignment.centerLeft,
width: 100,
height: 100,
child: Image.network("https://via.placeholder.com/200"))),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text('Company name',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold)),
Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
],
)),
)
],
)),
Padding(
padding: EdgeInsets.only(left: 20, top: 20, right: 20),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
style: TextStyle(color: Colors.white)),
Padding(padding: EdgeInsets.only(top: 25)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(
Icons.thumb_up,
color: Colors.white,
),
Padding(
padding: EdgeInsets.only(right: 20)),
Text('Lorem ipsum lorem',
style: TextStyle(
color: globals.cardSubTitleColor,
fontWeight: FontWeight.bold,
fontSize: 18))
],
)
]),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
Expanded(
child: GridView.count(
padding: EdgeInsets.all(5),
scrollDirection: Axis.horizontal,
crossAxisCount: 1,
children: List.generate(10, (index) {
return Image.network(
"https://via.placeholder.com/200",
);
})))
])))));
}
Any takers? I can't seem to figure this one out;
So I managed to figure this one out.
The SingleChildScrollView
needs to sit inside your Padding which is the parent widget for your body.
Your Card
needs to be the child of the SingleChildScrollView
.
This code should work for you.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Company name'),
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context, true);
}
)
),
body: Padding(
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
child: Card(
child: Container(
decoration:
BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Container(
height: 120,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white),
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Container(
alignment: Alignment.centerLeft,
width: 100,
height: 100,
child: Image.network("https://via.placeholder.com/200"))),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text('Company name',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold)),
Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
],
)),
)
],
)),
Padding(
padding: EdgeInsets.only(left: 20, top: 20, right: 20),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
style: TextStyle(color: Colors.blue)),
Padding(padding: EdgeInsets.only(top: 25)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(
Icons.thumb_up,
color: Colors.white,
),
Padding(
padding: EdgeInsets.only(right: 20)),
Text('Lorem ipsum lorem',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 18))
],
)
]
),
),
),
]
)
)
)
)
)
)
);
}
}
PS I changed some colours just to see the UI displaying on the screen.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With