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)
],
),
),
);
},
),
),
),
Related
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'm trying to do this page
but what i get is this
this is my code
SingleChildScrollView(
child: Column(
children: [
Center(
child: Container(
margin: EdgeInsets.all(20),
width: 230,
height: 40,
child: ElevatedButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Color(0xff28CC61)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Add a book", style: TextStyle(
fontSize: 20
),),
),
),
),
),
Container(
child: Text("Explore between 10 books", style: TextStyle(
fontSize: 20
),),
),
Container(
//adding: EdgeInsets.all(12),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisSpacing: 20,
crossAxisCount: 2,
mainAxisSpacing: 8),
itemCount: books.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
width: 50,
height: 100,
child: Card(
color: Color(0xFFEDEDED),
child: Column(
children: [
Image.asset(books[index].image, height: 150
,
width: 150,fit: BoxFit.cover,),
],
),
),
);
}),
),
),
],
),
),
ignore the colors and styles i want how to do the page
i stucked on gridview and how to write text below the picture + How can I fix my code to do it? So each image has same size as others? i tried to see the grid view documentation and i could not find anything.
Change childAspectRatio : 1 to childAspectRatio:0.7. childaspectRatio defines the ratio between width and height of children. If you set it as 1 you will get a square shaped widget. More than 1 is horizontal rectangle and less than 1 gives vertical rectangle.
I want the second column of cards to be slightly uneven how can I achieve that.
here is the output that I want:
You can use GridView.builder like this
GridView.builder(
padding: EdgeInsets.only(left: 20, right: 20),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 20,
mainAxisSpacing: 8,
childAspectRatio: 0.7,
),
itemCount: 10,
itemBuilder: (context, index) {
return Padding(
padding: (index % 2) == 0 ? EdgeInsets.only(bottom: 15) : EdgeInsets.only(top: 15),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
decoration: BoxDecoration(
color: (index % 2) == 0 ? Colors.red : Colors.green,
borderRadius: BorderRadius.circular(10),
),
),
),
);
},
);
One approach would be to add two columns inside a row:
Row(
children: [
Expanded(
child: Column(
children: [
CardWidget(/*...*/),
CardWidget(/*...*/),
CardWidget(/*...*/),
CardWidget(/*...*/),
],
),
),
Expanded(
child: Column(
children: [
const SizedBox(
height: 50,
),
CardWidget(/*...*/),
CardWidget(/*...*/),
CardWidget(/*...*/),
CardWidget(/*...*/),
],
),
),
],
);
I write gridView Code under listView but GridView's scrolling does not work under listview.
Scaffold(
body: ListView(
children: [
GridViewBuilder(), //explicit class
],
));
You can wrap with container to gridview.
And you should give a specific height
Scaffold(
body: ListView(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.4,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: 2,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
child: Text(index.toString()),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
);
}),
),
],
),
),
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 ...