The whole screen scrolls, but you need only one widget Flutter

Question

Please tell me. I have a scrollable list with languages. But at the moment I have the whole page scrolling. How can I make it so that only the list with languages scrolls, and everything else (search bar, buttons - are fixed in one place)? I attached a screenshot below where I showed which part I need to scroll, and not the whole screen.

Padding(
        padding: const EdgeInsets.only(left: 24, right: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 178),
              const BackStepWidget(text: 'Select Language'),
              const SizedBox(height: 30),
              SizedBox(
                width: size.width,
                child: Card(
                  color: constants.Colors.greyDark,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(24)),
                  child: Column(
                    children: [
                      const SizedBox(height: 16),
                      Padding(
                        padding: const EdgeInsets.only(left: 16, right: 20),
                        child: Row(
                          children: [
                            Expanded(
                                child: TextFormField(
                              decoration: const InputDecoration(
                                  contentPadding: EdgeInsets.all(7),
                                  filled: true,
                                  fillColor: constants.Colors.greyLight,
                                  hintText: 'Search',
                                  hintStyle:
                                      TextStyle(color: constants.Colors.white),
                                  prefixIcon: Icon(
                                    Icons.search,
                                    color: constants.Colors.white,
                                  ),
                                  suffixIcon: Icon(Icons.keyboard_voice,
                                      color: constants.Colors.white),
                                  border: OutlineInputBorder(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                  )),
                            )),
                            const SizedBox(width: 14),
                            const Text('Cancel',
                                style: constants.Styles.smallBookTextStyleWhite)
                          ],
                        ),
                      ),
                      const SizedBox(height: 14),
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: MediaQuery.removePadding(
                          context: context,
                          removeTop: true,
                          child: ListView.separated(
                            physics: const NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            separatorBuilder: ((context, index) => Divider(
                                height: 2,
                                color:
                                    constants.Colors.white.withOpacity(0.2))),
                            itemCount: language.length,
                            itemBuilder: (context, index) => Padding(
                              padding:
                                  const EdgeInsets.only(top: 9, bottom: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallBoldTextStyleWhite,
                                  ),
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallerBookTextStyleWhite,
                                  ),
                                ],
                              ),
                              // ),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      );

user_3472716 · Answer

Ok, so the issue is that you have SingleChildScrollView at the top. This is the reason why everything scrolls.

Deeper in the three you have ListView.separated with physics: const NeverScrollableScrollPhysics() and shrinkWrap: true.

ListView is scrollable by itself, but that neverScroll parameter prevents in from doing it. Also shrinkwrap might not be a good thing here to, but that's a different story.

Remove physics: const NeverScrollableScrollPhysics() and get rid of SingleChildScrollView.

You might end up with content overflowing issue, but this can be fixed somewhat easily.

UPD: To solve vertical overflow: put your ListView inside Flexible.

Simple example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('widget.title'),
      ),
      body: Column(
        children: [
          Container(
            height: 50,
            width: double.infinity,
            color: Colors.green,
            child: TextFormField(initialValue: 'Search box here'),
          ),
          Flexible(
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (_, index) => ListTile(
                title: Text('$index'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

The whole screen scrolls, but you need only one widget Flutter

1 Answers