FlutterError (BoxConstraints has NaN values in minHeight and maxHeight

Question

So I'm tring to make an app to show a detail card view page when I click on the gif of the character, so i'm trying to implement the ListView.build() inside an expand that is inside a column. but it gives me this error FlutterError (BoxConstraints has NaN values in minHeight and maxHeight. The offending constraints were: BoxConstraints(w=Infinity, NaN<=h<=NaN; NOT NORMALIZED))

here it's my code:

import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
import 'models/hero_model.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Valorant Agents',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  alert(String msg) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(msg),
      action: SnackBarAction(
        label: "FECHAR",
        onPressed: () => ScaffoldMessenger.of(context).hideCurrentSnackBar(),
      ),
    ));
  }

  //ImagesController _imagesController = Get.find();
  //List for agents and respective gif for each one.
  final List<HeroModel> heros = [
    HeroModel("JETT", "images/jett_valo.gif"),
    HeroModel("KILLJOY", "images/killjoy_valo.gif"),
    HeroModel("SAGE", "images/sage_valo.gif"),
    HeroModel("SOVA", "images/sova_valo.gif"),
    HeroModel("VIPER", "images/viper_valo.gif"),
    HeroModel("RAZE", "images/raze_valo.gif"),
    HeroModel("YORU", "images/yoru_valo.gif"),
    HeroModel("BREACH", "images/breach_valo.gif"),
    HeroModel("ASTRA", "images/astra_valo.gif"),
    HeroModel("CYPHER", "images/cypher_valo.gif"),
    HeroModel("OMEN", "images/omen_valo.gif"),
    HeroModel("PHOENIX", "images/phoenix_valo.gif"),
    HeroModel("SKYE", "images/skye_valo.gif"),
  ];

  @override
  //Head Logo
  Widget build(BuildContext context) {
    //  ImagesController _imagesController = Get.find();
    return Scaffold(
        backgroundColor: Colors.black38,
        body: SafeArea(
            child: Column(
          children: [
            SizedBox(
              width: double.infinity,
              height: 70,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 5),
                child: Center(
                  child: Image.asset(
                    "images/logo.png",
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            // CardView
            Expanded(
              child: ListView.builder(
                  itemCount: heros.length,
                  itemBuilder: (context, index) {
                    return VerticalCardPager(
                      titles: [for (var hero in heros) hero.title],
                      images: [
                        for (var hero in heros)
                          Hero(
                            tag: hero.title,
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(20.0),
                              child: Image.asset(
                                hero.image,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                      ],
                      textStyle: const TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                      initialPage: 2,
                      align: ALIGN.CENTER,
                    );
                  }),
            )
          ],
        )));
  }
}

Answer 1

The issue is with the Expanded widget. You are using the Expanded widget inside the Column whose height is not fixed. You can resolve it by either wrapping column inside SizedBox and setting some height or using shrinkWrap inside ListView.builder and removing the Expanded widget.

Solution 1

       SizedBox(
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              SizedBox(
                width: double.infinity,
                height: 70,
                ...
              ),
              // CardView
              Expanded(
                child: ListView.builder(
                    itemCount: heros.length,
                    itemBuilder: (context, index) {
                      ...
                    }),
              )
            ],
          )

Solution 2:

SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                width: double.infinity,
                height: 70,
                ...
              ),
              // CardView
              ListView.builder(
                  itemCount: heros.length,
                  shrinkWrap: true, // add this
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    ...
                  })
            ],
          ),
        )

P.S:- If you want to use 2nd solution you need to restrict ListView scrolling by setting physics to NeverScrollableScrollPhysics and wrapping Column with SingleChildScrollView