Develop Reference

Flutter Nested ListView in FutureBuilder with CheckboxListTyle Returns Constraint Error

Hello so the problem i am having is the following code
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20),
child: Row(
children: [
const SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.routine.title!, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
SizedBox(height: 6),
Text(widget.routine.description!),
const Divider(
height: 10,
thickness: 2,
indent: 20,
endIndent: 0,
color: Colors.white,
),
FutureBuilder<List<RoutineTask>>(
future: _getRoutineTasks(widget.routine.id!),
builder: (BuildContext context, AsyncSnapshot<List<RoutineTask>> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if(snapshot.data == null) {
return Center(
child: Text("No Tasks!"),
);
} else if (snapshot.hasError) {
return Center(
child: Text("An Error has Occured: ${snapshot.error}"),
);
} else {
return ListView.separated(
reverse: false,
itemCount: snapshot.data!.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
separatorBuilder: (BuildContext context, index) => const Divider(),
itemBuilder: (BuildContext context, index) {
return Container(
height: MediaQuery.of(context).size.height * 0.45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(25)
),
child: CheckboxListTile(
value: snapshot.data![index].isComplete,
onChanged: (bool? value) {
setState(() {
snapshot.data![index].isComplete = value;
});
},
),
);
},
);
}
} else {
return Center(child: CircularProgressIndicator(),);
}
}
)
],
),
],
)),
);
is Returning the error
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1869 pos 16: 'constraints.hasBoundedWidth': is not true.
and i have no idea how to fix it, been trying every possible combination i can come up with.

Edited: This works. Try to follow this tree structure.
return Scaffold(
body: Row(
children:[
Text('ROWWWWWWWWWWW'),
Expanded(
child: Column(
children:[
Text('COLUMN'),
Expanded(
child: ListView(
children:[
Text('LISTVIEW'),
],
),
),
]
),
)
],
),
);

Flutter listview.separated inside SingldeChildScrollVİew

I am developing an app with flutter and I am getting an error about height.
I have a listview.separated and I have a SingleChildScrollView. I am getting flex error.
This is my file to align widgets inside Scaffold and SafeArea. I have a file for runApp but it is not important for the question.
class ProfilePageC extends StatelessWidget {
const ProfilePageC({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
AboutTopBarW(), // It has not listview
ImageFieldW(), // It has no listview
PercentsW(), //It has no listview
HomeArticleList2W() //It has a listview.separated
],
),
),
),
);
}
}
this is my file for listview.separated widget.
class HomeArticleList2W extends ConsumerWidget {
const HomeArticleList2W({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
final futureCatFacts = ref.watch(multiFutureArticleProvider);
return Expanded(
child: futureCatFacts.when(
loading: () => const ShimmerHomeW(),
error: (err, stack) => Text('Error: $err'),
data: (data) {
final decodedData = json.decode(data.body);
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
if (index % 3 == 0) {
return const Divider();
}
return const Divider();
},
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: decodedData.length ,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
decodedData[index]['largeImage'].toString(),
fit: BoxFit.cover,
height: 70,
width: 70,
)),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
decodedData[index]['title'],
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
Row(
children: [
const Icon(
Icons.av_timer_sharp,
size: 20,
),
Text(decodedData[index]['date']),
],
),
],
),
),
const SizedBox(
width: 5,
),
const Icon(Icons.bookmark_border),
],
),
);
},
);
},
),
);
}
}
There is no error when I erase HomeArticleList2W() from the SingleChildScrollView. Therefore I thnink the error consist of the listview.separated.
How to solve this problem.

Remove the expanded widget and add mainAxisSize min
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
decodedData[index]['title'],
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
Row(
children: [
const Icon(
Icons.av_timer_sharp,
size: 20,
),
Text(decodedData[index]['date']),
],
),
],
),

How to remove empty space below tab.. FLUTTER

This is my code implementation:
return Scaffold(
appBar: CustomAppBar(
scaffoldKey: widget.scaffoldKey,
// icon: AppIcon.settings,
// onActionPressed: onSettingIconPressed,
onSearchChanged: (text) {
setState(() {
if (text.length > 0) {
searching = true;
} else {
searching = false;
}
});
state.filterByUsername(text);
},
),
backgroundColor: Colors.white,
body:
// Column(children: [
RefreshIndicator(
backgroundColor: Colors.white,
onRefresh: () async {
HapticFeedback.selectionClick();
setState(() {
list3 = state2.getTweetList(authstate.userModel);
list3.shuffle();
onlyImages.shuffle();
});
state.getDataFromDatabase();
return Future.value(true);
},
// mesto povise greed, i ispod search boxa
child: Column(
children: <Widget>[
CarouselSlider.builder(
itemCount: images.length,
options: CarouselOptions(
// autoPlayInterval: Duration(milliseconds: 30),
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index) {
return Container(
child: Center(
child: (imageUrl != null)
? Image.network(imageUrl)
: Placeholder(
fallbackHeight: 200,
fallbackWidth: double.infinity,
),
// Center(
// child: Image.network(images[index],
// fit: BoxFit.cover, width: 1000)
),
);
},
),
SizedBox(
height: 5,
),
Expanded(
// flex: 1,
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.only(top: 0),
height: 30,
margin: EdgeInsets.only(top: 5, bottom: 5),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_tagItem('#DAJGI'),
_tagItem('#Advertisements'),
_tagItem('Animal'),
_tagItem('Travel'),
_tagItem('Happy'),
_tagItem(
'Art',
),
]))),
]),
),
searching
? ListView.separated(
addAutomaticKeepAlives: false,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) =>
_UserTile(user: list[index]),
separatorBuilder: (_, index) => Divider(
color: Colors.transparent,
height: 0,
),
itemCount: list?.length ?? 0,
)
: Expanded(
child: GridView.count(
crossAxisCount: 3,
children:
List.generate(onlyImages.length, (index) {
return GestureDetector(
onTap: () {
FeedModel model = onlyImages[index];
onTweetPressed(context, model);
},
onLongPress: () {
_createPopupContext;
FeedModel model = onlyImages[index];
onTweetPressed(context, model);
},
child: Container(
child: Card(
child: onlyImages
.elementAt(index)
.imagesPath
.length >
0
? CachedNetworkImage(
imageUrl: onlyImages
.elementAt(index)
.imagesPath[0],
fit: BoxFit.cover,
)
:
//Container()
Center(
child: Text(onlyImages
.elementAt(index)
.description),
)),
));
}),
),
),
],
)))
Result:

