body of nestedscrollview overflowed - flutter - flutter

Question

I made a page with NestedScrollView, the body of NestedScrollView is a container that holds data from previous requests. but the body of the NestedScrollView is overflowed. The following code:
NestedScrollView(
controller: _scrollViewController,
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: new Text(
nama,
style: TextStyle(color: putih),
),
iconTheme: IconThemeData(color: putih),
backgroundColor: colorPrimaryDark,
)
];
},
body: Container(
child: Column(
children: <Widget>[
Container(
color: goldtua,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
string.harga,
style: TextStyle(color: putih, fontSize: 24.0),
),
Text(
formatingRupiah(harga),
style: TextStyle(color: putih, fontSize: 24.0),
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
string.fasilitas,
style: TextStyle(fontSize: 18.0),
),
Expanded(
child: Text(
fasilitas, //this is the result of the request, the text is multiline so it takes up less space
style: TextStyle(fontSize: 18.0),
),
)
],
),
......
Please, can someone tell me where do I do it wrong?

Answer 1

If you want or need to keep using the NestedScrollView, you can use ListView instead Column to ListView, just like this:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
HomePage() : super();
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('My large title'),
)
];
},
body: ListView( // This is the right way
children: [
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
],
),
),
);
}
}
You will see a screen like this.
Notice, that if you change only the ListView to column, you will get this result:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
HomePage() : super();
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('My large title'),
)
];
},
body: Column( // I changed here from ListView and Column and I will get an overflow error
children: [
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
Text("List item", style: TextStyle(fontSize: 96)),
],
),
),
);
}
}

Answer 2

You're getting this error because the size of your content is bigger than the size of the container. That means the Container size is smaller than the size of Column. In order to solve this issue, you should wrap Container with a Scrollable Widget like SingleChildScrollView which will scroll overflowing content and match parents size or available space. You don't need to use Expanded since each item of Column will fill only needed space
body:
SingleChildScrolView(
child: Column(
children: <Widget>[
Container(
color: goldtua,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
string.harga,
style: TextStyle(color: putih, fontSize: 24.0),
),
Text(
formatingRupiah(harga),
style: TextStyle(color: putih, fontSize: 24.0),
),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
string.fasilitas,
style: TextStyle(fontSize: 18.0),
),
Expanded(
child: Text(
fasilitas, //this is the result of the request, the text is multiline so it takes up less space
style: TextStyle(fontSize: 18.0),
),
)
],
),
......

Answer 3

Simply just use a SingleChildScrollView at the root of body:
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[.....