Flutter: Short list inside SingleChildScrollView on Scaffold Body-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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(....)
)

CodePudding user response：

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

CodePudding user response：

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.