Why the scroll is not working when i wrap a scrollable widget with positioned inside a stack

Question

import 'package:trekmate_project/widgets/choice%20chips/scroll_sample.dart';

class ContainerSample extends StatelessWidget {
  const ContainerSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: 300,
              color: Colors.amber,
            ),
            Positioned(
              top: 100,
              child: SizedBox(
                child: ScrollSample(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}




//ScrollSample Screen




import 'package:flutter/material.dart';
import 'package:trekmate_project/widgets/choice%20chips/choice_chips.dart';

class ScrollSample extends StatelessWidget {
  const ScrollSample({super.key});

  @override
  Widget build(BuildContext context) {
    return const SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        height: 80,
        child: Padding(
          padding: EdgeInsets.only(
            left: 20,
            right: 10,
          ),
          child: Row(
            children: [
              ChoiceChipsWidget(buttonText: 'Kerala'),
              ChoiceChipsWidget(buttonText: 'Mumbai'),
              ChoiceChipsWidget(buttonText: 'Karnataka'),
              ChoiceChipsWidget(buttonText: 'Goa'),
              ChoiceChipsWidget(buttonText: 'Kashmir'),
              ChoiceChipsWidget(buttonText: 'Kolkata'),
              ChoiceChipsWidget(buttonText: 'Hyderbad'),
              ChoiceChipsWidget(buttonText: 'Chennai'),
            ],
          ),
        ),
      ),
    );
  }
}

I Wrap the widget with sizedbox widget but then also it is not working. How can i do it i could not find any solutions related to that.

Answer 1

it is because ScrollSample width is unconstrained, add a width constraint like below:

            Positioned(
              top: 100,
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                child: const ScrollSample()
              )
            )