How can I remove space between children in the row? - flutter

enter image description here
I would like to remove space between icon and text. How can I remove space between children in the row?/////////
/////////////////////////////////////////////////////////////////////////////////////////
Widget topSection() {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 180),
child: MaterialButton(
onPressed: () {},
color: Colors.black,
textColor: Colors.white,
child: Icon(
Icons.done,
size: 24,
),
shape: CircleBorder(),
)),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 180),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 4),
child: Text("Wellness Coaching",
style: TextStyle(
fontSize: 18,
fontFamily: "LatoR",
fontWeight: FontWeight.w900)),
),
Padding(
padding: EdgeInsets.only(left: 4),
child: Text("Connect to your data",
style: TextStyle(fontSize: 18, fontFamily: "LatoR")),
)
],
),
)),
],
);
}


mainAxisAlignment: MainAxisAlignment.end,
Try deleting this line.

Related

flutter: how to align time on the bottom right side of chat message

Here is my chat screen screenshot. I want to align time under chat message not from the start but on the bottom right side of the chat tile.
How can I do that in my code?
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Padding(
padding: const EdgeInsets.only(top: 2.0),
child: Image.network(senderPhoto,
))),
SizedBox(width: 20),
Text(peerName),
],
),
Container(
margin: EdgeInsets.only(right: 130),
padding: EdgeInsets.only(
top: 10, bottom: 10, left: 10, right: 10),
),
child: Text(message,
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.white,
fontSize: 16,
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(
timeSent.toDate(),
style: TextStyle(fontSize: 10, color: Colors.white),
),
),
],
),
],
))

Wrap your timeSent.toDate padding widget into a row, and give that a mainaxisAlignment of end, like this:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(
timeSent.toDate(),
style: TextStyle(fontSize: 10, color: Colors.white),
),
),
],
),
This will solve your problem.

Wrap the Text field in the Row and give the mainAxixAlignment to end. That will solve the problem.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Padding(
padding: const EdgeInsets.only(top: 2.0),
child: Image.network(senderPhoto,
))),
SizedBox(width: 20),
Text(peerName),
],
),
Container(
margin: EdgeInsets.only(right: 130),
padding: EdgeInsets.only(
top: 10, bottom: 10, left: 10, right: 10),
),
child: Text(message,
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.white,
fontSize: 16,
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(
timeSent.toDate(),
style: TextStyle(fontSize: 10, color: Colors.white),
),
),
],
),
],
));

How to automatically wrap text after N characters?

I'm displaying items with ListView.builder like this
As you can see, if really long names like "Speedy Motor Services 1234567890" is used, then the text beside it will be severely squeezed.
Code:
return ListView.builder(
itemBuilder: (context, position) {
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
child: FittedBox(
fit:BoxFit.fitWidth,
child: Text(_displayedList[position].name,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
child: Text(_displayedList[position].location,
style: TextStyle(fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
child: Text(_displayedList[position].distance.toString()+" KM", style: TextStyle(fontSize: 16.0),
),
),
],
),
Expanded(
child:Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//Expanded(),
Text(_displayedList[position].services.toString(),
style: TextStyle(color: Colors.grey), softWrap: true,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
),
),
],
),
)
),
],
),
Divider(
height: 2.0,
color: Colors.grey,
)
],
);
},
itemCount: _displayedList.length);
},))]),)
I tried using FittedBox, it didn't perform like I expect.
Is there any way to, say wrap the text each 15 characters?
What I want is something like this:

You just need to wrap the content with the expanded and use flex
Here is the code snnipet inside the column
Expanded(
flex : 2,
child :Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
child: FittedBox(
fit:BoxFit.fitWidth,
child: Text(_displayedList[position].name,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
child: Text(_displayedList[position].location,
style: TextStyle(fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
child: Text(_displayedList[position].distance.toString()+" KM", style: TextStyle(fontSize: 16.0),
),
),
],
),
),Expanded(
flex :1,
child:Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//Expanded(),
Text(_displayedList[position].services.toString(),
style: TextStyle(color: Colors.grey), softWrap: true,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
),
),
],
),
)
),
],
),
Now you need to just adjust the flex to the UI requirement.

List Item UI design with flutter

I am beginner for flutter.
I have one lock icon image, that need to display half within cell and half out of cell.
I want to create UI for ListItem.
I already write code as below, but it not work:
ListTile makeListTile() => ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 10.0),
title: Text(
"Item Title",
style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Expanded(
flex: 0,
child: Icon(Icons.settings, size: 20.0),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("120",
style: TextStyle(color: Colors.black54))),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("150",
style: TextStyle(color: Colors.black54))),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text("1",
style: TextStyle(color: Colors.black54))),),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
)
],
),
trailing:
new Stack(
children:[
Icon(Icons.lock, size: 20.0)
]),
onTap: () {
},
);
Please help me.
Thanks.

I suggest you try first yourself, because it will help to learn a different way to build the UI. If it's urgent then here is the code. But again I suggest trying yourself first. Everything in the dummy you need to change according to your requirement.
Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(width: 2.0, color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Item Name',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.close,
color: Colors.yellow,
size: 30.0,
),
)
],
),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.adjust,
color: Colors.yellow,
size: 20.0,
),
Text(
'Dummy Text',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
)
],
),
Row(
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(2.0)),
Text(
'1',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),Padding(padding: const EdgeInsets.all(2.0)),
Icon(
Icons.remove_circle,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(5.0))
],
)
],
),
)
],
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.group,
size: 30.0,
color: Colors.yellow,
),
)
],
)
This is how its look like for now:

1 use stack widget
2 add card with hight wight
3 add right side icon
4 add column
5 add row inside column

Flutter: How can i tap on item(product) and go to detail?

I'm using a socket io. I could listed all the items and made them clickable but when I try to go to detail it returns null. How can I go to detail of the item that I clicked?
I tr
return Padding(
padding: EdgeInsets.symmetric(horizontal:
5),
child: Column(
children: <Widget>[
InkWell( onTap: (){
MyNavigator.goToDetail(context);
},
child: Row(
children: <Widget>[
Expanded(
flex: 40,
child: Container(
padding: EdgeInsets.only(top:
2, left: 3,),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
x["symbols"].elementAt(index).name,
style: TextStyle(
color:
Colors.black54,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
Padding(
padding:
EdgeInsets.all(1),
),
Text(
x["symbols"]
.elementAt(index)
.lastUpdate,
style: TextStyle(
color:
Color(0xFF96979A),
fontSize: 13),
),
],
),
),
),

Flutter: How to place a button in the middle of 2 containers?

UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);

Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.