I would like to ask if somebody knows how to remove offset on top of gridview in #flutter, looks like gridview doesn't match parent height screenshot here
Widget _buildGridView({BuildContext context, List<TileWidget> children}) {
return Card(
margin: padding(context),
borderOnForeground: true,
color: Colors.black45,
semanticContainer: true,
clipBehavior: Clip.antiAlias,
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: sqrt(children.length).toInt(),
children: children
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
);
}
Related
I got this very simple code, but somehow I get an error when I set scrollDirection to Axis.horizontal
I invoke this widget in Page that has MaterialApp and Scaffold widgets.
What I tried is wrapping ListView.builder with expanded, I removed all widgets besides Container and ListView.builder
Here is code:
class CalendarPage extends StatelessWidget {
List<String> hoursList = ['00:00', '00:30', '01:00'];
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25), topRight: Radius.circular(25))),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextLabel('Choose preferred date of meeting'),
ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: hoursList.length,
itemBuilder: (context, i) {
return Text(hoursList[i]);
})
],
),
),
);
}
}
thank you in advance
Wrap your ListView inside Expanded or Flexible widget. refer below code:
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextLabel('Choose preferred date of meeting'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: hoursList.length,
itemBuilder: (context, i) {
return Text(
hoursList[i],
);
}),
)
],
),
),
),
Result screen->
You must wrap with a container your Listview and define height value.
class CalendarPage extends StatelessWidget {
List<String> hoursList = ['00:00', '00:30', '01:00'];
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25), topRight: Radius.circular(25))),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextLabel('Choose preferred date of meeting'),
Container(
height: 300,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: hoursList.length,
itemBuilder: (context, i) {
return Text(hoursList[i]);
}),
)
],
),
),
);
}
}
need some help between the word and images, I want them to space a little bit and dun want them to touch each other.
Example like this :
The output of my own code with images :
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Column(
children: [
Expanded(
child: Card(
color: Colors.grey[200],
child: GridView.builder(
primary: false,
padding: const EdgeInsets.all(10),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 20,
mainAxisSpacing: 20,
crossAxisCount: 2),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
Widget widget;
switch (index) {
case 0:
widget = Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey[100],
),
child: GridTile(
child: Image.network(
'https://static.nike.com/a/images/t_prod_ss/w_640,c_limit,f_auto/qebbe6yb2crumsanfyu4/sacai-x-nike-ldwaffle-black-release-date.jpg',
),
footer: Container(
color: Colors.black54,
height: 40,
child: const GridTileBar(
title: Text('Sacai x Nike Ldwaffle Black',
maxLines: 2),
),
),
),
);
break;
Do not use Stack widget, just put Column, set parent base on the column.
What i need
How it is now
Basically, i need to achieve this. i thought of using a grid view but grid view renders elements to a specified aspect ratio which is not i need in my case. I also tried a list view with a horizontal scroll but of course it would and infinite horizontal scroll. I would appreciate any pointers on how to achieve it.
ListView.builder(
itemCount: categories.length,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context,index){
return Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)
),
child: Text(categories[index],style: AppTextStyles.smallTextStyle,)
);
}
),
You can use a wrap widget with chip also it seems this is like filtering menu, if you are interested check this package filter_list
ListView(
primary: true,
shrinkWrap: true,
children: <Widget>[
Wrap(
spacing: 4.0,
runSpacing: 0.0,
children: List<Widget>.generate(
categories.length,
(int index) {
return Chip(
label: Text(categories[index].name,style: AppTextStyles.smallTextStyle)
);
}
).toList(),
),
],
),
You can achieve it with Wrap widget. Doc -> wrap class documentation
Wrap(
children: categories.map((category) {
return Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)
),
child: Text(
category,
style: AppTextStyles.smallTextStyle,
)
)}.toList(),
],
),
You can try using Wrap instead of ListView.builder.
Wrap(
children:categories.map((c)=>Text(categories[index],style:
AppTextStyles.smallTextStyle,).toList())
)
Wrap is what you look for
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: categories
.map((e) => Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)),
child: Text(
e,
style: AppTextStyles.smallTextStyle,
)))
.toList(),
)
I am trying to match the listtile height to the height of the card but listtile height is very small. it has default height which is very small. i want to change it to match the height of the card.please help me.
Following below is my code .
Container(
margin: EdgeInsets.only(top: 16),
child: ListView.builder(
itemCount: listitems.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Column(children:<Widget>[
Container(
height: 100,
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child:ListTile(
leading: Image.network('https://images.unsplash.com/photo-1550251592-aee2da85a87e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
]);
}),
),
Any help would be much appreciated
If I understood the documentation correctly, ListTile is just a pre-customized composition of a row with a fixed-height. I couldn't figure out what final result you're looking for but I checked your code,
a.Using Container instead of ListTile to set a row/column composition would help you, though I used the container alone and it worked.
b.Try removing the parent container(the one with the height:110), put a Container as the child of the card. (your content can go under the new container instead of listTile).
please tell me if you're looking for a specific result and my answer is irrelevant.
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 16),
child: ListView.builder(
itemCount: listitems.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Column(children:<Widget>[
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child:Container(
child: Image.network('the image url'),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
]);
}),
),
);
I need to hide a widget in a GridView. I searched and tried many ways to hide this widget but it still have space. so this is what I used to solve it
1- I used Visibility
2- I used Offset
3- I used If case but the widget still have place in GridView and ListView ,
I need it to be removed and don't take any space in my Ui.
I give it red color to show .
GridView.builder(
dragStartBehavior: DragStartBehavior.start,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4
),
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
var data = val[index];
bool visible = data['isView'] && data['url'] != '';
return !visible?Padding(
padding: const EdgeInsets.all(5),
child: Container(
color:Colors.red),
): Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(15),
color: data['IsDirectOn']
? mCD
: Colors.white,
boxShadow: [
BoxShadow(
color: mCL,
offset: Offset(3, 3),
blurRadius: 3,
spreadRadius: -3),
]),
child: Expanded(
child: Container(
child: SocialBox(
color: Colors.green,
width: width,
height: height,
image: data['image'],
category: data['label']),
),
),
);
},
itemCount: snapshot.data.documents.length,
);
The data comes from Firebase, and I don't know how to remove index from Firebase list
After getting data from Firebase, you can filter it with your conditions.
_DataList = AllDataList.where((i) => i['isView'] && i['url'] != '').toList();