Google Fonts on Theme Flutter

Details: Category: บทความ Flutter | Published: 05 December 2021 | Hits: 2185

การใช้ Google Fonts บน Theme บน Flutter

Screen Shot 2021 12 06 at 43852 AM

ส่งแรกไปที่นี่ครับ https://pub.dev/packages/google_fonts ติดตั้ง package ก่อน

ต่อไป ก็ไปหาด font สวยๆ ที่นี่ครับ https://fonts.google.com

Screen Shot 2021 11 22 at 34409 PM

กำหนด การใช้งาน Google Fonts ใน fontFamily ที่ ThemeData

 class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: map,
      initialRoute: firstState,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.green,
        fontFamily: GoogleFonts.mali().fontFamily,
      ),
    );
  }
}

Screen Shot 2021 11 22 at 34416 PM

ส่วนของค่าคงที่

 class MyConstant {
  TextStyle h1Style() => const TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold,
      );

  TextStyle h2Style() => const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.w700,
      );

  TextStyle h3Style() => const TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.normal,
      );
}

Screen Shot 2021 11 22 at 34424 PM

ส่วนของ Windget ที่จะแสดง Text

 class ShowTitle extends StatelessWidget {
  final String title;
  final TextStyle? textStyle;
  const ShowTitle({Key? key, required this.title, this.textStyle})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: textStyle ?? MyConstant().h3Style() ,
    );
  }
}

Screen Shot 2021 11 22 at 34437 PM

ตัวอย่างโค้ด

 Container newText() {
    return Container(
      constraints: const BoxConstraints(maxWidth: 250),
      child: StreamBuilder<String>(
          stream: streamController.stream,
          builder: (context, snapshot) {
            return ShowTitle(
              title: '$word translate ==>> ${snapshot.data}',
              textStyle: MyConstant().h2Style(),
            );
          }),
    );
  }

Screenshot 1637570681