I have a gridview builder like this and in this gridview builder im scrolling posts with page;
GridView.builder(
physics: ScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: listt.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () =>
navigateToDetail(listt[index]),
child: Hero(
tag: (listt[index]["foto"] != null)
? NetworkImage(
listt[index]["foto"])
: AssetImage(
"assets/images/n_image.jpg"),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Expanded(
flex: 7,
child: Container(
child: Stack(
children: [
Align(
alignment: Alignment
.topCenter,
child: ClipRRect(
borderRadius:
BorderRadius
.only(
topLeft: Radius
.circular(
10),
topRight: Radius
.circular(
10),
),
child: (listt[index]
[
"foto"] !=
null)
? OptimizedCacheImage(
imageUrl:
listt[index]
[
"foto"],
imageBuilder:
(context, imageProvider) =>
Container(
height:
double.infinity,
width: double
.infinity,
decoration:
BoxDecoration(
image: DecorationImage(
image:
imageProvider,
fit: BoxFit
.cover,
)),
),
placeholder:
(context, url) =>
Container(
height:
double.infinity,
width: double
.infinity,
decoration:
BoxDecoration(
color:
Colors.grey[400],
),
),
)
: Image(
height: double
.infinity,
width: double
.infinity,
fit: BoxFit
.cover,
image: AssetImage(
"assets/images/n_image.jpg"),
),
),
),
],
),
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius:
BorderRadius.only(
topRight:
Radius.circular(
10.0),
topLeft:
Radius.circular(
10.0),
),
),
width: double.infinity,
),
),
Expanded(
flex: 5,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(
bottomRight:
Radius.circular(
10.0),
bottomLeft:
Radius.circular(
10.0),
),
color: Colors.white),
child: Center(
child: AutoSizeText(
"${listt[index]["name"]}",
textAlign:
TextAlign.center,
style:
GoogleFonts.lora(
textStyle:
TextStyle(
color: Colors
.grey[700],
fontSize: 15,
fontWeight:
FontWeight
.w600,
),
),
maxLines: 2,
),
),
),
),
],
),
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10.0),
),
),
),
);
},
),
In this gridview builder I can scroll the page the way I want like this;
When I add controller: scrollController, in my Gridview builder to listen controller, scrolling change to this;
I have to add controller: scrollController, to my Gridview to listen controller for paginaiton so I cant remove controller, so how can I scroll page like first example with adding controller : scrollController,
Try changing the physics to
physics: const NeverScrollableScrollPhysics() in your GridView.builder().
I add controller to my NestedGridView in the body instead of GridView Builder and I solved my problem.
Related
i am working on this flutter app where i need to show the children in a grid view, so i used a column widget in side GridView.builder like shown below, i want to remove the sapcing where its marked in the red, and leave it to be responsive somehow...
GridView widget:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 450,
),
primary: false,
shrinkWrap: true,
padding: const EdgeInsets.only(
right: 25,
left: 25,
top: 20,
),
itemCount: data.length,
itemBuilder: (ctx, index) {
return VideoWidget(
oneVideoData: data[index],
);
},
),
VideoWidget:
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
...
),
child: Row(
children: [
...
],
),
),
Stack(
alignment: AlignmentDirectional.center,
children: [
_videoPlayerControllerFFrame.value.isInitialized
? AspectRatio(
aspectRatio:
_videoPlayerControllerFFrame.value.aspectRatio,
child: VideoPlayer(
_videoPlayerControllerFFrame,
),
)
: Container(
height: 250,
),
_isVideoLoading
? const CircularProgressIndicator(
color: Colors.yellow,
)
: IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return VideoPlayerWidget(
oneVideoData: widget.oneVideoData,
videoController: _videoPlayerController,
);
});
},
icon: Icon(
Icons.play_arrow,
color: Theme.of(context).colorScheme.tertiary,
size: 50,
),
),
],
),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
...
),
),
],
),
);
this a screen shot of the output:
i want to get rid of the red space in the bottom.
Thanks in advance
Try below code hope its help to you.
GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 200,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(2),
child: Row(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black,
width: 1.0,
),
),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
SizedBox(
width: 10,
),
Text('Person ${index.toString()}'),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
child: Text(
'Awesome Product From Person ${index.toString()}',
),
),
],
),
),
);
},
),
Result Screen->
I am trying to make the following design:
I am using Firebase as my backend as a service, and I am having trouble having my code work. There are no errors, but the UI visual looks funky.. I'm trying to create a GridView.builder() and display a grid of my UI (Designs provided below), but the image isn't working as it should be.. You'll see that the light blue is the background color, and the image should be covering the entire cell, even behind the container with the text widget. Check out the code:
return GridView.builder(
shrinkWrap: true,
itemCount: locations.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 37,
crossAxisSpacing: 37,
),
itemBuilder: (context, index) {
Location location = locations[index];
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: blue100,
borderRadius: BorderRadius.circular(
20,
),
),
child: Stack(
children: [
ClipRRect(
child: Image.network(
location.image,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(20),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: isLight
? Color(0xFFF2F2F2)
: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
20,
),
bottomRight: Radius.circular(
20,
),
),
),
height: isSmall ? 44 : 67,
child: Center(
child: CustomText(
text: locations[index].street,
size: isSmall ? 12 : 15,
),
),
),
],
),
),
],
),
),
),
);
},
);
Here is what this code causes:
You can obviously see that the code is there, and the general thing is working, although the image doesn't want to cooperate and resizes itself differently.
Why is this? Is it something with the GridView..?
I have try this without Stack also, refer below code hope its help to you. add some changes in my code with your code like image and text add below design code inside GridView.builder()
Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 200,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
10,
),
topRight: Radius.circular(
10,
),
),
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
child: Text(
'300 E Mejor Dr.',
),
),
],
),
),
),
Result Screen->
we can use stack like this inside gridviewbuilder()
GridView.builder(
padding: const EdgeInsets.all(10),
itemCount: itemProvider.sitem.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10),
itemBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: GestureDetector(
onTap: () {},
child: Stack(
children: [
Container(
child: Center(
child: Image.network(
itemProvider.sitem[index].imageURL.toString(),
fit: BoxFit.fill,
),
)),
Positioned(
top: 10,
left: 20,
child: Text('${itemProvider.sitem[index].name}'))
],
),
),
Hi I am creating a flutter screen as follow.
I want to add name under image. If I add column, image is shrink.
May I know how I can add the artist name under image.
Here is the code that I have created for following screen
Widget buidArtistScreen(BuildContext context, List<Artist> artists) =>
GridView.builder(
itemCount: artists.length,
itemBuilder: (context, index) => buidImageCard(index, artists[index]),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
),
);
Widget buidImageCard(int index, Artist artist) => Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
margin: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
),
);
Here is the code with artist name
Widget buidImageCard(int index, Artist artist) => Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
margin: const EdgeInsets.all(8),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
const SizedBox(height: 20,),
Text(artist.name)
],
),
),
);
}
This is how I achieved. Added Expanded.
Widget buildImageCard(int index, Artist artist) => Card(
clipBehavior: Clip.antiAlias,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AlbumScreen(artist: artist),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(5),
//padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
Container(
padding: const EdgeInsets.all(8.0),
child: Text(artist.name),
)
]),
),
);
I want to expand the background color of the Container to take the full height.
I already tried to set the height to double infinite and that just gets rid of my Two Text Widgets Title and Lemon Chicken. This is the code its inside a Scalfold widget this part its only the body.
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 36),
child: GestureDetector(
onTap: () => print('Add Image'),
child: Icon(
Icons.add_a_photo,
size: 70,
color: Theme.of(context).primaryColor,
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
child: Form(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
Text(
'Lemon Chicken',
style:
TextStyle(color: Theme.of(context).primaryColor),
)
],
),
),
),
),
),
],
),
),
This is the Image of my app.
I just want to expand the Widget has the pink background color
you can use mediaquery to find device's height and set that as container's height
Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
color: Colors.pink,
),
or as you did you can use double.infinity
Container(
height:double.infinity,
result:
The ListView is not scrollable in this widget although I am using SingleChildScrollView as the body.
In order for me to scroll the widget, I should start scrolling from the very first part of the page which is the Stack inside the Column, if I try to scroll the ListView it is not Scrollable and it doesn't produce any errors like render box overflow.
body: SingleChildScrollView(
child: Container(
//height: MediaQuery.of(context).size.height,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF27233E),
Color(0xFF160F3C),
Color(0xFF1E1550),
Color(0xFF241A5B),
],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 210,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0),
),
color: Colors.transparent.withOpacity(0.2)),
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.orange,
shape: RoundedRectangleBorder(
side: BorderSide(),
borderRadius: (BorderRadius.only(
bottomRight: Radius.circular(25.0),
bottomLeft: Radius.circular(25.0)))),
child: Stack(
children: <Widget>[
//Title
Positioned.fill(
top: 20,
left: 20,
child: Align(
alignment: Alignment.topCenter,
child: Text(
"Day: $currentDay",
style: TextStyle(
color: Colors.white,
fontFamily: "Montserrat",
fontSize: 31,
fontWeight: FontWeight.w900),
),
),
),
Positioned.fill(
bottom: -17.0,
child: Align(
alignment: Alignment.centerRight,
child: Container(
padding: const EdgeInsets.only(right: 10.0),
child: Hero(
tag: 'assets/logos/biceps-icon.png',
child: Image(
image: AssetImage(
'assets/logos/biceps-icon.png'),
height: 150.0,
))),
),
),
Positioned.fill(
bottom: 50,
top: 20,
left: 20,
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
"${dayMap['day$currentDay']}",
style: TextStyle(
color: Colors.white,
fontFamily: "Montserrat",
fontSize: 20,
fontWeight: FontWeight.w900),
),
),
),
],
),
),
),
Container(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
itemCount: dayMap["workout"].length,
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: (Card(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 3, color: Colors.indigo),
borderRadius:
(BorderRadius.circular(30))),
color: Colors.purpleAccent,
margin:
EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
child: ListTile(
leading: ClipOval(
child: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.transparent,
),
),
),
)));
}),
),
],
),
),
),
);
}
}
In your Listview.builder function, try changing the physics property to "NeverScrollableScrollPhysics()"
ListView.builder(
itemCount: dayMap["workout"].length,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Padding(