CODEWITHSUNDEEP
flutterflutter-web
Fahad Ammar
Fahad Ammar

Reputation: 41

How To Make The Column Scrollable In Flutter Web?

The Parent Widget Is Column, Column Contains the following children:

Wrapping this column with expanded, and then with singlechildScrollView. The result is the error!!

WHAT TO DO??

Upvotes: 2

Views: 2582

Answers (1)

Simon Sot
Simon Sot

Reputation: 3136

Wrap Column with SinglechildScrollView, for ListView.builder you need to set:

    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,

In your case widget tree will look like this (minimal reproducible sample)

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SingleChildScrollView',
      home: Scaffold(
          appBar: AppBar(
            title: Text('SingleChildScrollView Example'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Stack(
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      color: Colors.cyan,
                    ),
                  ],
                ),
                Container(
                  child: Row(
                    children: [
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.green,
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.blue,
                        ),
                      ),
                    ],
                  ),
                ),
                ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: 60,
                  itemBuilder: (context, index) => Text('Item # $index'),
                )
              ],
            ),
          )),
    );
  }
}

And it scrolls.

Upvotes: 1

Related Questions