Flutter: How to add spaceEvenly to richText widget? - flutter

My question is about flutter and dart language
I have this design:
And, I want to achieve this:
As you can see the icons and text it is separated
This is my code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RichText(
text: TextSpan(
style: GoogleFonts.questrial(),
children: [
WidgetSpan(
child: Icon(FontAwesomeIcons.checkDouble,
size: 40,
color: Color(0xffD7D7D7)),
),
TextSpan(
text: "Timer",
style: GoogleFonts.questrial(
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
color:Color(0xff3B3B3B),
),
)
),
WidgetSpan(
child: Icon(FontAwesomeIcons.squareXmark,
size: 40,
color: Color(
0xffD7D7D7)),
),
],
),
),
],
),
How to add some space between icons and text?
Thank you in advance.


Instead of RichText please use Row like
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(FontAwesomeIcons.checkDouble,size: 40, color: Color(0xffD7D7D7)),
Text("Timer", textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
color:Color(0xff3B3B3B),
),
),
Icon(FontAwesomeIcons.squareXmark, size: 40, color: Color(0xffD7D7D7)),
],
),

Related

Reduce space between specific children in column widget

What is this space in between and how do I remove/reduce it?
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/weather/cloudy-night.svg',
width: 300,
),
Text(
'Temperature',
style: GoogleFonts.inter(
fontSize: 75,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Datetime',
style: GoogleFonts.inter(
fontSize: 30,
color: Colors.white,
),
),
],
),
)

Add height to text
Text(
'Temperature',
style: GoogleFonts.inter(
fontSize: 75,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1,
),
),

Align text vertically flutter

I think the best way to explain my issue is with images, so this is what I want to achieve, dont mind the styling of either image.
But when I try to implement it myself, the bottom text gets indented.
Here are my code. Note I am new to flutter, so tips are also appreciated.
SizedBox(
width: 580,
height: 95,
child: Material(
color: panelBackground,
borderRadius: BorderRadius.circular(5),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 5),
RichText(
text: const TextSpan(
text: "Made by: ",
style: TextStyle(
fontSize: 14,
color: Color(0xFF838383),
),
children: [
TextSpan(
text: '/',
style: TextStyle(
color: Colors.amber,
fontWeight: FontWeight.bold)),
TextSpan(
text: '6u5t4v',
style: TextStyle(
color: Colors.amberAccent,
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic))
])),
],
),
Column(
children: [Text("rating here")],
),
const SidebarIcon(
icon: Icon(Icons.save),
)
],
),
),
),
),

Just set crossAxisAlignment to start
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),

you have to warp Text with Align Widget and given following code
Align(alignment:Alignment.topLeft, child:"your Widget")

reduce some spaces in my column widgets after using mainAxisAlignment.spaceBetween

I am trying to space out my widgets and it worked with mainAxisAlignment.spaceBetween under my column widget but i want to get some widgets closer to each other than some. How do I lessen the space between some specific wigets...Below is my flutter code
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
onPressed: () {
debugPrint('Search pressed');
},
icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),

Instead of using spacebetween you can just add some SizedBox()'s in between to have full control over the spacings

If you want to add custom spaces so the best way is to use SizedBox(). You can still use spacebetween but you can add sizebox in between and add height. Now you would say that it will not be responsive so for that in width you can use MediaQuery.of(context).size.height / Number which you want(This number will increase and decrease the height.
So something like this:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
onPressed: () {
debugPrint('Search pressed');
},
icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
SizedBox(
height: 30
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),

Instead of using spaceBetween you can use spaceAround or spaceEvenly. If it doesn't satisfy your need, use LayoutBuilder as parent widget [body:LayoutBuilder(...)].
You will have better control over UI using constraints.
LayoutBuilder(
builder: (context, constraints) => Column(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {
debugPrint('Search pressed');
},
// icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
SizedBox(
height: constraints.maxHeight * .2,// space you need
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),
],
),
)
More about LayoutBuilder

How do I handle this Text widget in Flutter?

I have a function that returns an AlertDialog. Here's a screenshot of what it looks like: https://i.stack.imgur.com/ZPVFI.jpg. And here's the code for it:
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
],
),
Container(
//width: 100,
child: Text(
details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
)
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
The rows containing "Data" and "Tipologia" are no issue. But after "Descrizione" there's a Text widget that contains a string of variable length. I'd like said text to be displayed on multiple lines, starting right after "Descrizione: " (just like "pratico" starts right after "Tipologia: "). How do I do it?
Edit: here's how it looks like now https://i.stack.imgur.com/fKajB.jpg

I'd suggest you go with RichText() instead of Row() with Texts
Just Like What follows
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
),
so your code should look like
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

All you have to do is make a couple simple changes to your code
details[5] != ''
? Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment
.start, // This will change how the multi-line text is aligned
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Flexible(
child: Text(
details[5],
style: test.GoogleFonts.quicksand(
color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
),
],
),
)
: Offstage(child: Text('invisible')),
Let me know if you need anything else

How to make my content responsive and not overflow on container

Here is what my container looks like on the emulator (Pixel 3) :
And now this is what it looks like on my Galaxy S9 :
The text of my column is overflowing. I thought it would "adapt" automatically, but it seems that it's not the case.
The code of the 4 elements that are overflowing is :
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Standard legroom',
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
)
],
)
],
),
Any idea on what should I change so that the text doesn't overflow its container ?
Thank you.

I would suggest to wrap your overflowing widgets with Expanded widget. Hope it will help.
UPD
I just used code above on some old device with mdpi resolution. To fix overflow I've added Expanded to the second Column, it solves the overflow issues, but it 'Standard legroom' text is still overflowing. So in case of really long String I would suggest to add overflow: TextOverflow.ellipsis for your Text.
In case you want to keep whole string, just add Expanded to the overflowing Text widget. But in this case there will be to lines text, and it could not be a solution.
Anyway here is my final code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Expanded(
child: Text(
'Standard legroom',
overflow: TextOverflow.ellipsis,
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
)
],
),
)
],
);
]2