body of nestedscrollview overflowed - flutter

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?

Solution 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)),
          ],
        ),
      ),
    );
  }
}

Solution 2:

Simply just use a SingleChildScrollView at the root of body:

body: SingleChildScrollView(
         child: Container(
            child: Column(
              children: <Widget>[.....

Solution 3:

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),
                              ),
                            )
                          ],
                        ),
                        ......