How can i display my firebase data on my text? Flutter - android

how can i display my firebase data on my text view in flutter? i have made a database where i store the users name in. What i want to do now is display that name from my database in firebase to my textview. i can't seem to figure it out.
this is my code for the textview
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: size.height * 1,
decoration: BoxDecoration (gradient: LinearGradient(colors: [
hexStringToColor("FFBEC8"),
hexStringToColor("fe98a8"),
hexStringToColor("FC98A7"),
hexStringToColor("#FF8799")
]
))),
SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 64,
margin: EdgeInsets.only(bottom: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 29,
backgroundImage: AssetImage(
'assets/logo.png'),
),
SizedBox(
width: 16,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'gfffff',
style: TextStyle(
fontFamily: "Montserrat Medium",
color: Colors.white,
fontSize: 20),
),
],
)
],
),
),
i don't know if this is enought code for you to know how i stored it
FirebaseFirestore.instance.collection("Userdata").doc(value.user!.uid).set({"name": _userNameTextController.text});

Related

Position of the button in custom list item

I am trying to [![make the button ][1]][1] at the corner of the listitem but its not working
this is what i tried
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
color: Colors.black12,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 100,
width: 100,
color: Colors.black,
child: Image.network(_items[index]['product_img']),
),
Container(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
child: Container(
padding: const EdgeInsets.all(8.0),
child: Text(_items[index]['product_name']),
),
),
Container(
padding: const EdgeInsets.all(8.0),
child: Text('M.R.P: ₹ ' +
_items[index]['product_price']),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Align(
alignment: Alignment.bottomRight,
child: Container(
padding: EdgeInsets.all(8),
child: ElevatedButton(
child: Text("Add +"),
onPressed: () =>
print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(32.0),
),
),
),
),
),
],
),
)
],
),
)
tried to set the size also but that is also not working , In one of the sugession i was told to put crossAxis also that i tried and still not working
[1]: https://i.stack.imgur.com/RQ1hY.png

How to make Row take full height of its children in Flutter?

I'm trying to create a UI for the contact list. But the row is taking the full height of its parent which is not what I want.
Here's my code
Container(
padding: EdgeInsets.all(5),
child: Material(
color: Colors.black,
elevation: 5,
borderRadius: BorderRadius.circular(20),
child: Container(
padding: EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/1700.jpg"),
radius: 25,
),
SizedBox(width: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Test", style: TextStyle(color: Colors.white,fontSize: 17, fontWeight: FontWeight.bold),maxLines: 1,),
SizedBox(height: 5,),
Text("Testing the test. ", style: TextStyle(color: Colors.white,fontSize: 15),maxLines: 1,)
],
),
],
),
),
),
);
I tried giving MainAxisSize min or max values but the results were unchanged. Is there any flutter alternative for wrap_content or match_parent (similar to native android development)
Need Help ;_;

i don't get what you really want but what i got is,
you can wrap it in a column , which is easy way to do that
child: Column (
children:[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/1700.jpg"),
radius: 25,
),
SizedBox(width: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Test", style: TextStyle(color: Colors.white,fontSize: 17, fontWeight: FontWeight.bold),maxLines: 1,),
SizedBox(height: 5,),
Text("Testing the test. ", style: TextStyle(color: Colors.white,fontSize: 15),maxLines: 1,)
],
),
],
),
]
)
please tell me the result

Flutter Row() - Align 3 widgets evenly

I'm trying to align 3 widgets inside a Row() evenly.
Just it is not working out as I need it to.
I really do not know how to fix this as I have been at it for hours.
I'm sure thet I'm missing something here.
I'm adding my code and a screenshot of current result.
Updated code!
The issue now seems to couse an out of bounds
New Screenshot
Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: CircleAvatar(
backgroundColor: randomColor,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: Text(
'John Doe',
style:
Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
child: Text(
'Online',
style: Theme.of(context)
.textTheme
.headline6
.copyWith(
color:Theme.of(context).primaryColor,
),
),
),
],
),
],
),
],
),
),

