How to make a screen scrollable in Flutter? - flutter

Question

In my Flutter project, in one page I have some rows including card align vertically. Now, I want this screen to make scroll-able.
I have tried replacing the column to Listview but it didn't work. I also tried to wrap it with SingleChildScrollview but didn't work. It shows like below image-
Here's the code -
HomeFragment.dart
class HomeFragment extends StatefulWidget {
#override
_HomeFragmentState createState() => new _HomeFragmentState();
}
String jwt;
class _HomeFragmentState extends State<HomeFragment> {
List<LastEngagement> _lastEngagements = List<LastEngagement>();
#override
void initState() {
super.initState();
_getLastEngagement;
_getLastEngagement2();
}
void _getLastEngagement() {
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
setState(() => {
_lastEngagements = newsArticles
})
});
}
void _getLastEngagement2() {
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
setState(() => {
_lastEngagements = newsArticles
})
});
}
Card showCard(int index) {
return new Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/1.jpg"
),
),
SizedBox(
width: 10.0,
),
Expanded(child: Text(_lastEngagements[index].title)),
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body:Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: SizedBox(
height: 100.0,
child: new ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _lastEngagements.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
width: 200.0,
child: showCard(index),
);
},
),
),
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
)
],
)
);
}
}
Replacing the Column by Listview causes following error-
So, I need a permanent solution to make my screen scroll-able, doesn't matter whatever widgets I use.

Answer 1

You can use SingleChildScrollView or change the column widget to ListView
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
],
),
));
}
Or
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: ListView(
children: <Widget>[],
));
}

Answer 2

Well the previous answers do contain the solution .. at least that's what I think .. but they are buggy answers and that's why it's not working .. try this
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("News"),
),
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(),
)
],
),
);
}
The expanded gives SingleChildScrollView() full height of the screen allowing it to work :)
I think it should work . Good luck

Answer 3

SingleChildScrollView(
scrollDirection: Axis.vertical,)
Try this instead.

Answer 4

Try below code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: Column(
children: <Widget>[
Expanded
(
child: SingleChildScrollView()
),
flex: 1,
]
)
);
}