Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The SingleChildScrollView is not scrollable

Tags:

flutter

This widget renders with no errors except it is not scrollable

SingleChildScrollView(
    child: Column(
      children: [
        ListView(
          shrinkWrap: true,
          children: [
            ListTile(
              title: Row(
                children: const [
                    Expanded(child: Text('text'),),
                    Expanded(child: Text('text'),),
                ],
              ),
            ),
          ],
        ),
        RapportList(), // this is not scrollable
      ],
    ),
),

Where RapportList() is a statefull widget which builds a

ListView.builder(
  shrinkWrap: true,
  itemCount: _rapports.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Row(
        children: <Widget>[
        ...

I tried to wrap the ListView.builder with SingleChildScrollView but with no result. It is still not scrollable.

like image 666
rozerro Avatar asked Dec 28 '19 10:12

rozerro


People also ask

Is ListView builder scrollable?

builder is used instead of ListView. ListView. builder creates a scrollable, linear array of widgets.

What is the difference between SingleChildScrollView and ListView?

SingleChildScrollView behaves the same as ListView, but it is best when using different Widgets with different Sizes, just in need of scrolling behavior.

How do you make a list scrollable on Flutter?

Just change Column widget to ListView widget — and that's all. Your container becomes scrollable.


1 Answers

I think you just need to add

physics: const NeverScrollableScrollPhysics(),

to your RapportList().

Here is the code I tested:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListView(
              shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  title: Row(
                    children: const <Widget>[
                      Expanded(child: Text('text'),),
                      Expanded(child: Text('text'),),
                    ],
                  ),
                ),
              ],
            ),
            ListView.builder( //<--RapportList().
              physics: const NeverScrollableScrollPhysics(), //<--here
              shrinkWrap: true,
              itemCount: 100,
              itemBuilder: (context, index){
                return ListTile(
                  title: Row(
                    children: <Widget>[
                      Text("ListTile with index ${index}")
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

In this way, RapportList() will not be scrollable and when you try to 'scroll' one of its element, you will scroll the entire SingleChildScrollView() ;)

enter image description here

like image 61
Mirko Raimo Avatar answered Oct 21 '22 13:10

Mirko Raimo