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(/*...*/),
],
),
),
],
);
Related
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,
),
)
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.
this code is working but as i said in the last 2 element of the grid view function it will cut them off if i add height by my self to the
container it will fix it but this solve won work if i add more element
to the grid view function
[enter image description here][1]
class _sofyappState extends State<sofyapp> {
Color b = Colors.black;
Color w = Colors.white;
Color r = Colors.red;
Color bl = Colors.blue;
Color br = Colors.brown;
Widget info(String text, Color color) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [color.withOpacity(0.6), color,],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(25),
boxShadow: [BoxShadow(
color: Colors.indigoAccent.withOpacity(0.9),
spreadRadius: 0.1,
blurRadius: 6,
offset: Offset(0, 5), // changes position of shadow
),],
),
child: Text("$text"),
);
}
Widget foodtypesections(){
return null;//the GridView ;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("sofy"),
),
drawer:Drawer(),
body: SingleChildScrollView(
child: Container(
color: Color(0xffD7BDE2),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10,width: 10,),
Container(width: 100, height: 20,child: Text("Day 1",textAlign: TextAlign.center,)),
Stack(
children:[
Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink,Colors.red,Colors.indigoAccent],
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue.withOpacity(0.2),
),),
Container(
width: double.maxFinite,
color: r,
margin: EdgeInsets.all(6),
child: Padding(
padding: EdgeInsets.fromLTRB(10,10,10,10),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
itemBuilder: (_, int index) {
return info("text", Colors.indigoAccent);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 2.1 / 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
),
),
), // gridview function
]
),
Container(width: 100, height: 20,child: Text("Day 2",textAlign: *TextAlign.center,)),*
Stack(
children:[
Container(
margin: EdgeInsets.all(4),
width: 350,
height: 340,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink,Colors.red,Colors.indigoAccent],
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue.withOpacity(0.2),
),),
Container(height: 350,width: 470,
margin: EdgeInsets.all(6),
child: Padding(
padding: EdgeInsets.fromLTRB(10,10,10,10),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 4,
itemBuilder: (_, int index) {
return info("text", Colors.indigoAccent);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 2.1 / 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
),
),
), function
]
),
],
),
),
),
);
}
}
[1]: https://i.stack.imgur.com/FmAxf.jpg
here is the image for the error i mention
https://i.stack.imgur.com/FmAxf.jpg
by just putting padding inside the gridview it can work fine like this code
child: GridView.builder(
padding: EdgeInsets.fromLTRB(5,10,5,10),// the fix part
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
itemBuilder: (_, int index) {
return info("text", Colors.indigoAccent);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 2.1 / 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
),
I need to blur the pictures in the background, and make the text clear overlay, but for some reason the text is also blurry, and, as I have the GridView in two columns, then the last image in the second column is correct, with clear text, but all the rest are incorrect.
Expanded(
child: SmartRefresher(
enablePullDown: true,
header: WaterDropHeader(),
controller: _refreshController,
onRefresh: _refreshNews,
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.5,
crossAxisSpacing: 1.5,
mainAxisSpacing: 1,
padding:
EdgeInsets.only(left: 1, top: 0, right: 1, bottom: 60),
children: List.generate(
items.length,
(index) =>
Stack(
children: [
ClipRRect(
child:
Image.network(items[index].get_photoUrl),
borderRadius: BorderRadius.circular(30),
),
BackdropFilter(
filter: prefix0.ImageFilter.blur(
sigmaY: 1,
sigmaX: 1,
),
child: Container(
color: Colors.black.withOpacity(0)),
),
Center(
child: Text(
items[index].get_title,
style: prefix1.TextStyle(
fontSize: 12, color: Colors.white),
),
)
],
)
),
)))
1.you can use Stack to show picture and text in the same container.
e.g -> new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
decoration: new BoxDecoration(color:
Colors.white.withOpacity(0.0)),
),
)
Full example ->
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage('assets/dog.png'),
// NetworkImage("url")
fit: BoxFit.cover,
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
),
Text("hello flutter ")
],
),
),
);
}
try this
Happy Coding :))
Result:
Expanded(
child: SmartRefresher(
enablePullDown: true,
header: WaterDropHeader(),
controller: _refreshController,
onRefresh: _refreshNews,
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.5,
crossAxisSpacing: 1.5,
mainAxisSpacing: 1,
padding:
EdgeInsets.only(left: 1, top: 0, right: 1, bottom: 60),
children: List.generate(
items.length,
(index) => Stack(
children: <Widget>[
ClipRRect(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage(items[index].get_photoUrl),
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(
sigmaX: 1.5, sigmaY: 1.5),
child: Container(
color: Colors.white.withOpacity(0.0)),
),
),
borderRadius: BorderRadius.circular(30),
),
Center(child: Text(items[index].get_title))
],
),
),
)))
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()