Search code examples
flutterflutter-layout

Flutter: Short list inside SingleChildScrollView on Scaffold Body


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? enter image description here

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

Solution

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