I made an application like this:
I want to add a little info text on top of this gridView structure. How can I do it? I'm a beginner and I just couldn't do it.
Codes:
body: Container(
padding: EdgeInsets.all(7),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(subjects[index].subjectImage, fit: BoxFit.cover, height: 50, width: 50,),
SizedBox(height: 15,),
Text(subjects[index].subjectName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
],
),
),
onTap: () {},
),
),
);
},
),
How can I do it? Thanks in advance.
Try below code. I have added text like Text("1234567890")
body: Container(
padding: EdgeInsets.all(7),
child: Column(
children: [
Text("1234567890"), //<------------
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
subjects[index].subjectImage,
fit: BoxFit.cover,
height: 50,
width: 50,
),
SizedBox(
height: 15,
),
Text(
subjects[index].subjectName,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w500),
),
],
),
),
onTap: () {},
),
),
);
},
),
),
],
),
);
You can use #DholaHardik's answer. Just need to wrap the Grid View Builder to a Sized Box and give it a height let's say height = MediaQuery.of(context).size.height and if the error says Overyflow by say 45 pixels.. You can change height to MediaQuery.of(context).size.height - 45;
Related
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: AppBar(
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: GlobalVariables.appBarGradient,
),
),
title: Text(
widget.category,
style: const TextStyle(
color: Colors.black,
),
),
),
),
body: productList == null
? const Loader()
: Column(
children: [
Container(
padding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for ${widget.category}',
style: const TextStyle(
fontSize: 20,
),
),
),
SizedBox(
height: 170,
child: GridView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(left: 15),
itemCount: productList!.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
final product = productList![index];
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context,
ProductDetailScreen.routeName,
arguments: product,
);
},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
product.images[0],
),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
product.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
),
I tried SingleChildScrollView in child but it didnt helped.
Code Image
You are using scrollDirection: Axis.horizontal, therefore it is scrolling horizontally. you can remove it or set to scrollDirection: Axis.vertical, on GridView.
child: GridView.builder(
scrollDirection: Axis.vertical, //this by default
padding: const EdgeInsets.only(left: 15),
No need to provide fixed heigth, use Expnaded widget to get available height, follow this snippet
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for',
style: const TextStyle(
fontSize: 20,
),
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.only(left: 15),
itemCount: 44,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
// final product = productList![index];
return GestureDetector(
onTap: () {},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
// child: Image.network(
// product.images[0],
// ),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
"name",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
)
],
),
);
}
Image result now
I have created a main list of items now i need a sub list items group also, but when i want to create sub list items group then it appears that without height i cant place them and when i set height then this is just a scrollable containter thats the problem. Can any one help me.
Thanks in advance.
List<Reply> replyList = [];
// sub Items
buildItemItem(List<Reply> reply){
return Container(
height: 65,
margin: EdgeInsets.only(left: 30),
child: ListView.builder(
itemCount: reply.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.only(left: 40, top: 8, right: 10, bottom: 8),
child: Row(
children: [
Container(
height: 40,
width: 40,
child: CircleAvatar(
backgroundImage: NetworkImage(reply[index].photo),
),
),
Expanded(
flex: 4,
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${reply[index].name}',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12
),),
Text('${reply[index].Item}'),
Text('${reply[index].createdAt}',
style: TextStyle(
fontSize: 10,
color: Colors.grey
),
),
],
),
),
),
),
);
},
),
);
}
// main Item list
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
padding: EdgeInsets.only(left: 15, top: 8, right: 10, bottom: 8),
child: Row(
children: [
Container(
height: 40,
width: 40,
child: CircleAvatar(
backgroundImage: NetworkImage(photo),
),
),
Expanded(
flex: 4,
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('$name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12
),),
Text('$Item'),
Text('$createdAt',
style: TextStyle(
fontSize: 10,
color: Colors.grey
),
),
],
),
),
),
],
),
),
FutureBuilder(
future: getReply(id),
builder: (context, snapshot) {
return snapshot.data !=null ? buildItemItem(snapshot.data) : circularProgress();
},
),
Divider(height: 0.0,),
],
);
}
}
I am trying to bring a List of containers and i want to change the details inside this list of containers using fire store. But when i am running the program the page is showing blank. The output i want is like this image,
The output i am getting. And my second question is how to add images to the field inside the firestore.
Thanks in advance, it is really hard to publish a question in stack overflow.
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//1st box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_1']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_1']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_1_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_1_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
)),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_1']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
//2nd box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_2']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_2']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_2_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_2_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
),
),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_2']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
I don't think you need the second listview, but if you do, try this:
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
//1st box
...
[Widget _builtCard() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: FutureBuilder(
future: dbManager.getCategoryList(),
builder: (context, snapshot) {
if (snapshot.hasData) {
categoryList = snapshot.data;
print("object");
return ListView.builder(
itemCount: categoryList.length,
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>\[
Container(
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text(
categoryList\[index\].categoryName.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
AspectRatio(
aspectRatio: 2 / 3,
child: Container(
child: FutureBuilder(
future: dbManager
.getProductList(categoryList\[index\].categoryName),
builder: (context, snapshot) {
if (snapshot.hasData) {
productList = snapshot.data;
productList.forEach((row) => print(row));
return GridView.builder(
physics: ScrollPhysics(),
scrollDirection: Axis.horizontal,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 4 / 2.5,
crossAxisCount: 2,
crossAxisSpacing: 15.0,
mainAxisSpacing: 15.0),
shrinkWrap: true,
itemCount: productList == null
? 0
: productList.length,
itemBuilder:
(BuildContext context, int index) {
Product prod = productList\[index\];
return GestureDetector(
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0)),
elevation: 7.0,
child: Column(
children: <Widget>\[
SizedBox(height: 12.0),
Stack(children: <Widget>\[
Container(
height: MediaQuery.of(context)
.size
.height /
5,
width: MediaQuery.of(context)
.size
.width,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
20.0),
image: DecorationImage(
image: NetworkImage(
prod.picture))),
),
\]),
SizedBox(height: 20.0),
Text(
prod.name,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
maxLines: 1,
),
SizedBox(height: 5.0),
Text(
'Rp ${prod.price.toString()}',
style: TextStyle(
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold,
fontSize: 15.0,
color: Colors.grey),
),
SizedBox(height: 10.0),
Expanded(
child: InkWell(
onTap: () {
showModalBottomSheet(
isScrollControlled: true,
shape:
RoundedRectangleBorder(
borderRadius:
BorderRadius
.only(
topLeft:
Radius.circular(40),
topRight:
Radius.circular(40),
)),
context: context,
builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(
context)
.size
.height *
.75,
child: Padding(
padding:
const EdgeInsets
.all(12.0),
child:
SingleChildScrollView(
child: Column(
children: <
Widget>\[
Center(
child: Image
.network(
prod.picture)),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'${prod.name}',
style: TextStyle(
letterSpacing:
1.5,
fontSize:
15,
fontWeight:
FontWeight.bold),
),
),
),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'Rp ${prod.price}'),
),
),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'${prod.detail}'),
),
),
Center(
child:
RaisedButton(
child: Text(
'Add to cart'),
color: Colors
.lightGreen,
textColor:
Colors
.white,
onPressed:
() {
_addToCart(
prod.id,
prod.name,
prod.price,
prod.picture);
},
),
),
\],
),
),
),
);
});
},
child: Container(
width: 175.0,
decoration: BoxDecoration(
color:
prod.price.toString() ==
'Away'
? Colors.grey
: Colors.lightGreen,
borderRadius: BorderRadius
.only(
bottomLeft:
Radius.circular(
10.0),
bottomRight:
Radius.circular(
10.0)),
),
child: Center(
child: Text(
'Check Detail',
style: TextStyle(
color: Colors.white,
fontFamily:
'Quicksand'),
),
)),
))
\],
),
),
);
});
}
return Container(
child: Center(
child: new CircularProgressIndicator(),
),
);
},
),
),
),
\],
);
},
);
}
return Container(
child: Center(
child: new CircularProgressIndicator(),
),
);
},
),
);
}][1]
Is it possible to do it like this ? and than here is where the query to get the Data.
Please guys help me to solve this problem , your answer very help me a lot Thank you .
I dont know sometimes it just show properly but sometimes it will show like that error randomly .
I want my content change dynamicly by the category title
I was trying to recreate a design concept from this guy(https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept) but I'm getting some troubles with the ListView alignment or so I think.
What I'm trying to do is moving the List to the right without cutting the edges of the cards when I swipe.
I already tried with margin and padding but none of this applied to the container produces the results I want to obtain.Edges are cutted off when I swipe.
I leave here the Container with the ListView inside it.
Screenshoots of the actual app:
https://imgur.com/a/hJ96sEv
Container(
height: 350.0,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 3,
controller: scrollController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, position) {
return GestureDetector(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Container(
width: 250.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
cardsList[position].icon,
color: appColors[position],
),
Icon(
Icons.more_vert,
color: Colors.grey,
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 4.0),
child: Text(
"${cardsList[position].tasksRemaining} Tasks",
style:
TextStyle(color: Colors.grey),
),
),
Padding(
padding:
const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0),
child: Text(
"${cardsList[position].cardTitle}",
style:
TextStyle(fontSize: 28.0),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: LinearProgressIndicator(
value: cardsList[position]
.taskCompletion,
),
)
],
),
),
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
),
),
onHorizontalDragEnd: (details) {
animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 450));
curvedAnimation = CurvedAnimation(
parent: animationController,
curve: Curves.fastOutSlowIn);
animationController.addListener(() {
setState(() {
currentColor =
colorTween.evaluate(curvedAnimation);
});
});
if (details.velocity.pixelsPerSecond.dx > 0) {
if (cardIndex > 0) {
cardIndex--;
colorTween = ColorTween(
begin: currentColor,
end: appColors[cardIndex]);
}
} else {
if (cardIndex < 2) {
cardIndex++;
colorTween = ColorTween(
begin: currentColor,
end: appColors[cardIndex]);
}
}
setState(() {
scrollController.animateTo((cardIndex) * 256.0,
duration: Duration(milliseconds: 450),
curve: Curves.fastOutSlowIn);
});
colorTween.animate(curvedAnimation);
animationController.forward();
});
},
),
),
What I'm trying to do is moving the List to the right without cutting the edges of the cards when I swipe.
To achieve that goal you need a PageView instead of a ListView, that way you can swipe and "snap" the views when you reach and specific position:
PageView.builder(
itemCount: tasks.length,
controller: PageController(initialPage: 0, viewportFraction: 0.8),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0x40000000),
blurRadius: 10,
offset: Offset(0, 12),
),
],
),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(15),
child: Column(
children: <Widget>[
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(tasks[index].icon),
Expanded(
child: Container(
child: Align(
alignment: Alignment.topRight,
child: Icon(Icons.menu),
),
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"${tasks[index].tasks} tasks",
style: TextStyle(
color: Color(0xD0000000),
fontSize: 15,
),
),
SizedBox(height: 10),
Text(
"${tasks[index].title}",
style: TextStyle(
color: Color(0xD0000000),
fontSize: 24,
),
),
SizedBox(height: 10),
LinearProgressIndicator(
value: tasks[index].percentage,
backgroundColor: Color(0x300000FF),
)
],
),
),
),
],
),
),
),
),
);
},
)
The result of this implementation is something like this:
If you want to change the offset of the cards, you need to modify the value viewportFraction: 0.8 to anything you'd like. 1.0 is the value without offset.
You can find my full implementation over this Gist Github