There are a few ways to do it. I modified your Code a bit so you can see it. Your Approach so far was completely fine, you just had to set a width for your Container. Otherwise Flutter doesn't know how to space the elements in the row. Alternatively you could just calculate the width of your Row, and get the width for the Children from that.
I would also recommend putting your Widgets in the Row into Containers for easier handling (like I did below). Hope it helps! Good luck.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}
EDIT:
If you want to position your different Elements more freely, I would give the Containers with your Text/Icon in them a fixed width (Calculated from your Row width) and then you can use the Containers 'alignment' property.
In this example I give the green and grey Containers each 20% of the Row and make their content align to the left, and the yellow Container 60% and align it's content to the right.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}

Simple, do like this.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: Text('One'),
),
RaisedButton(
onPressed: () {},
child: Text('Two'),
),
RaisedButton(
onPressed: () {},
child: Text('Three'),
)
],
),

Flutter Align the widget onto the top in ROW

I have an issue in ROW that one child has many items so it is large and another child has fewer items so its height is small so the less item is showing in the center of the ROW, so I need it to align to the top inside the ROW, you can have a look at the image.
Please have a look at my code as well.
rowList = Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: mainBodyList,
);
MAIN BODY LIST
Container(
width: screenWidth * 0.49,
child: Card(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
//width: 200,
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.black12,
),
child: Row(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.white,
child: SizedBox(
width: 40,
height: 40,
child:
/*Image.asset(
'assets/icons/doc_icon.png'),*/
Icon(
Icons.playlist_add_check,
color: AppTheme.primaryColor,
),
),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_localization.localeString(name),
style: TextStyle(color: AppTheme.primaryColor),
),
],
),
),
),
],
),
),
Container(
child: Column(
children: _dynamicListWidget(list),
),
),
],
),
),
);

You need to set crossAxisAlignment as CrossAxisAlignment.start
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: mainBodyList,
);

Custom Timeline view in flutter

I'm trying to make custom timeline view, Facing issue in alignment of text and circle.
The Code
Widget orderTimeLine() {
return Container(
decoration: BoxDecoration(color: Colors.white),
margin: EdgeInsets.only(
bottom: SizeConfig.safeBlockHorizontal * 3,
),
padding: EdgeInsets.only(
top: SizeConfig.safeBlockHorizontal * 3,
left: SizeConfig.safeBlockHorizontal * 7,
bottom: SizeConfig.safeBlockHorizontal * 3,
),
child: Column(
children: <Widget>[
timelineRow("Order Confirmed", orderDateTime),
timelineRow("Order Inprocess", orderDateTime),
timelineRow("Order Processed", ""),
timelineRow("Order Shipped", ""),
timelineLastRow("Order Delivered", ""),
],
),
);
}
Widget timelineRow(String title, String subTile) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 18,
height: 18,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Text(""),
),
Container(
width: 3,
height: 50,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.rectangle,
),
child: Text(""),
),
],
),
),
Expanded(
flex: 9,
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('${title}\n ${subTile}',
style: TextStyle(
fontFamily: "regular",
fontSize: 14,
color: Colors.black54)),
],
),
),
],
);
}
Widget timelineLastRow(String title, String subTile) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 18,
height: 18,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Text(""),
),
Container(
width: 3,
height: 20,
decoration: new BoxDecoration(
color: Colors.transparent,
shape: BoxShape.rectangle,
),
child: Text(""),
),
],
),
),
Expanded(
flex: 9,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('${title}\n ${subTile}',
style: TextStyle(
fontFamily: "regular",
fontSize: 14,
color: Colors.black54)),
],
),
),
],
);
}
Expected:
Getting

You could do this with timeline_tile.
Also, the beautiful_timelines repository contains some examples built with this package.
Web demo

You need to set crossAxisAligment for rows:
Widget timelineRow(String title, String subTile) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, # <- this

Categories

Resources