I have my own style:
final myStyle = GoogleFonts.roboto(
height: 1.2,
color: Colors.black54,
fontWeight: FontWeight.w300,
fontSize: 16
);
I want to use it later in two TextWidget, but with different FontWeight property, so I thought about using copyWith method like this:
Text(
"myText",
style: myStyle.copyWith(fontWeight:FontWeight.w400 ),
),
But it's not working. Text is not bolded (by FontWeight.w400)
Default value of fonts is w400 already so it will look as it is not working but it is, so I suggest you to try a different FontWeight so you can see the difference. By the way you are overriding it properly already.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
class CATextStyle extends TextStyle {
static const style = TextStyle();
//const CATextStyle._(TextStyle style) : super(style);
CATextStyle._style(TextStyle style) : super(style);
}
abstract class CATextStyles {
static const _parent = TextStyle();
static final headLine1 =
CATextStyle._style(_parent.copyWith(color: Colors.amber));
}
I want to created class like this but is showing error
i want to know how to use only one textstyle class and reuse that using copywith method
Here is how I do this, Create a separate Directory and name it Constants and inside this create a dart file with the name appstyles.dart. In this class declare all your styles just like the below code.
class AppStyles{
static TextStyle headline1 = TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w300,
fontSize: 40,
);
static const TextStyle headline2 = TextStyle(
fontWeight: FontWeight.w400,
fontSize: 30,
);
static const TextStyle bodyText1 = TextStyle(
fontWeight: FontWeight.w300,
color: Colors.black,
fontSize: 16,
);
static const TextStyle bodyText2 = TextStyle(
color: Colors.black,
fontWeight: FontWeight.w300,
fontSize: 14,
);
}
The same is you use for Container decoration etc e.g
static final kRoundedTContainer = BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(10),
));
And here is how to use these styles
Text(
'Hello World',
style: AppStyles.headline1,
)
Container(
decoration: AppStyles.kRoundedTContainer,
height: 200,
width: 200,
)
You can create TextStyle global class like this.
class CommonFontStyle {
static font12WithRegular({color}) {
return TextStyle(
fontSize: Dimensions.fontSize12,
fontFamily: 'Montserrat Regular',
fontWeight: FontWeight.w500,
color: color);
}
static font12WithMedium({weight}) {
return TextStyle(
fontSize: Dimensions.fontSize12,
fontFamily: 'Montserrat Medium',
fontWeight: weight,
);
}
}
and for use of this you have to add simply this font12WithRegular() to your textStyles.
child: Text(
"Okay",
style: CommonFontStyle.font12WithRegular(),
textAlign: TextAlign.center,
),
I would like to display the emoji 🤑 while only having the hexadecimal value of it.
var line = "testing is forever 🤑";
Text(
"${line}",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0xFF008080)),
),
Try below code hope its helpful to you. Refer Unicode Charecter here
Text(
'\u{1F602}',
style: TextStyle(
fontSize: 25,
),
),
Your Result screen->
Or in VS Code Pressed Window + . and open the emoji picker box choose your wanted emoji and select it
Text(
'🤑',
style: TextStyle(
fontSize: 30,
),
),
Your result screen->
I was able to fix this by using the HtmlCharacterEntities and the HtmlUnescape
HtmlUnescape().convert(HtmlCharacterEntities.decode("testing is forever 🤑"))
In my home page in build widget before return statement I use below code.
If I create an another widget in my home page I have to copy below code before each return statement. If you create another stateless/stateful dart file I need to copy below code again.
My question is How to create a global TextStyle in Flutter? I don't want to change Theme data, all want to use my TextStyle across the my flutter project. Thanks.
TextStyle myNormalStyle = TextStyle(
fontSize: SizerUtil.deviceType == DeviceType.Mobile ? 14.0.sp : 13.0.sp,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Colors.black);
You can easily you that using by using Theme. As described on the flutter docs you can use it like :
MaterialApp(
title: title,
theme: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);
or you can also use DefaultTextStyle widget to provide a default TextStyle to all the children of this widget. Read more about DefaultTextStyle.
1º create a class file:
import 'package:flutter/material.dart';
class MyTextStyle {
static const TextStyle textStyle = TextStyle(
color: Color.fromARGB(255, 247, 240, 201),
fontSize: 20,
fontWeight: FontWeight.bold,
);
}
2º import and use in your screen:
import 'package:MyApp/MyTextStyle.dart';
const Text(
'You have pushed the button this many times:',
style: MyTextStyle.textStyle,
),
so i've been struggling to change the color of my button from green to red for my flutter app. Most of the online resources are confusing me. This is my following code.
new RaisedButton(key:null, onPressed:buttonPressed,
color: Colors.green,
child:
new Text(
"10:00 A.M. - 11:00 A.M.",
style: new TextStyle(fontSize:15.0,
color: const Color(0xFF000000),
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
)
),void buttonPressed(){
}
I want to click it and it turn green, or even better. Click it, so it turns gray. Then click another button that states "confirm", and it would make all the grey buttons that have been clicked red. Regardless, I'm just trying to understand how to make the button change color after being clicked.
Basically, what you need to do is,
Make RaisedButton color a class-level variable instead of constant as you have now.
Initialize that variable to some color value in initState method.
In the onPressed handler of RaisedButton, do the following:
Change that variable to some color value of your liking.
Trigger Repaint (so that the new color gets painted) i.e. call setState method.
Last but not least, you'll need to have all the code above part of a stateful widget.
Hopefully, it's clear enough, let us know if you'd need some code sample as well.
bool turnToRed = false;
bool colorIsGreen = true;
RaisedButton(key:null, onPressed: (){
setState((){
colorIsGreen = !colorIsGreen;
});
},
color: colorIsGreen ? Colors.green :turnToRed ? Colors.red : Colors.grey,
child:
new Text(
"10:00 A.M. - 11:00 A.M.",
style: new TextStyle(fontSize:15.0,
color: const Color(0xFF000000),
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
)
),
RaisedButton(key:null, onPressed: (){
setState((){
turnToRed = !turnToRed;
});
},
color: Colors.red
child:
new Text(
"Confirm",
style: new TextStyle(fontSize:15.0,
color: const Color(0xFF000000),
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
)
),
How to make my own text theme style?
I only find the default text theme like this but it's not enough.
textTheme: TextTheme(
body1: TextStyle(),
body2: TextStyle(),
button: TextStyle(),
caption: TextStyle(),
display1: TextStyle(),
display2: TextStyle(),
display3: TextStyle(),
display4: TextStyle(),
headline: TextStyle(),
overline: TextStyle(),
subhead: TextStyle(),
subtitle: TextStyle(),
title: TextStyle(),
),
I want for example have a text with line through then some other have underline etc
I was thinking to override the body2 for underline style then how to define another style for line through?
Kind Regards
You can create a class to hold your style and then call it from anywhere in your app.
class CustomTextStyle {
static TextStyle display5(BuildContext context) {
return Theme.of(context).textTheme.display4.copyWith(fontSize: 192.0);
}
}
And the use it as
Text(
'Wow',
style: CustomTextStyle.display5(context),
),
Look at question Flutter: Define custom TextStyles for use throughout the app that contains the complete answer referred here.
Here is an alternative using the extension method with the lineThrough:
extension CustomStyles on TextTheme {
TextStyle get error => const TextStyle(decoration: TextDecoration.lineThrough, fontSize: 20.0, color: Colors.blue, fontWeight: FontWeight.bold);
And then you can use it like this:
Text("your text", style: Theme.of(context).textTheme.error)
Since the release of dart 2.7, you can also use an extension method:
extension CustomStyles on TextTheme {
TextStyle get error {
return TextStyle(
fontSize: 18.0,
color: Colors.red,
fontWeight: FontWeight.bold,
);
}
}
Then you can use it like this:
Text(error, style: Theme.of(context).textTheme.error)
You can set the TextStyle() options for further customization. For the specs you need set the decoration option. For underlining:
TextStyle(decoration: TextDecoration.underline)
and for line through:
TextStyle(decoration: TextDecoration.lineThrough)