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,```
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 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 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)),
);
}),
),
],
),
),
My code adds text to the first screen from a GridView. I have this GridView, which returns a container that resizes from Text, but the containers are very separate.
How do I join them?
Expanded(
child: GridView.builder(
padding: EdgeInsets.all(10),
itemCount: contacts.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(child: Align(child: ClipRRect(
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.hardEdge,
child: Container(
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
color: Colors.grey[900],
child: Padding(
padding: EdgeInsets.only(
right: 15, left: 15, top: 10, bottom: 10),
child: Text(contacts[index].texto ?? '',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
height: 2.5,
letterSpacing: 1,
))))),
),onTap:(){_showContactPage(contact: contacts[index]);});
},
))
If you just want your container to take all the available size just specify the width and height as double.infinity
Hope this helps.
because you set cross spacing and main spacing to 5.0 just change the values.
I have a gridview with 6 items (cards with images and text). I want those 6 items to fit me on the screen but the gridview leaves all the space I can between items by jumping 2 items off the screen.
I leave a picture of what I want and what I have.
Thank you.
return MaterialApp(
home: Scaffold(
body: Container(
margin: EdgeInsets.only(top: 0),
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: <Widget>[
Container(
height: 200,
color: Colors.black,
),
Container(
margin: EdgeInsets.only(top: 200),
decoration: BoxDecoration(
image: new DecorationImage(
image: AssetImage("assets/fondo.png"), fit: BoxFit.fill)),
),
Image.asset("assets/cara_simio_banner.png"),
Padding(
padding: EdgeInsets.only(top: 220),
child: Text(
"{CodeJaVu}",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(top: 230),
child: GridView.count(
crossAxisCount: 2,
children: items.map((item) {
return GestureDetector(
onTap: () {},
child: CardItem(item),
);
}).toList(),
),
)
],
),
)));
}
Widget CardItem(Item item) {
return Card(
margin: EdgeInsets.all(40),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
item.image,
width: 50,
height: 50,
),
Text(item.name)
],
)
);
}
class Item {
String _name;
String _image;
Item(this._name, this._image);
String get name => _name;
set name(String name) => _name = name;
String get image => _image;
set image(String image) => _image = image;
}
what I have,
what I want,
add childAspectRatio parametr to GridView.cout counstructor,
and change Card margin.
I've used:
..
GridView.count(
childAspectRatio: 3/2,
..
Card(
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
..
You can also use mainAxisSpacing and crossAxisSpacing like below.
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 4),
padding: EdgeInsets.all(8),
shrinkWrap: true,
itemCount: widgetList.length,
itemBuilder: (context, index) {
return widgetList[index];
},
);
Just add these 2 lines in your GridView widgets:
mainAxisSpacing: 20,
crossAxisSpacing: 20,
children:
space.photos.map((item) {
return Container(
margin: EdgeInsets.only(
left: 24,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image.network(
item,
width: 110,
height: 88,
fit: BoxFit.cover,
),
),
);
}).toList()