I'm trying to do a homepage where it will scrollable with 3 or 4 titles and a horizontal lists for products once i put the ListView.builder i get this error: Incorrect use of ParentDataWidget.
Can someone gives me the best solution of what I'm trying to do.
i already tried Expanded and Flexible for the ListView.builder nothing worked.
if i removed the Expanded the error will be: Horizontal viewport was given unbounded height.
My snippet code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? ListView(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
)
: Center(
child: CircularProgressIndicator(),
),
);
}
Widget _buildCategoryThumbnail(Collection category, int index) {
return InkWell(
onTap: () {
_navigateToCollectionDetailScreen(
thisTwoCategories[index].id, thisTwoCategories[index].title);
},
child: Container(
alignment: Alignment.topCenter,
width: MediaQuery.of(context).size.width / 2.1,
height: displayHeight(context) * .10,
decoration: category.image.originalSource != null
? BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
category.image.originalSource,
)))
: BoxDecoration(),
child: Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.bottomCenter,
child: Text(
category.title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
);
}
i solved the issue Thanks guys!
SingleChildScrollView(
child: Container(
child: Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
ListView must be a child of Expanded and Expanded has to be a child of Column.
Try below code
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? Container(child:Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
))
: Center(
child: CircularProgressIndicator(),
),
);
You cannot use Expanded as ListView's child. If you use something like below code, it'll be work. You need to give height or/and width when you use ListView.
Container(
width: something,
child: aWidget,
)
ListView should not be used inside Expanded or Flexible. Only row, column or flex is allowed.
A Container of fixed width/height or ConstrainedBox can be used
Ex:
ConstrainedBox(
constraints: BoxConstraints(minHeight: 50, maxHeight: 500),
child: ListView.builder(...),
)
To solve this problem you have to remove Expanded widget or Flex widget.
Related
What I want to do,
first list view scroll horizontally and the second one and full-screen scroll vertically.
(When the user scrolls vertically, the first listview will be hidden)
Like Facebook feed screens
the first list looks like a story row,
the second list looks like posts.
This picture shows what I want to do simply
I tried,
my code here :
Stack(
children: [
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 100.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
),
Text(
'Demo Headline 2',
style: TextStyle(fontSize: 18),
),
ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(bottom: 80, right: 10),
child: FloatingActionButton(
elevation: 100,
onPressed: () {
Navigator.pushNamed(context, '/add');
},
child: const Icon(
Icons.add,
size: 32,
color: Colors.amber,
),
backgroundColor: Colors.black,
),
),
),
],
);
My code shows this error
Exception caught by rendering library
RenderBox was not laid out: RenderRepaintBoundary#90e8f relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 2001 pos 12: 'hasSize'
Try below code and shrinkWrap: true, in 2nd Listview
Listview Widget:
Expanded(child:
ListView.builder(
shrinkWrap: true,//add this line
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
),
Full Code:
Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 100.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) => Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(12),
height: 150,
width: 150,
color: Colors.pink,
),
),
),
Text(
'Demo Headline 2',
style: TextStyle(fontSize: 18),
),
Expanded(
child: ListView.builder(
itemCount: 10,
shrinkWrap: true,
itemBuilder: (context, index) => Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(12),
height: 150,
width: 150,
color: Colors.amber,
),
),
),
],
),
floatingActionButton: FloatingActionButton(
elevation: 100,
onPressed: () {
Navigator.pushNamed(context, '/add');
},
child: const Icon(
Icons.add,
size: 32,
color: Colors.amber,
),
backgroundColor: Colors.black,
),
);
Result->
Tell me how to add widgets to the top and bottom of this list using GridView.builder?
I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?
Widget build(BuildContext context)
{
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(...);
}
),
Padding(child: TextField(...))
],
),
);
}
Try below code:
SingleChildScrollView(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: const Text(
'Your Apper Widget',
textAlign: TextAlign.center,
),
),
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text('userList'),
),
);
},
),
Container(
width: double.infinity,
height: 50,
color: Colors.red,
child: const Text(
'Your Lower Widget',
textAlign: TextAlign.center,
),
),
],
),
),
Try this code :
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.red,
height: 48.0,
),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, index) => const FlutterLogo(),
itemCount: 20,
),
),
Container(
color: Colors.green,
height: 48.0,
)
],
),
I was wondering how the following situation can be done?
I have the following code:
List<String> arrColorList = ['blue', 'red', 'yellow'];
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Center(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: arrColorList.length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {},
child: SizedBox(
width: 42.0,
height: 42.0,
child: const DecoratedBox(
decoration: const BoxDecoration(
color: const Color.fromRGBO(66, 165, 245, 1.0)
),
),
),
);
}),
),
),
),
),
),
),
)
);
}
What I want to achieve is to dynamically put the values of the arrColorList to the color property like this:
Colors.arrColorList[index] // Should end up in Colors.blue or Colors.red
But that is not valid. Any idea how I could solve this?
The getter 'arrColorList' isn't defined for the type 'Colors'.
Change color list type string to Color
List<Color> arrColorList = [Colors.blue, Colors.red, Colors.yellow];
Complete source code
Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Center(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: arrColorList.length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {},
child: SizedBox(
width: 42.0,
height: 42.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: arrColorList[index]),
),
),
);
}),
),
),
),
),
),
),
))
It's good to create a List of Color "List"
and fill it with what colors you want.
In your case you can do this:
List<Color> arrColorList = [
Colors.blue,
Colors.red,
Colors.yellow,
];
and then use it like this:
arrColorList[index]
I am trying to render a listview and divider in a column and have used a container to restrict the height.The text of the List Tiles is shown only within the Container however the listtile colour is shown outside the container. I want this layout but for the colour to be only shown within the container as well.
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10),
),
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
child: ListView.builder(
itemCount: 20,
itemBuilder: (ctx, index) => Column(
children: [
ListTile(
tileColor: Colors.red,
leading: Text("Test"),
),
Divider()
],
),
),
)
Simply wrap the ListTile with the Card to avoid overflow; similar to the example in the docs.
Card(
child: ListTile(//...)
//...
)
updated
import 'package:flutter/material.dart';
class SEList extends StatelessWidget {
const SEList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,
color: Colors.white,
),
title: Text("User Profile"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Container(
child: Center(
child: Column(
children: [
Text("Name"),
Text("Name"),
Text("Name"),
Text("Name"),
Container(
height: 70,
child: Text(
"Job",
style: TextStyle(
fontSize: 24,
),
),
)
],
),
),
),
SizedBox(
/// 70% of screen for listView
height: constraints.maxHeight * .65,
child: ListView.separated(
itemBuilder: (context, index) => Container(
child: Text("Text $index"),
height: 70,
color: Colors.redAccent,
),
separatorBuilder: (context, index) => Divider(
thickness: 1.2,
),
itemCount: 30,
),
)
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.upload_file,
),
),
);
}
}
This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}
Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),
return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);