body of nestedscrollview overflowed - flutter

Question

Screenshoot App

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?

score 7 · Answer 1 · edited Nov 30 '20 at 05:05

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

any idea on this ? https://stackoverflow.com/questions/69795503/flutter-nested-list-scroll-parent-when-reach-to-end-start-of-inner-list — Jamshed Alam, Nov 02 '21 at 10:46

score 0 · Answer 2 · edited Feb 20 '20 at 10:32

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

I've tried your code but the result i got is just a blank screen — Renmark, Feb 21 '20 at 01:54

score 0 · Answer 3 · answered Oct 13 '20 at 09:30

0

Simply just use a SingleChildScrollView at the root of body:

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

answered Oct 13 '20 at 09:30

Ali Izadyar

140
1
2
13

This worked for me, but isn't a NestedScrollView's body supposed to be some kind of list/colum by itself? I mean it's supposed to be scrolled anyway, so I thought a body:(Column (mainAxisSize: min)) should not overflow. :/ – Shamshun Jul 13 '21 at 18:45

body of nestedscrollview overflowed - flutter

3 Answers3

Linked