I have this flutter app with a Scaffold in which i have put the following container.
This container contains the timer's minute and seconds, and two buttons.
I am trying to avoid the Text widget to re-centers when Timer is active. This seems to happens because the Text widget changes size when a different digit is showed.
I tried to wrap the Text widget with an Expanded widget, but it didn't solve the issue. How can i solve this?
Container(
height: size.height * 0.40,
width: size.width * 0.80,
decoration: BoxDecoration(
color: Color(0xFFf4f6fa),
borderRadius: BorderRadius.circular(29.5)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 80,
color: Color(0xff7165E3),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// STOP BUTTON
Container(
decoration: BoxDecoration(
color: Colors.grey[800],
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.grey[800]),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
setState(() {
_stopTimer();
});
},
child: Container(
alignment: Alignment.center,
child: Text(
"Annulla",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
// START BUTTON
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Color(0xff7165E3)),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
_startTimer();
},
child: Container(
alignment: Alignment.center,
child: Text(
"Avvia",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
],
),
],
),
),
This happens because of the font you are using.
The font you use dose not have negative space. Try to use some font with negative space adjusted. I Roboto Mono is a font that have negative space.
In the above pic the characters take equal space.
pubspec.yaml
google_fonts: ^2.1.0
sport_screen.dart
Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: GoogleFonts.robotoMono(
fontSize: 80.0,
color: const Color(0xff7165E3),
),
)
refer here for more about fonts and negative space.
Default Font
Monospace Font
You can use FontFeature.tabularFigures()
Example:
Text(
timerText,
style: TextStyle(
fontFeatures: [
FontFeature.tabularFigures(),
],
),
),
Related
I have two seperate text in an container and I need a icon to come right to this text and need to be center aligned to both this text. I dont know how to make this happen. Am sorry If this question is already asked but I can't that question. Help me to understand how that works.
You can see in the buttom i have both price text and an cart icon centered to them in right. How can I achieve this please help me.
I will share the code for the rest . If you can make the code better that will help too...
Container(
width: 430,
height: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Column(
children: [
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
]),
Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(width: 30,),
const Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
const SizedBox(height: 05),
Row(
children: [
const SizedBox(width: 35),
const Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
],
)
],
)
),
I've edited your code:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),),
const SizedBox(height: 10,),
const Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
const SizedBox(height: 10,),
Center(
child: Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
),
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
],
),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
],
),
)
)
some notes:
try to use padding instead of SizedBox for setting padding sides. because SizedBox is using for setting spaces between something ...
crossAxisAlignment default is center if you want to make it start you should use CrossAxisAlignment.start
do not use static sizes for Container if it is not force let it fill itself
mainAxisSize default is max but here you should use MainAxisSize.min to let it use its real size of the widget.
if you had any questions i'm here.
happy coding...
Container(
width: 430,
height: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Column(
children: [
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
]),
Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(width: 30,),
const Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
const SizedBox(height: 05),
Row(
children: [
const SizedBox(width: 35),
const Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
]),
),
I want to display a bold icon in my app, but I don't want to use a material icon since it would display a splash effect when I press on it, and I don't want that. Is there a method to make icons wider in Flutter?
My icon:-
My desire result:-
Here is my code:-
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
Icons.add,
color: DarkBlueColor,
),
),
Try to use font_awesome_flutter.
Example code:
FaIcon(FontAwesomeIcons.plus),
You can use icons inside the text widget and assign font size, font weight, font family and package also this makes your icon bold
Text(
String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
style: TextStyle(
inherit: false,
color: Colors.red,
fontSize: 30.0,
fontWeight: FontWeight.w700,
fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
package: CupertinoIcons.exclamationmark_circle.fontPackage,
),
)
If you can achieve the effect by simply removing the splash/ripple, you can set ThemeData.splashColor to transparent.
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: Widget(), // Set your button here
);
Otherwise, if what you meant on "width" of the icon is "boldness" or "weight". Here's a workaround for that.
You can use custom icon just download the add ' + ' icon online and paste it in your assets folder.
Now use that icon like this --
Image.asset('assets/add.png', width: 25, height: 25),
Now you can set the width according to your need.
And if you want to get rid of that splash effect just set
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
simply you can set the splash color to transparent
You can use, Container and RichText combo. As shown below.
InkWell(
child: Container(
width: 150,
height: 50,
decoration: BoxDecoration(color: Colors.green,border: Border.all(width: 1, color: Colors.green),borderRadius: BorderRadius.circular(25) ),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(
Icons.add,
color: Colors.indigo,
size: 34,
),
Text(
"Add Offer",
style: TextStyle(color: Colors.indigo, fontSize: 20),
),
],
),
),
onTap: (){
doSomething();
},
),
void doSomething() {}
InkWell(
onTap: () {
print("object");
},
child: SizedBox(
child: Material(
shape: const CircleBorder(),
child: Container(
height: 50,
width: 180,
decoration: BoxDecoration(
color: Color(0xff59e7ba),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(25.0),
),
child: ClipRRect(
child: Align(
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.add,
size: 40,
color: Colors.black,
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
"Add Offer",
style: TextStyle(
//set your fonts
//fontFamily: "Font2",
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
),
),
),
),
),
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: InkWell(
onTap: () {},
child: Container(
height: 50,
width: 180,
decoration: BoxDecoration(
color: Color(0xff59e7ba),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(25.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.add,
size: 40,
color: Colors.black,
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
"Add Offer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
), // Set your button here
)
I'm trying to replicate a flutter design that looks like this, I was able to achieve something similar by using Listtile widget, my only issue was that the leading icon didn't align vertically with the title. Please is there any other way to achieve this? I tried using a row widget but the multiple line text won't fit into the screen.
You can try this code
Container(
color: Colors.white,
padding: const EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: Icon(
Icons.message,
color: Colors.white,
),
),
SizedBox(width: 10,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Message", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16
),),
Text("How to create row with multiple lines in flutter How to create row with multiple lines in flutter")
],
),
),
],
),
),
Result:-
Please let me know if it work.
You can try as well as my code.
Widget ListItem({
String imageUrl,
String text,
String caption,
double imageSize = 50,
double horizontalSpacing = 15,
double verticalspacing = 20,
bool showDetailIndicatorIcon = true,
GestureTapCallback onTap,
}) {
return InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.only(top: 2),
padding: EdgeInsets.symmetric(
horizontal: horizontalSpacing, vertical: verticalspacing),
child: Row(
children: [
ClipRRect(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
height: imageSize,
width: imageSize,
),
borderRadius: BorderRadius.circular(imageSize / 2),
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
text,
style: TextStyle(
color: ColorRes.lightWhite,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 5),
Text(
caption,
style: TextStyle(
color: ColorRes.grey,
fontSize: 12,
fontWeight: FontWeight.normal,
),
maxLines: 3,
),
],
),
),
),
],
),
),
);
}
I hope it's work. Please let me know.
image link since i'm not allowed to post images yet
I'm trying to create an app but the two texts 'hello and mr '' are in the center even when I've not added the center widget and why do they have that amount of space between them. the app title had a massive bottom padding that i had to remove it.' the app sample is in the image above.
I just want the two to stack above each other in the top left corner, and the space between them to reduce, Here's my code:
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'Hello,',
style: Theme.of(context)
.textTheme.headline4
.apply( color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
),
and the image
image link since i'm not allowed to post images yet
One solution to your problem would be to change the crossAxisAlignment property of your column to CrossAxisAlignment.start
I would also recommend, if you intend to group them together, to put your two text widgets together in a column themselves.
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello,',
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
],
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
)
Something like This ? Hope that it helped.
Try to use text align property of Text widget you can find more in the link. Text widget documentation
Example:
Text("data,",textAlign: TextAlign.left,)
The problem is you are not giving a crossAxisAlignment to the top-most column, so by default, it is centred.Add this to the top-most Column
crossAxisAlignment: CrossAxisAlignment.start,
Try to build a custom button with X sign on the right, but when I add this to a Wrap widget, it used up the entire row.
this is the code for building the button:
Material _buildDeleteFilter(String caption, Function onTap) {
return Material(
color: Colors.orange,
borderRadius: BorderRadius.circular(5),
child: InkWell(
onTap: onTap,
splashColor: Colors.deepOrange,
child: Container(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: Row(
children: <Widget>[
Text(
caption,
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
),
Icon(
Icons.close,
size: 20,
color: Colors.white,
)
],
),
),
),
);
}