Flutter: Short list inside SingleChildScrollView on Scaffold Body

Question

I have SingleChildScrollView with short ListView inside Scaffold. As You see on video, SingleChildScrollView do not fill whole body of Scaffold. How to fix it?

 import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return SingleChildScrollView(
        child:
            // return
            ListView(shrinkWrap: true, children: [
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      )
    ]));
  }
}

could you please add your full code with scaffold code please — eamirho3ein, Aug 31 '22 at 08:42
Because the list is short as you said. Add more items it will fill the whole screen. — HKN, Aug 31 '22 at 08:47
Does this answer your question? [how to place a listview inside a SingleChildScrollView but prevent them from scrolling separately?](https://stackoverflow.com/questions/56131101/how-to-place-a-listview-inside-a-singlechildscrollview-but-prevent-them-from-scr) — Harsh Pipaliya, Aug 31 '22 at 10:06
No. Linked question talk about ScrollView too, but case is different — sosnus, Aug 31 '22 at 10:17

score 0 · Answer 1 · answered Aug 31 '22 at 08:53

Please try this solution:

SingleChildScrollView
   Column
     Container
        ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

Make list view scroll disabled and shrinkWrap true that will help to expand list size based on content

eamirho3ein · Answer 2 · 2022-08-31T09:27:23.333

This is the default physics of SingleChildScrollView and if you want to prevent this you can change physics to ClampingScrollPhysics.and also change Listview to Column or if you want to use Listview, disable it's physics by NeverScrollableScrollPhysics().

try this:

SingleChildScrollView(
          physics: ClampingScrollPhysics(),
          child:
              // return
              Column(children: [
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            ),
            const ListTile(
              title: Text("TEST"),
              subtitle: Text("________"),
            )
          ]))

Second way is remove SingleChildScrollView and listView's shrinkWrap property and just use listView's.

score 0 · Answer 3 · answered Aug 31 '22 at 09:06

Try to remove the ScrollBar and that shrinkWrap property

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: [
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      )
    ]);
  }
}

score 0 · Answer 4 · answered Aug 31 '22 at 09:06

Each item is taking certain height in the listview and the number of item heights can fill the whole screen. So if you just want to fill the whole body then Wrap Listview in Container and give whole height of the screen:

Container(
      height: MediaQuery.of(context).size.height,
      child: ListView(....)
)

score 0 · Accepted Answer · answered Aug 31 '22 at 09:27

Correct answer as easier than I expect. I try every answer from this thread, but none work as I expect. After a lot of tries I solve this. Screen is still scrollable, but if I pull list down, items do not hide under half of screen like on question post.

Just ListView, without param shrinkWrap: true and without wrapping with SingleChildScrollView

Full code:

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// !!! Just `ListView`, without param `shrinkWrap: true` and without wrapping with `SingleChildScrollView`
   return  ListView(children: [
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      ),
      const ListTile(
        title: Text("TEST"),
        subtitle: Text("________"),
      )
    ]));
  }
}

Flutter: Short list inside SingleChildScrollView on Scaffold Body

5 Answers5