Question 79070 in Flutter Question posted in
The official Flutter documentation can be found here.

Why can't I scroll my SingleChildScrollView widget? – Flutter

Here is my code:

class MasterPage extends StatefulWidget {

  static String id = 'master_page';

  const MasterPage({Key? key}) : super(key: key);

  @override
  State<MasterPage> createState() => _MasterPageState();
}

class _MasterPageState extends State<MasterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFffaa5b),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              child: Padding(
                padding: const EdgeInsets.only(left: 30, top: 35),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    SizedBox(
                      height: 35,
                    ),
                    Text(
                      'Master Menu',
                      style: TextStyle(
                        fontSize: 40,
                        fontFamily: 'Comfortaa',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      height: 50,
                    ),
                  ],
                ),
              ),
            ),

            //features container

            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(40),
                    topRight: Radius.circular(40),
                  ),
                  color: Colors.grey[100],
                ),
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Column(
                    children: const [
                      FeatureCard(),
                      FeatureCard(),
                      FeatureCard(),
                      FeatureCard(),
                      FeatureCard(),
                      FeatureCard(),
                      FeatureCard(),
                      SizedBox(
                        height: 30,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And here is my FeatureCard widget code:


class FeatureCard extends StatefulWidget {
  const FeatureCard({
    Key? key,
  }) : super(key: key);

  @override
  State<FeatureCard> createState() => _FeatureCardState();
}

class _FeatureCardState extends State<FeatureCard> {
  final List<Map<String, dynamic>> masterMap = [
    {
      'image': 'assets/images/raw.png',
      'title': 'Input Raw',
      'destination': InputRaw.id
    },
    {
      'image': 'assets/images/supplier.png',
      'title': 'Input Supplier',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/cmt.png',
      'title': 'Input CMT',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/pola.png',
      'title': 'Input Pola',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/outlet.png',
      'title': 'Input Outlet',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/product.png',
      'title': 'Input Produk',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/material.png',
      'title': 'Input Jenis Material',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/warna.png',
      'title': 'Input Warna',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/qr.png',
      'title': 'Input by QR',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/acc.png',
      'title': 'Accessories',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/tools.png',
      'title': 'Tools & Equipment',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/adjustment.png',
      'title': 'Adjustments',
      'destination': InputRaw()
    },
    {
      'image': 'assets/images/stock.png',
      'title': 'Stock Opname',
      'destination': InputRaw()
    },
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: masterMap.length,
      itemBuilder: (BuildContext context, index) {
        return GestureDetector(
          onTap: () {
            Navigator.pushNamed(
                context, masterMap.elementAt(index)['destination']);
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 25),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.white,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Container(
                    height: 105,
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Image.asset(
                      '${masterMap.elementAt(index)['image']}',
                    ),
                  ),
                  Text(
                    '${masterMap.elementAt(index)['title']}',
                    style: const TextStyle(
                      fontFamily: 'Quicksand',
                      fontSize: 20,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

The SingleChildScrollView is not scrolling at all.

I tried to add the scrollDirection property to the SingleChildScrollView widget, but it doesn’t seem to do anything.

What am I doing wrong that is keeping the SingleChildScrollView from scrolling properly?

Tags:

2

Answers


  1. 0

    Your SingleChildScrollView contains GridView, both of which are scrolling widgets. So you have to make the latter unscrollable, thus add NeverScrollableScrollPhysics() to physics parameter:

    GridView.builder(
  physics: const NeverScrollableScrollPhysics(),
  ...
),
    Login or Signup to reply.
  2. 0

    If you have nested lists always try to use Flexible/Expanded widget for nested scrollable lists in Column or Row widget respectively.

       SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                children: const [
                  Flexible(
                   child: FeatureCard()
                  ),
                  Flexible(
                   child: FeatureCard()
                  ),
                  Flexible(
                   child: FeatureCard()
                  ),
                  ...
                  SizedBox(
                    height: 30,
                  ),
                ],
              ),

    And also you can optimize your code further with many techniques.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search