so I'm new to flutter. Was trying to separate the address displayed with comma.
Am I missing something?
Here's my code:
Widget buildUserAddress() {
var adr = address;
adr.toString().split(',').reversed.toList();
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: Text(
adr,
maxLines: 3,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
),
),
);
}
Your variable "adr" is of type list, so you need to give the index to get the value.
You can do something like this inside your buildUserAddress().
Widget buildUserAddress(String getAddress) {
List adrList = getAddress.toString().split(',').reversed.toList();
return Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: ListView.builder(
itemCount: adrList.length,
itemBuilder: (BuildContext ctx, index) {
return Text("${adrList[index]}");
},
),
);
}
Related
This is my first code:
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: Text(
" i want get data here",
style: TextStyle(
color: Color(0xFF737599),
),
),
),
thats my second code :
return Container(
color: Colors.white,
child: Container(
height: size.height * 0.4,
child: StreamBuilder<QuerySnapshot>(
stream: _statusService.getStatus(),
builder: (context, AsyncSnapshot snapshot) {
return !snapshot.hasData
? CircularProgressIndicator()
: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
DocumentSnapshot movies = snapshot.data.docs[2];
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: Text(
"${movies['description']}",
style: TextStyle(
fontSize: 10,
color: Color(0xFF737599),
),
),
),
);
});
}),
),
);
I want to pull a text from firebase. I managed to do this (on a different dart page), but how can I integrate it into the code I wrote before (there was a part where I printed the text manually without using firebase, how can I integrate it into that part).
In short, I want to integrate the text part in the first code, the part where I get data from the pharaoh in the second code.
I'm sharing both parts of the code, can you help?
Ok this is not a best practice what you do but you can create class attribute and you can assgin'it in your second code like
var yourVar = "";
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: (yourVar!="")?Text(
yourVar,
style: TextStyle(
color: Color(0xFF737599),
),
) ?null,
),
```
in your second code
```
return Container(
color: Colors.white,
child: Container(
height: size.height * 0.4,
child: StreamBuilder<QuerySnapshot>(
stream: _statusService.getStatus(),
builder: (context, AsyncSnapshot snapshot) {
return !snapshot.hasData
? CircularProgressIndicator()
: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
DocumentSnapshot movies = snapshot.data.docs[2];
setState(() { yourVar= newValue; });
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 0,
),
child: Text(
"${movies['description']}",
style: TextStyle(
fontSize: 10,
color: Color(0xFF737599),
),
),
),
);
});
}),
),
);
I have designed a horizontal scroll bar. here you can see my code. I want to design this bar according to the left side UI. The right side image shows my implementation so far. how do I design this with separate colours as the image shows?
final List<String> data = ["FRUIT AND BERRIES", "VEGETABLES", "BREAD","MILK"];
Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: 50,
child: ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: Color(0xffEEEACF), text: data[index]), //try to change text colour from here but it change whole box color. :(
separatorBuilder: (context, index) {
return const SizedBox(
width: 5,
);
},
),
),
],
),
),
//horizontal scroll bar
Widget itemW({
required String text,
required Color color,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: color,
),
child: Text(text),
);
}
You can use a map to map items with colors.
final Map<String,Color> itemColors = {
"FRUIT AND BERRIES" : Color(0xffEEEACF),
"VEGETABLES": Color(0xffFFFFFF),
"BREAD" : Color(0xff000000),
"MILK" : Color(0xffFF0000)
}
full Code:
final List<String> data = ["FRUIT AND BERRIES", "VEGETABLES", "BREAD","MILK"];
final Map<String,Color> itemColors = {
"FRUIT AND BERRIES" : Color(0xffEEEACF),
"VEGETABLES": Color(0xffFFFFFF),
"BREAD" : Color(0xff000000),
"MILK" : Color(0xffFF0000)
}
Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: 50,
child: ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: itemColors[data[index]]!, text: data[index]), //try to change text colour from here but it change whole box color. :(
separatorBuilder: (context, index) {
return const SizedBox(
width: 5,
);
},
),
),
],
),
),
//horizontal scroll bar
Widget itemW({
required String text,
required Color color,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: color,
),
child: Text(text),
);
}
I am trying to create a dialog to show a list of reviews on click event. However, the code below always generate an extra bottom padding after each gridview item and i was unable to find out which widget caused this extra padding.
Hopefully, someone can help me point me to the right direction. thanks much!
showDialog(
context: context,
builder: (_) {
return Dialog(
backgroundColor: Colors.orange[200],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
elevation: 16,
child: Container(
padding: EdgeInsets.only(bottom: 50),
child: StreamBuilder<QuerySnapshot>(
// stream: firestoreInstance.collection("requests").snapshots(),
stream: streamForReviews,
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return new Text('');
case ConnectionState.waiting:
return new Text('');
default:
if (snapshot.hasError) {
return new Text('error');
}
if (snapshot.data != null) {
WidgetsBinding.instance!.addPostFrameCallback((_) {
if (snapshot.data!.docs.length > 1) {
} else if (snapshot.data!.docs.length == 1) {
} else {}
});
return GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
),
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: EdgeInsets.zero,
// itemCount: snapshot.data.documents.length,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
// List rev = snapshot.data.documents.reversed.toList();
String comments =
snapshot.data!.docs[index].get("comments");
String reviewerName =
snapshot.data!.docs[index].get("name");
num rating = snapshot.data!.docs[index].get("rating");
String downloadURL =
snapshot.data!.docs[index].get("imageURL");
Timestamp reviewTimeStamp =
snapshot.data!.docs[index].get("createdDTG");
DateTime reviewDateTime =
DateTime.parse(reviewTimeStamp.toDate().toString());
DateFormat reviewDateTimeFormat =
new DateFormat('dd MMM yyyy');
String reviewDateTimeString =
reviewDateTimeFormat.format(reviewDateTime);
return Container(
padding: EdgeInsets.symmetric(
vertical: 20, horizontal: 20),
child: Column(
children: [
SizedBox(height: 10),
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.network(
downloadURL,
fit: BoxFit.fitHeight,
height: 100,
),
),
SizedBox(width: 10),
Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment:
// CrossAxisAlignment.stretch,
children: [
Text(reviewDateTimeString,
style: TextStyle(
color: Colors.orange[800],
fontSize: 18,
// fontStyle: FontStyle.italic,
)),
SizedBox(height: 2),
Text(reviewerName,
style: TextStyle(
color: Colors.orange[800],
fontSize: 18,
)),
SizedBox(height: 2),
RichText(
text: TextSpan(
// style: Theme.of(context).textTheme.body1,
children: [
WidgetSpan(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 2.0),
child: Icon(
Icons.star,
color: Colors.orange,
size: 18,
),
),
),
TextSpan(
text: rating.toString(),
style: new TextStyle(
fontSize: 16.0,
color: Colors.orange[800],
),
),
],
),
),
SizedBox(height: 2),
],
),
Align(
alignment: Alignment.centerLeft,
child: Text(comments,
style: TextStyle(
color: Colors.orange[800],
fontSize: 16,
// fontStyle: FontStyle.italic,
)),
),
Divider(color: Colors.orange, thickness: 1),
],
),
);
},
);
} else {
return new Text('data null');
}
}
},
),
));
});
You need to change the value of childAspectRatio in SliverGridDelegateWithFixedCrossAxisCount widget. The default is 1, which means that grid items will have a width that is equal to their height. In your case, the width is approximately 2x of the height. your code should be like this:
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 2, //try to change this number to see how it changes the dimensions of the grid item
What im trying to do is filling a card with the necessary data it needs which is userImage and UserFirstname from my users collection and also data from my subcollection(carReviews)in my carInfo collection where i store the necessary review data:
subcollection(carReviews)
users collection
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('carInfo')
.doc(snapshot.data!.docs[index]
.get('CaradvId'))
.collection('carReviews')
.snapshots(),
builder: (context, snapshot5) {
return StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('users')
.where('uid',
isEqualTo: snapshot5
.data!.docs[index]
.get('reviewerId'))
.snapshots(),
builder: (context, snapshot6) {
return Container(
padding: EdgeInsets.symmetric(
horizontal: 5),
height: MediaQuery.of(context)
.size
.height *
0.225,
child: ListView.builder(
shrinkWrap: true,
scrollDirection:
Axis.horizontal,
itemCount: snapshot5
.data!.docs.length,
itemBuilder:
(BuildContext context,
int index) {
DateTime date = snapshot5
.data!.docs[index]
.get('reviewDate')
.toDate();
String dateString =
DateFormat(
'dd MMM yyyy')
.format(date);
return ConstrainedBox(
When i print snapshot5.data!.docs[index].get('reviewerId') i get the two ids who has reviewed which what is expected however the snapshot6.data!.docs.length is 1 which doesn't make any sense!
I have tried using both snapshot6.data!.docs.length & snapshot5.data!.docs.length for the itemcount if i use snapshot6.data!.docs.length i get just one item in list with no errors and if i use snapshot5.data!.docs.length i get range error because it goes through all reviews which are just 2. Me using "hasdata" if statment wont change the output i have tried.
how it looks when i use snapshot5.data!.docs.length
how it looks when i use snapshot6.data!.docs.length
Card(
elevation: 2,
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.start,
children: [
Container(
padding: EdgeInsets.only(
left:
12.5,
top:
12.5),
height:
55,
width:
55,
child:
CircleAvatar(
backgroundImage:
NetworkImage(
snapshot6.data!.docs[index].get('userImage'),
), //userimage
radius:
40,
),
),
Container(
padding: EdgeInsets.only(
top:
15),
child:
Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Container( padding: EdgeInsets.only(
left:
5),child:
RatingBar.builder(
initialRating: double.parse(snapshot5.data!.docs[index].get('reviewRating')),
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
updateOnDrag: false,
itemCount: 5,
itemSize: 14,
itemPadding: EdgeInsets.symmetric(vertical: 0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(rating);
},
),
),
SizedBox(height: 7.5),
Row(
children: [
Container(
padding: EdgeInsets.only(
left: 7.5,
),
child: Text(
snapshot6.data!.docs[index].get('userFirstname'),
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w800,
color: Colors.black87,
),
),
),
Container(
padding: EdgeInsets.only(left: 2.5),
child: Text(
dateString,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w800,
color: Colors.black54,
),
))
],
)
],
)),
],
),
Container( padding: EdgeInsets.only(
left:
12.5,
top:
12.5),
height: 130,width: MediaQuery.of(
context)
.size
.width *
0.75,
child: Text(snapshot5
.data!
.docs[
index]
.get(
'reviewContent')),
)
],
),
)),
I am using List.generate() to create a list of emojis for each category from a JSON object. I have a search bar that is used to narrow down the search results. If one of the emoji keywords contains the characters in the search bar it should only display that emoji.
The problem is SizedBox.shrink() is not empty like I want it to be.
Isn't SizedBox.shrink() the recommended way to return an empty widget?
Thanks!
Padding(
padding: EdgeInsets.only(left: 16, right: 16, top: 8),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
padding: EdgeInsets.only(left: 12, right: 12),
color: Colors.grey[200],
child: TextField(
onChanged: (change) {
setState(() {
searchTarget = change;
});
},
controller: searchController,
cursorColor: Colors.black,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search for Icon..."),
),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(
top: 16,
left: 16,
),
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: this.jsonData.keys.length,
itemBuilder: (context, index) {
return Column(
children: [
Padding(
padding: EdgeInsets.only(
bottom: 16, top: (index == 0) ? 0 : 16),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
this.jsonData.keys.toList()[index],
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 8,
children: List.generate(
this.jsonData[this.jsonData.keys.toList()[index]].length, (jndex) {
var emoji = this.jsonData[this.jsonData.keys.toList()[index]][jndex];
if (this.searchTarget.length > 0 || this.searchTarget != " "){
for (int i = 0; i < emoji['keywords'].length; i++){
if (emoji['keywords'][i].contains(this.searchTarget)){
return Text(
emoji['emoji'],
style: TextStyle(fontSize: 25),
);
}
}
}
return SizedBox.shrink();
}),
),
],
);
},
),
),
),
I solved it. Instead of building the grid view directly I created a method that generated the list itself.