Flutter ; Vertical ListView inside a column(inside another column) causing an overflow-CodePudding

class Episodes extends StatefulWidget {
  const Episodes({super.key});

  @override
  State<Episodes> createState() => _EpisodesState();
}

class _EpisodesState extends State<Episodes> {
  final seasons = ['Season 1', 'Season 2', 'Season 3'];

  String? value;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //EdgeInsets.only(left: size.width * 0.03, right: size.width * 0.03),
    return SingleChildScrollView(
      physics: const AlwaysScrollableScrollPhysics(),
      child: Column(
        children: [
          Container(
            height: size.height * 0.045,
            width: size.width * 0.25,
            decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.25),
                borderRadius: BorderRadius.circular(5)),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: value,
                alignment: Alignment.center,
                isExpanded: true,
                //icon: Icon(Icons.arrow_drop_down_outlined,
                //  size: 12, color: Colors.white),
                iconEnabledColor: Colors.white,

                //dropdownColor: Colors.transparent,
                items: seasons.map(buildMenuItem).toList(),
                dropdownColor: Colors.grey.withOpacity(0.3),
                onChanged: (value) => setState(() {
                  this.value = value;
                }),
              ),
            ),
          ),
          SizedBox(height: size.height * 0.02),
          ListView.builder(
            shrinkWrap: true,
            //physics: const AlwaysScrollableScrollPhysics(),
            itemCount: 15,
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.only(bottom: 8),
                child: Container(
                  color: Colors.red,
                  height: 15,
                  width: 15,
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
      value: item,
      child: Center(
        child: Text(
          item,
          style: GoogleFonts.poppins(color: Colors.white, fontSize: 12),
        ),
      ));
}

Im trying to build a netflix clone, and this is the design of the episode list in the title page. Basically, im trying to include listview.builder(vertical) inside a column; but im getting an overflow error. This column is furthur getting returned as one of the children of a parent column in another file.

Till now ive tried wrapping the column under : *SingleChildScrollView, *Expanded *SizedBox, Container : with fixed height

None of the above worked; i even tried playing around with the scroll physics, didnt work, the overflow error still persisted.

Im new to flutter; i just wanna get rid of the overflow error. Any help will be appreciated! Furthur im looking to dynamically fetch details from firebase and display them here. Any tips on that will be appreciated as well!

CodePudding user response：

From what i understand you have something like this on the main page:

Column(children : [
  SomeWidget(),
  OtherWidget(),
  Episodes(),
]);

Since Episodes() is in Column, it's been given infinite height. You should wrap it in an Expanded() widget if you want it to get the remaining height of the page, like below.

Column(children : [
  SomeWidget(),
  OtherWidget(),
  Expanded(child:Episodes()),
]);

If this doesn't fix your problem, please give more informations about the parent widget (where Episodes is used).

CodePudding user response：

Because the listview is not given a fixed height,
Try nesting a layer of expanded outside the ListView

Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        //physics: const AlwaysScrollableScrollPhysics(),
        itemCount: 15,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.only(bottom: 8),
            child: Container(
              color: Colors.red,
              height: 15,
              width: 15,
            ),
          );
        },
      ),
    );