needed all the containers in single child scrollview of the same height of the largest container

Question

Here is my code for adding scrollview

class ScrollPage extends StatelessWidget {

  const ScrollPage({super.key});

  @override

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('ScrollPage Page'),
        ), // AppBar // AppBar

        backgroundColor: Colors.grey,
        body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          CustomScrollView(
            cardList: [
              Card(
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  width: 50,
                ),
              ),
              Card(
                child: Container(
                  color: Colors.yellow,
                  height: 50,
                  width: 50,
                ),
              ),
            ], // Car
          ),
        ]) // Column

        );
  }
}

here is the implementation of scroll view using singlechild scroll, here I need all the container should be of same height as the largest container

 @immutable
    class CustomScrollView extends StatelessWidget {
      final List<Widget> cardList;
    
      final double marginSpacer = 16;
    
      const CustomScrollView({
        super.key,
        required this.cardList,
      });
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.symmetric(horizontal: marginSpacer),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: ConstrainedBox(
              constraints: const BoxConstraints(),
              child: Row(
                children: List.generate(cardList.length, (index) {
                  return Row(
                    children: [
                      SizedBox(
                          width: MediaQuery.of(context).size.width * 0.83,
                          child: cardList.elementAt(index)),
                    ], // SizedBox
                  ); // Row
                }), // List. generate
              ), // Row
            ), // ConstrainedBox
          ), // SingleChildScrollView
        );
      }
    }

:

but I need the yellow container should be equal to the blue container i.e the biggest container in whole scrollview. even if they are of different heights

Answer 1

you can use IntrinsicHeight Widget, it changes it's height to the highest widget in a row. IntrinsicWidth also exist but for the width. wrap it around a Row or a Column.