Develop Reference

FlutterError (BoxConstraints has NaN values in minHeight and maxHeight

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,
);
}),
)
],
)));
}
}

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,
),
),
)

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

Listview not getting stacked over a Container

I am trying to position a listview over container but getting error of maxbound width. Please refer my code and help me out.
import 'package:flutter/material.dart';
class TryScreen extends StatelessWidget {
const TryScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Try Screen'),
),
body: Container(
height: MediaQuery.of(context).size.height / 1.6,
child: Stack(
children: [
Container(
color: Colors.lightBlueAccent,
height: 250,
width: double.maxFinite,
),
Positioned(
top: 10,
child: Container(
height: 800,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.blue,
height: 250,
width: 250,
);
}),
),
),
],
),
),
);
}
}
I dont understand why is it throwing error and not able to resolve the error on my own. Any help would be appreciated

Try adding width to the Container like this,
...
Positioned(
top: 10,
child: Container(
width: double.infinity,
height: 800,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
...

ListView.builder throwing RedorBox error when setting scrollDirection to Axis.horizontal

I am using a ListView.builder and a Gridview.builder and need to make ListView horizontal but when I set its scrollDirection property it throws error (picture attached)
[![enter image description here][1]][1]
import 'package:flutter/material.dart';
class MenuPage extends StatefulWidget {
#override
_MenuPageState createState() => _MenuPageState();
}
class _MenuPageState extends State<MenuPage> {
List<String> litems = ["Hello", "how"];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: 18,
itemBuilder: (context, index) {
return CategoryButton(title: "title");
}),
GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 18,
itemBuilder: (context, index) {
return Text('Some text more');
})
],
),
),
);
}
}
[1]: https://i.stack.imgur.com/D2knH.png

You have used ListView.builder directly to the column widget. Column and its parent SingleChildScrollView widgets have infinity height and width. You should set width and height for the ListView.builder widget or warp inside the Expanded widget. I have resolved it by setting the height and widget. Find the codes below.
class MenuPage extends StatefulWidget {
#override
_MenuPageState createState() => _MenuPageState();
}
class _MenuPageState extends State<MenuPage> {
final List<String> litems = ["Hello", "how"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: <Widget>[_buildListView(), _buildGridView()],
),
),
);
}
GridView _buildGridView() {
return GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 18,
itemBuilder: (context, index) {
return Text('Some text more');
},
);
}
Widget _buildListView() {
final deviceWidth = MediaQuery.of(context).size.width;
return Container(
width: deviceWidth,
height: 150.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: 18,
itemBuilder: (context, index) {
return Container(
width: 100,
height: 100,
child: TextButton(
onPressed: () {},
child: Text("title"),
),
);
},
),
);
}
}

What can i use to make an app like notes app where there is unexpected number of notes

I want to make a notes apo in flutter but i dont know that widget can i use to store the notes as the number of notes are unexpected

You can use ListView.builder or GridView.builder, just specify the number of items in the itemCount field.
Example using GridView.builder:
class MyHomePage extends StatelessWidget {
final List<String> notes = ["Lorem", "Ipsum", "Dolor"];
#override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: notes.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.all(8),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(notes[index]),
),
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
);
}
}
Result:

Display Firebase collection data to a container in flutter

Can you help me with my problem? I can create data from a textfield in my flutter app and that data goes inside my firebase collection. What I want to happen now is how can I read and display that Data inside Card with a Container child in my flutter app?
What I want is that data to be OVERLAYED or ON-TOP of the image
my code for that is here:
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/Screens/discount_clicked.dart';
class DiscountCarousel extends StatelessWidget {
const DiscountCarousel({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 220.0,
child: ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (BuildContext context, int posiition) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => DiscountClicked(),
),
);
},
child: Card(
child: Column(
children: <Widget>[
Container(
height: 190.0,
width: 300.0,
child: ClipRRect(
borderRadius: new BorderRadius.circular(10.0),
child: Image.network("https://images.pexels.com/photos/2529787/pexels-photo-2529787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", fit: BoxFit.cover)),
)
],
),),
),
);
},
)
);
}
}