如何在自定义文本 Flutter 中使用 GoogleFonts？

Question

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

Answer 1

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

Answer 2

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