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,
);
}),
)
],
)));
}
}
CodePudding user response:
You don't needed to use VerticalCardPager
inside listView
, try this:
Expanded(
child: Container(
child: 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,
),
),
)
CodePudding user response:
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