hi in your column you have 2 Expanded Widget so your Tags get more space;
column(
children:[
CarouselSlider
Expanded(
// flex: 1,
child: CustomScrollView // Your Tags )
Expanded(
child: GridView.count( // Your Grid)
]
)
now you can remove Expanded and CustomScrollView and SliverToBoxAdapter
and make your column like below
column(
children:[
CarouselSlider
Container( // Your Tags )
Expanded(
child: GridView.count( // Your Grid)
]
)

Flutter ListView don't scroll on a page

I'm working in a restaurant delivery app, I purchase it in Codecanyon but the support is so bad... I discover a bug in a Cart Dart and the scroll don't work... I receive the "Bottom Overflow Error"
I try all Google tutorials but don't have idea what is bad.
This is my code:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: Helper.of(context).onWillPop,
child: Scaffold(
key: _con.scaffoldKey,
bottomNavigationBar: CartBottomDetailsWidget(con: _con),
appBar: AppBar(
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: () {
if (widget.routeArgument != null) {
Navigator.of(context).pushReplacementNamed(widget.routeArgument.param, arguments: RouteArgument(id: widget.routeArgument.id));
} else {
Navigator.of(context).pushReplacementNamed('/Pages', arguments: 2);
}
},
icon: Icon(Icons.arrow_back),
color: Theme.of(context).hintColor,
),
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
title: Text(
S.of(context).cart,
style: Theme.of(context).textTheme.headline6.merge(TextStyle(letterSpacing: 1.3)),
),
),
body: RefreshIndicator(
onRefresh: _con.refreshCarts,
child: _con.carts.isEmpty
? EmptyCartWidget()
: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, right: 10),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Icon(
Icons.shopping_cart,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).shopping_cart,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline4,
),
subtitle: Text(
S.of(context).verify_your_quantity_and_click_checkout,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.caption,
),
),
),
ListView.separated(
padding: EdgeInsets.symmetric(vertical: 15),
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: true,
itemCount: _con.carts.length,
separatorBuilder: (context, index) {
return SizedBox(height: 15);
},
itemBuilder: (context, index) {
return CartItemWidget(
cart: _con.carts.elementAt(index),
heroTag: 'cart',
increment: () {
_con.incrementQuantity(_con.carts.elementAt(index));
},
decrement: () {
_con.decrementQuantity(_con.carts.elementAt(index));
},
onDismissed: () {
_con.removeFromCart(_con.carts.elementAt(index));
},
);
},
),`

Without trying this but perhaps put Expanded around the ListView
Being a direct child of a Column it does not know how big it should be.
Expanded(
child: ListView.separated(...)
)

current way to use List in flutter for scrollable with expanded or flex

my screen is not scrollable , and has limit height ( only scrollable in the limit height )
I do want to make my page on there for scrollable,
here is my current page now :
if you see in the gif above, my page is not scrollable and only stuck in the one box and scrollable inside, I do love to scroll able them for all page normally, should I use ListView here ?? but how can I make the pic and text for responsive like above ? but I do make the hight of text too close also, can I know how u tiny up the text on the list also ??
here is my code for that Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
data['title'],
softWrap: true,
),
),
body: Container(
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: Image.network('https://i.ibb.co/nrWqyMx/belgium.png'),
)
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.topLeft,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text(data['ingredients'][index], style: TextStyle(height: 1.3),),
)
);
},
itemCount: data['ingredients'].length,
),
)
)
],
),
),
);
}
link : flutter codepen

Scaffold(
appBar: AppBar(
title: Text(
'MyAppBar',
style:
TextStyle(color: Colors.cyan[100], fontWeight: FontWeight.bold),
),
),
body: ListView(
children: <Widget>[
Container(
child: Image.network
('https://i.ibb.co/nrWqyMx/belgium.png'),
),
ListView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text("data['ingredients'][index]", style: TextStyle(height: 1.3),),
)
);
},
itemCount:25,
)
],
),
);

You will need put a ScrollView as a main container of your widget. Something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
Text("Title"),
ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
style: BorderStyle.solid
)
),
);
},
)
],
),
),
)
);
}
}