Related
I'm up to making a screen like on the pic
I'd like to add scroll for gridview, but the trouble now is I don't really understand how to achieve that.
When I wrap Grid with SingleChildGridView, I've got an error that bottom overflowed. Example is on the second screen:
Obviously, it's happening as the GridView is a part of Column which causes the error. But how can I find a wayaround to avoid wrapping the column with let's say singlechildscrollview and at the same time making scrollable only GridView ?
Here is my code:
Scaffold(
appBar: HomeAppBar(),
bottomNavigationBar: CustomNavBar(),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hemendra',
style: Theme.of(context).textTheme.displaySmall
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Welcome to Laza.',
style: Theme.of(context).textTheme.bodyMedium
),
),
Searchbox(),
BlocBuilder<ProductBloc, ProductState>(
builder: (context, state) {
if (state is ProductLoaded) {
return Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
mainAxisExtent: 300,
crossAxisCount: 2,
),
itemCount: state.products.length,
itemBuilder: (BuildContext ctx, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<ProductDetailsBloc>(
context)
.add(ProductDetailsEvent(
state.products[index]));
Navigator.pushNamed(
context, '/product_details');
},
child: Container(
height: 240,
child: Image.network(
state.products[index].imageUrl, fit: BoxFit.fill,),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
icon: Image(
image: AssetImage('heart.png'),
),
onPressed: () {},
),
],
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
children: [
Expanded(
child: Text(
maxLines: 2,
state.products[index].name,
style: Theme.of(context).textTheme.bodySmall
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
maxLines: 2,
"\$" +
state.products[index].price
.toString(),
style: TextStyle(
color: HexColor('1D1E20'),
fontWeight: FontWeight.w600),
),
],
))
],
),
],
);
},
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
)
],
),
),
);
}
}
remove SingleChildScrollView and warp you BlocBuilder with Expanded widget .
so you code widget inside Scaffold body like this
Column(
children: [
searchBox(),
SizedBox(height:70, child: horizontalBrandList()),
Expanded(child: BlocBuilder(...))
],
)
created code similar UI code for better understanding update your code accordingly:
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//SEARCH BAR
const TextField(decoration: InputDecoration(hintText: "Search")),
const SizedBox(height: 12),
// HORIZONTAL LIST VIEW
SizedBox(
height: 50,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(
10,
(i) => Container(
width: 50,
color: Colors.accents[i % 16],
alignment: Alignment.center,
child: Text('$i'),
),
),
),
),
const SizedBox(height: 12),
// GRID LISTVIEW
Expanded(
child: GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: MediaQuery.of(context).size.width * 0.5,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 20,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Center(child: Text(index.toString())),
);
},
),
)
],
),
)
You are adding ListView inside Column so You need to wrap with with Expanded Widget. in ListView contains own ScrollController so no need to wrap it with external SingleChildScrollView
I want to center all grid button inside red container but it is showing big space at bottom of red container..how to solve this
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height*0.60,
width: MediaQuery.of(context).size.height*0.60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
itemCount: 16,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context,index)=>
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(child: Center(child: Text(index.toString(),)),color: Colors.blue,),
)
,),
),
),
);
}
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.height,
child: Center(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.6,
child: GridView.builder(
padding: EdgeInsets.all(16),
itemCount: 16,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(
child: Text(
index.toString(),
)),
color: Colors.blue,
),
),
),
),
),
),
);
}
You can wrap the gridview.builder inside a sized box ( provided some height ) and wrap it under Center widget.
You can do it like this :
Center(
child: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height * 0.60,
width: MediaQuery.of(context).size.height * 0.60,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column( // column
mainAxisAlignment: MainAxisAlignment.center, // center
children: [
Container( // if you don't have this container, there is an error
height: MediaQuery.of(context).size.height * 0.50, // new height
width: MediaQuery.of(context).size.height * 0.50, // new width
color: Colors.green,
child: GridView.builder(
padding: const EdgeInsets.all(0.0), // delete all padding from grid
itemCount: 20, // more items to scroll
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(
child: Text(
index.toString(),
)),
color: Colors.blue,
),
),
),
),
],
),
),
),
)
Enclose your Grid inside a Column to allow it to be centered, because if you don't do it I can't find another way to center it because the Grid is dynamic in height and could not be centered.
And with this, you delete the big space in the red container
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.
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,
),
),
)
]),
),
);
I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image:
AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
),
);
}
The best thing to use for your case is Slivers, it will allow you to scroll through both the ListView and GridView together smoothly.
An example is as follows:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Text('hello'),
),
);
},
);
}).toList(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20.0),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
}, childCount: 5),
)
],
),
);
}
}
Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()
Code:
ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image: AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: PageScrollPhysics(),
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
physics: PageScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
);