I have the following code snippet,
GridTile(
child: Card(
elevation: 5,
child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
),
),
);
producing following output..
But when I add column to my card like this...
GridTile(
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Image.network(imageUrl, fit: BoxFit.scaleDown,),
],
),
),
);
I got the below overflow issue..
What am I missing here., Is there any important layout details about Column that I need to take care of. I need column so that I can add favorite button and product description below the image. Find below the parent widget for reference.
return Scaffold(
appBar: AppBar(
title: Text('Shopify'),
),
body: GridView.builder(
itemBuilder: (context, index) => ProductItem(dummyProducts[index].title, dummyProducts[index].imageUrl),
itemCount: dummyProducts.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10
),
),
);
Your images have a determined proportion (width / height ratio).
Using gridDelegate with childAspectRatio you can assign the ratio of the GridTile inside your GridView.
Adjust the childAspectRatio or adjust the images ratio.
Play with this number to see the effect:
childAspectRatio: 1 // square
childAspectRatio: 2 // horizontal rectangle
childAspectRatio: 0.5 // vertical rectangle
Enclosing the image in AspectRatio finally did the trick. Please find the code below.
GridTile(
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 1,
child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
),
],
),
),
);
Related
[enter image description here][1]
Inside My column, there is a stack, a carousel slider,a gridview builder. I want to scroll all of them together. I tried to use singlechildscrollview as you can see in the code below. Please Someone help me how can I scroll those things together.
[1]: https://i.stack.imgur.com/FYexC.png` enter code here`
Scaffold(
backgroundColor: Colors.orange,
// Color(0xFFFFF176),
body: SingleChildScrollView(
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
CarouselSlider(
items: slideImage
.map((image) =>
Builder(builder: (BuildContext context) {
return Container(
height: 200,
width: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.fill),
),
);
}))
.toList(),
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
height: 300,
viewportFraction: 1,
autoPlay: true,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: AnimatedSmoothIndicator(
activeIndex: activeIndex, count: slideImage.length),
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: GridView.builder(
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemCount: menuImage.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Color(0xFFFFFDE7),
elevation: 10,
child: GridTile(
child: Column(
children: [
Image.asset(
menuImage[index],
fit: BoxFit.fill,
),
Text(
title[index],
style: TextStyle(fontSize: 18),
),
],
),
),
),
),
),
],
),
),
);
}
}
It would be best if you gave height to the column you are using singlechildeScrollview.
Wrap column widget in container or sizedbox widget and give it height.
column widget has children widget GridView.builder that is wrapped in expanded so gridview.builder will try to take all available height in the column which will be infinite because it's not defined and you will get column covering screen taking infinite screen height in short blank screen.
In flutter, Column will take height as much as it can, SingleChildScrollView child dont have height (infinite). Combine together, Flutter don't know how to render them correctly and causing error.
To solve it, try to determine the height of Column by widgget like SizedBox or determine the mainSize.min.
Another way to solve it is wrap Column by IntrinsicHeight but not recommend cause it heavy.
If it takes too much height. so give height to the column.
like this..
SingleChildScrollView(
child: SizedBox(
height: 500,
child: Column(
children: const [...],
),
),
)
your expanded widget is taking whole space of column try removing it or replacing it with Sizedbox.
I am new to Flutter. I just want to make a simple app which contains a horizontal carousel, 3 gridviews with 4 item each inside a scrollable area. How to make that? means which widgets?
Do I need to use SliverList or something else?
You can use the following code to make such an app.For carousels you will need a package named carousel_slider to create carousels in flutter and you can use gridView builder widget to get a grid view.It may show error if you just use gridview.builder so we wrap it with Flexible widget.
Column(
children: [
Container(
child: CarouselSlider.builder(
itemCount: {ur_array}.length,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 4.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index, i) {
return InkWell(
onTap: () {
},
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Container(
child: Center(
child: Image.network(
{imageurlyouwanttoshow},
fit: BoxFit.cover,
width: 1000)),
),
),
);
},
)),
Flexible(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 6.0,
mainAxisSpacing: 6.0),
itemCount: controller.datas.length,
itemBuilder: (context, i) {
return InkWell(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: ImageCacheing(url: controller.datas[i].imgurl!),
),
);
},
),
),
],
),
I was tryiing to use double row in a single Listview which should scroll together in a single ListView Widget when i added double rows in a column inside the listview wigdget I combine both rows instead of creating a new row. Image is attached.Marked Section
You can use GridView instead, Here is the sample code
Container(
height: 150,
width: MediaQuery.of(context).size.width,
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
childAspectRatio: 1,
),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('data $index'),
],
),
);
},
),
);
I've been trying to create the following screen in Flutter:
https://i.imgur.com/meBdNFz.png
So far I've made this with the package "Staggered Grid View":
https://i.imgur.com/mR6pQ3A.png
Sorry for not being able to upload the images..
However, I still can't figure out how to use different widths for the tiles. The first tile needs to fill around 70% of the containers size and the right one the rest.
At the moment I have the following code:
new StaggeredGridView.countBuilder(
padding: EdgeInsets.all(30),
crossAxisCount: 2,
itemCount: 7,
itemBuilder: (BuildContext context, int index) => new Container(
margin: EdgeInsets.all(4),
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
)),
staggeredTileBuilder: (int index) => (index == 0)
? new StaggeredTile.count(2, 1)
: (index % 2 == 0)
? new StaggeredTile.count(1, 0.8)
: new StaggeredTile.count(1, 0.8),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
You don't need to have
itemCount: 7
instead, just use
staggeredTiles: [StaggeredTile.extent(width in crossAxisCount, height in units)]
Here's my code. Haven't tested it but it should be close to what you want.
body: StaggeredGridView.count(
crossAxisCount: 10, //this indicates how much elements (or cards) you want to put in a row
crossAxisSpacing: 6.0,
mainAxisSpacing: 6.0,
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
children: [
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
Card(
child: ListTile(
//your code to customize here,
),
),
],
staggeredTiles: [
StaggeredTile.extent(10, 200), //second parameter is for adjusting the height of the element
StaggeredTile.extent(6, 150),
StaggeredTile.extent(4, 150),
StaggeredTile.extent(3, 150),
StaggeredTile.extent(5, 150),
StaggeredTile.extent(2, 150),
StaggeredTile.extent(6, 150),
StaggeredTile.extent(4, 150),
],
),
I hope my answer satisfies you :)
I am using the SliverGrid feature to build my gridView. I trying to have the text placed below the image but the text isn't aligning with the image and its showing a Bottom Overflowed error. This is the code:
SliverPadding(
padding: const EdgeInsets.only(left: 8, right: 8),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int i) {
return GestureDetector(
onTap: () {},
child: Column(
children: <Widget>[
GridTile(
child: Image.network(
'https://images.unsplash.com/photo-1562176566-73c303ac1617?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
fit: BoxFit.cover,
),
),
Text(
'Sammy the Pup',
style: khomeStyle.copyWith(
color: kOrange, fontSize: 14),
),
],
),
);
},
childCount: 200,
),
),
),
And this is what the gridview looks like(Output of the above):
And this is what I want to achieve:
The height of GridView is determined by the AspectRatio
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
crossAxisCount: 2,
childAspectRatio: 1 / 1,<---
),
As the AspectRatio gets smaller the height gets larger and as the ratio gets larger the heights gets smaller