Related
When I tap in a image in the GridView Widget, it's supose to change to the image without the opacity, but it's not working as it should. The list is working well, and I can add and remove images from the list, but the result it's not showed on the screen.
SingleChildScrollView(
child: SizedBox(
height: 410,
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 160,
crossAxisSpacing: 10,
),
itemCount: data[0].products!.length,
physics: const ScrollPhysics(),
itemBuilder: (BuildContext ctx, index) {
return GestureDetector(
onTap: () {
setState(() {
(isSelected.contains(data[0].products![index])
? isSelected.remove(data[0].products![index])
: isSelected.add(data[0].products![index]));
});
},
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15)),
child: Column(
children: [
(isSelected.contains(data[0].products![index])
? SizedBox(
height: 90,
child: Image.asset(
data[0].products![index].image))
: SizedBox(
height: 90,
child: Image.asset(
data[0].products![index].image,
opacity:
const AlwaysStoppedAnimation(.5),
),
)),
const SizedBox(
height: 8,
),
Text(data[0].products![index].name)
],
),
),
);
},
),
),
),
I am new to flutter and I am making a shop app.
In the homescreen I have used grid view builder to display images of items. Now I want to add two text widgets at the bottom of each grid view item which shows the item name and price of the item.
This gridview builder is a child of a column widget. The column widget has two text widgets and gridview builder as its child.
GridView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: loadedProducts.length,
itemBuilder: (ctx, i) => Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: secondaryColorlight,
borderRadius: BorderRadius.circular(defaultBorderRadius)),
child:
Image.asset(
loadedProducts[i].imageUrl,
height: 132,
),
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
)
This is how my homepage looks right now
This is how I want it to look
You can return Column from itemBuilder. You may also need to increase height from childAspectRatio
itemBuilder: (ctx, i) => Column(
children: [
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: secondaryColorlight,
borderRadius: BorderRadius.circular(defaultBorderRadius)),
child: Image.asset(
loadedProducts[i].imageUrl,
height: 132,
),
),
// padding if needed
Text("your text"),
],
),
Also you can check GridTile widget.
More about layout in flutter
GridView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: loadedProducts.length,
itemBuilder: (ctx, i) => Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: secondaryColorlight,
borderRadius: BorderRadius.circular(defaultBorderRadius)),
child:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 190.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child:Image.asset('images/image.png'),
),
),
),
SizedBox(height: 5.0),
Padding(
padding: const EdgeInsets.only(left: 10.0, bottom: 5.0, right: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Text('Price'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Text('Sometext'
maxLines: 1,
overflow: TextOverflow.ellipsis, ),
],
),
Text('title',
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
)
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 made an application called food gallery which just shows some random foods. So first I wanted a main image at the top, so I used a container to display it at the top. Then I implemented a grid view under the container to show the gridview images of food. But the issue is whenever I scroll the page, only the gridview is getting scrolled and the container is like pinned and not scrolling. Following is the code.
body: SafeArea(
// Container
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image:AssetImage('assets/burger.jpeg'),
fit: BoxFit.cover
)
)
),
),
//GridView
Expanded(
child: GridView.builder(
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image:DecorationImage(
image: AssetImage('assets/${img[index]}'),
fit: BoxFit.cover
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: double.infinity,
height: 50.0,
color: Colors.grey[800].withOpacity(0.5),
child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
),
],
),
),
);
})
),
],
),
),
),
),
);
}
}
This is how it looks
As you can see the container is pinned at the top. I want the entire screen to scroll not only the gridview. I tried using SingleChildScrollView and it's not working.
Change your column with a ListView, remove the Expanded and add these to lines to your GridView :
physics: ScrollPhysics(), // to disable GridView's scrolling
shrinkWrap: true,
So your code would be like:
SafeArea(
child: Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image:AssetImage('assets/burger.jpeg'),
fit: BoxFit.cover
)
)
),
),
//GridView
GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image:DecorationImage(
image: AssetImage('assets/${img[index]}'),
fit: BoxFit.cover
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: double.infinity,
height: 50.0,
color: Colors.grey[800].withOpacity(0.5),
child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
),
],
),
),
);
}),
],
),
),
);
You should look into CustomScrollView
A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers.
Example
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
)
this is your code
//GridView
Expanded(
child: GridView.builder(
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
***
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
add this if before return ( i added *** )
if(index == 0){
return Container //your container Image goes Here
}else{
// your last return for other items
}
I hope this help your ...
I have a GridView and with its bottom overflow as below.
I have tried a lot of ways, which included adding ScrollPhysics() in my GridView, wrapping my GridView inside the Expanded widget, or wrap my Container inside the Expanded widget.
None of the above works. Can someone kindly advise please?
Below is my code:
Widget portfolioRow = StreamBuilder(
stream: Firestore.instance.collection('portfolio').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return Text("Loading...");
return GridView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 70.0,
mainAxisSpacing: 70.0,
),
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
portfolioContainer(context, snapshot.data.documents[index]));
},
);
Widget portfolioContainer(
BuildContext context, DocumentSnapshot documentSnapshot) {
return Container(
height: 500,
width: 302,
decoration: myPortfolioDecoration(),
child: Column(children: [
Container(
margin: const EdgeInsets.only(top: 20, bottom: 10),
width: 250,
height: 250,
decoration: myPortfolioDecoration(),
),
Container(
height: 3,
width: 30,
margin: const EdgeInsets.only(top: 15, bottom: 20, right: 210),
decoration: BoxDecoration(color: Colors.yellow)),
Container(
padding: const EdgeInsets.only(bottom: 10, left: 30),
alignment: Alignment.centerLeft,
child: Text.rich(
TextSpan(
text: documentSnapshot.data["title"],
style: Theme.of(context).textTheme.headline5),
),
),
Container(
padding: const EdgeInsets.only(left: 30, bottom: 20),
alignment: Alignment.centerLeft,
child: Text.rich(
TextSpan(
text: documentSnapshot.data["tagline"],
style: Theme.of(context).textTheme.bodyText1),
),
),
]),
);
}
I have succeeded in getting rid of the bottom overflow by adding a childAspectRatio:
childAspectRatio: MediaQuery.of(context).size.height / 1100,```