I've multiple text in app with different fontFamily
So I've created a custom text class but how to use GoogleFonts
in custom text class? So that I can easily use fontWeight
, color
, fontSize
of GoogleFonts
.
Here is my CustomText
class
class CustomText extends StatelessWidget {
final String text;
final double? size;
final FontWeight? fontWeight;
final Color? color;
final double? wordSpacing;
final VoidCallback? onClick;
const CustomText({
Key? key,
required this.text,
this.size,
this.fontWeight,
this.color,
this.wordSpacing,
this.onClick,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: onClick == null
? Text(
text,
style: TextStyle(
fontSize: size ?? 14,
fontWeight: fontWeight ?? FontWeight.w500,
color: color ?? Colors.grey,
wordSpacing: wordSpacing,
),
)
: TextButton(
onPressed: () {
onClick!.call();
},
child: Text(
text,
style: TextStyle(
fontSize: size ?? 16,
fontWeight: fontWeight ?? FontWeight.w500,
color: color ?? Colors.grey,
wordSpacing: wordSpacing,
),
),
),
);
}
}
CodePudding user response:
Please refer to below code
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xfff00B074),
textTheme: const TextTheme(
bodyText1: TextStyle(
fontSize: 18.0,
fontFamily: 'Barlow-Medium',
color: Color(0xff464255)),
),
),
home: CustomTextDemo(),
);
}
}
class CustomTextDemo extends StatelessWidget {
const CustomTextDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomText(
text: "Custom Text Demo",
googleFontFamily: GoogleFonts.lato(
fontStyle: FontStyle.italic,
fontSize: 22.0,
color: Colors.blue,
),
),
),
);
}
}
class CustomText extends StatelessWidget {
final String text;
final double size;
final FontWeight fontWeight;
final Color color;
final double wordSpacing;
final VoidCallback onClick;
final String fontFamily; /* Add this Font Family param */
final TextStyle googleFontFamily;
const CustomText({
Key key,
@required this.text,
this.size,
this.fontWeight,
this.color,
this.wordSpacing,
this.onClick,
this.fontFamily,
this.googleFontFamily,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: onClick == null
? Text(
text,
style: googleFontFamily,
// TextStyle(
// fontSize: size ?? 14,
// fontWeight: fontWeight ?? FontWeight.w500,
// color: color ?? Colors.grey,
// wordSpacing: wordSpacing,
// fontFamily: 'Roboto'), /* Add this Font Family param */
)
: TextButton(
onPressed: () {
onClick.call();
},
child: Text(
text,
style: TextStyle(
fontSize: size ?? 16,
fontWeight: fontWeight ?? FontWeight.w500,
color: color ?? Colors.grey,
wordSpacing: wordSpacing,
),
),
),
);
}
}
CodePudding user response:
I am not sure if I got it right, as I never tried to apply as a use-case, but I think you can combine by using the getFont
and checking before using its implementation.
class CustomText extends StatelessWidget {
final String text;
final double? size;
final String googleFont;
final FontWeight? fontWeight;
final Color? color;
final double? wordSpacing;
final VoidCallback? onClick;
TextStyle? myTextStyle;
CustomText({
Key? key,
required this.text,
this.size,
this.fontWeight,
this.color,
this.googleFont = '',
this.wordSpacing,
this.onClick,
}) : super(key: key);
@override
Widget build(BuildContext context) {
myTextStyle = TextStyle(
fontSize: size ?? 14,
fontWeight: fontWeight ?? FontWeight.w500,
color: color ?? Colors.grey,
wordSpacing: wordSpacing,
);
return Container(
child: onClick == null
? Text(
text,
style: googleFont.isEmpty ? myTextStyle:GoogleFonts.getFont(
googleFont, textStyle: myTextStyle),
)
: TextButton(
onPressed: () {
onClick!.call();
},
child: Text(
text,
style: googleFont.isEmpty ? myTextStyle : GoogleFonts.getFont(
googleFont, textStyle: myTextStyle),
),
),
);
}
}