Flutter TextStyle / fontSize - flutter

I would like the TextStyle / fontSize to simplify my app.
for this it would be necessary to make the line "
fontSize: Get.width * .030,
" of the attached code available, similar to the color "
{Color color = Colors.white}
This is the code I want to customize ...
TextStyle _textStyle({Color color = Colors.white}) {
return GoogleFonts.getFont(
'Unica One',
fontSize: Get.width * .030,
color: color,
letterSpacing: 0.5,
);
}
And it should look something like that, but unfortunately I don't know exactly how to put it together correctly
TextStyle _textStyle({Color color = Colors.white}{FontSize fontSize = Get.width * .030}) {
return GoogleFonts.getFont(
'Unica One',
fontSize: fontSize,
color: color,
letterSpacing: 0.5,
);
}

Text class with style,
class StoryText extends Text {
StoryText(String title, {Color mColor, double mFontSize})
: super(title,
style: GoogleFonts.getFont(
'Unica One',
fontSize: mFontSize,
color: mColor,
letterSpacing: 0.5,
));
}
// Use of above class
StoryText('title', mColor: Colors.red, mFontSize: Get.width * .030,),

Need to change FontSize type to double.
TextStyle _textStyle({Color color = Colors.white ,double fontSize = Get.width * .030}) {
return GoogleFonts.getFont(
'Unica One',
fontSize: fontSize,
color: color,
letterSpacing: 0.5,
);
}```

Can you maybe tell me how I use this in the "hintText:" of a "TextField ("?
when I do it like this
hintStyle: StyledText (
color: Colors.black,
),
then I get the error
"The argument type 'StyledText' can't be assigned to the parameter
type 'TextStyle?'. (Documentation)"
I have adapted your code so that it works so far, thank you again for that 😊 .. would only like to use it with the "hintStyle"
import 'package: flutter / cupertino.dart';
import 'package: flutter / material.dart';
import 'package: google_fonts / google_fonts.dart';
class StyledText extends Text {
StyledText (
String title,
{
double fontSize = 10.5,
color = Colors.white,
fontWeight = FontWeight.w100,
letterSpacing = 0.5,
textAlign: TextAlign.center,
})
: super (title,
style: GoogleFonts.getFont (
'Unica One',
fontSize: fontSize,
color: color,
fontWeight: fontWeight,
letterSpacing: 0.5,
),
textAlign: textAlign,
);
}

Related

How to add textstyle in global class using flutter [closed]

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,
),

How to change Text color with Get in Flutter

How can i change my Texts color immedietly
TextStyle get headingStyle {
return GoogleFonts.lato(
textStyle: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
color:Get.isDarkMode?Colors.white:Colors.black);
}
color changes when i hot reloud but doesn't change when i clicked the button(button changes isDarkMode )
Try put the Obx.
It's create an observable in your code
TextStyle get headingStyle {
return Obx(() => GoogleFonts.lato(
textStyle: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
color:Get.isDarkMode?Colors.white:Colors.black));
}

How to use both the text color and foreground color properties together

I would like to know if there's any way to first set the text color of a text and then apply a stroke color to it using the foreground property. I'm looking to make something like this:
Here's the code that I have written. Please note that this is a date range picker calendar(3rd party plugin called syncfusion_flutter_datepicker) and I would like to apply the above style to all the weekend days.
SfDateRangePicker(
monthCellStyle: DateRangePickerMonthCellStyle(
weekendTextStyle: TextStyle(
foreground: Paint()
..style = PaintingStyle.stroke
..color = PrimaryColor
..strokeWidth = 2,
shadows: [
Shadow(
color: PrimaryColor,
blurRadius: 5,
offset: Offset(0, 0))
],
// color: Colors.white, //I would like to set the text color to white
fontSize: 25,
fontWeight: FontWeight.bold),
))
If I try using both the properties, this is the error I get
Assertion failed:
..\…\painting\text_style.dart:510
color == null || foreground == null
"Cannot provide both a color and a foreground\nThe color argument is just a shorthand for \"foreground: new Paint()..color = color\"."
Is there any workaround to this?
The only way to add a "border" to your text would be to put your Text widget inside a Stack and render 2 Text widget, one for the border and another one to render the text in the color you want and render the shadows.
Code Sample
class OutlinedText extends StatelessWidget {
final String text;
final Color primaryColor;
const OutlinedText({
required this.text,
required this.primaryColor,
});
#override
Widget build(BuildContext context) {
final textStyle = TextStyle(
shadows: [
Shadow(
color: primaryColor,
blurRadius: 5,
offset: const Offset(0, 0),
)
],
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
);
return Stack(
alignment: Alignment.center,
children: [
Text(
text,
style: textStyle.copyWith(
foreground: Paint()
..style = PaintingStyle.stroke
..color = primaryColor
..strokeWidth = 2,
color: null,
),
),
Text(text, style: textStyle),
],
);
}
}
OutlinedText(
text: "Hello, World!",
primaryColor: Colors.red,
);
Output
Try the full example on DartPad

Update flutter font with a function

I want to update the displaying font in flutter using a function.I've tried with following method but it won't update.I can't find the problem.
Function
_fontselect(String ){
if (_character==1) {
return "Font";
} else{
return "Font2";
}
}
context
Center(child: Text(text,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily:_fontselect(String),
fontWeight: FontWeight.bold,
fontSize: 28.0,
color: Colors.red)
),
),
Use Ternary Operator within the fontFamily itself.
Center(child: Text(text,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _character==1 ? "Font" : "Font2",
fontWeight: FontWeight.bold,
fontSize: 28.0,
color: Colors.red)
),
),
Your function needs a String variable to use inside of the function.
_fontselect(String character){
if (character==1) {
return "Font";
} else{
return "Font2";
}
}
Also it looks like character is an int but you are sending a String over to the function you should call the function with an int if this makes more sense.

How to decorate text stroke in Flutter?

How to decorate text stroke in Flutter?
It's like -webkit-text-stroke - CSS
Stroke has been possible without workarounds since the addition of foreground paints in TextStyle. An explicit example of stroke under fill bordered text has been added in the TextStyle documentation: https://master-api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.6
This example is reproduced here:
Stack(
children: <Widget>[
// Stroked text as border.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.blue[700],
),
),
// Solid text as fill.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
color: Colors.grey[300],
),
),
],
)
Stroke by itself is possible by removing the Stack and just using the first stroke Text widget by itself. The stroke/fill order can also be adjusted by swapping the first and second Text widget.
I was also looking for this, wasn't able to find it. But I did find a workaround using 4 shadows in the TextStyle:
Text("Border test",
style: TextStyle(
inherit: true,
fontSize: 48.0,
color: Colors.pink,
shadows: [
Shadow( // bottomLeft
offset: Offset(-1.5, -1.5),
color: Colors.white
),
Shadow( // bottomRight
offset: Offset(1.5, -1.5),
color: Colors.white
),
Shadow( // topRight
offset: Offset(1.5, 1.5),
color: Colors.white
),
Shadow( // topLeft
offset: Offset(-1.5, 1.5),
color: Colors.white
),
]
),
);
I also opened an Issue on GitHub: https://github.com/flutter/flutter/issues/24108
Inspired by this article, to achieve the effect, I prefer to use a technique that mixes two Text widgets and TextStype.foreground property with custom Paint():
class StrokeText extends StatelessWidget {
final String text;
final double fontSize;
final FontWeight fontWeight;
final Color color;
final Color strokeColor;
final double strokeWidth;
const StrokeText(
this.text, {
Key key,
this.fontSize,
this.fontWeight,
this.color,
this.strokeColor,
this.strokeWidth,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Text(
text,
style: TextStyle(
fontSize: fontSize,
fontWeight: fontWeight,
foreground: Paint()..color = color,
),
),
Text(
text,
style: TextStyle(
fontSize: fontSize,
fontWeight: fontWeight,
foreground: Paint()
..strokeWidth = strokeWidth
..color = strokeColor
..style = PaintingStyle.stroke,
),
),
],
);
}
}
If you prefer the shadows method, you can configure the stroke width using :
/// Outlines a text using shadows.
static List<Shadow> outlinedText({double strokeWidth = 2, Color strokeColor = Colors.black, int precision = 5}) {
Set<Shadow> result = HashSet();
for (int x = 1; x < strokeWidth + precision; x++) {
for(int y = 1; y < strokeWidth + precision; y++) {
double offsetX = x.toDouble();
double offsetY = y.toDouble();
result.add(Shadow(offset: Offset(-strokeWidth / offsetX, -strokeWidth / offsetY), color: strokeColor));
result.add(Shadow(offset: Offset(-strokeWidth / offsetX, strokeWidth / offsetY), color: strokeColor));
result.add(Shadow(offset: Offset(strokeWidth / offsetX, -strokeWidth / offsetY), color: strokeColor));
result.add(Shadow(offset: Offset(strokeWidth / offsetX, strokeWidth / offsetY), color: strokeColor));
}
}
return result.toList();
}
Use it like this :
Text(
'My text',
style: TextStyle(shadows: outlinedText(strokeColor: Colors.blue)),
);
Inspired by #Gary Qian's answer
Widget textWithStroke({String text, String fontFamily, double fontSize: 12, double strokeWidth: 1, Color textColor: Colors.white, Color strokeColor: Colors.black}) {
return Stack(
children: <Widget>[
Text(
text,
style: TextStyle(
fontSize: fontSize,
fontFamily: fontFamily,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..color = strokeColor,
),
),
Text(text, style: TextStyle(fontFamily: fontFamily, fontSize: fontSize, color: textColor)),
],
);
}
This is #Aleh's answer migrated to null-safety and with some more flexibility.
Simply paste this inside a new file, and use freely.
import 'package:flutter/widgets.dart';
/// Places a stroke around text to make it appear outlined
///
/// Adapted from https://stackoverflow.com/a/55559435/11846040
class OutlinedText extends StatelessWidget {
/// Text to display
final String text;
/// Original text style (if you weren't outlining)
///
/// Do not specify `color` inside this: use [textColor] instead.
final TextStyle style;
/// Text color
final Color textColor;
/// Outline stroke color
final Color strokeColor;
/// Outline stroke width
final double strokeWidth;
/// Places a stroke around text to make it appear outlined
///
/// Adapted from https://stackoverflow.com/a/55559435/11846040
const OutlinedText(
this.text, {
Key? key,
this.style = const TextStyle(),
required this.textColor,
required this.strokeColor,
required this.strokeWidth,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Text(
text,
style: style.copyWith(foreground: Paint()..color = textColor),
),
Text(
text,
style: style.copyWith(
foreground: Paint()
..strokeWidth = strokeWidth
..color = strokeColor
..style = PaintingStyle.stroke,
),
),
],
);
}
}
I created a package using the same logic shared here.
I also make it possible to add multiple strokes at once.
package: https://pub.dev/packages/outlined_text
DEMO