Search code examples
flutterdynamicfontslocale

Flutter : How to include multiple font family in one paragraph?


There are 2 types of language in one paragraph, see example below.
And it comes from rest API. I want to use different font families for each language.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. জীবের মধ্যে সবচেয়ে সম্পূর্ণতা মানুষের। কিন্তু সবচেয়ে অসম্পূর্ণ হয়ে সে জন্মগ্রহণ করে। বাঘ ভালুক তার জীবনযাত্রার পনেরো- আনা মূলধন নিয়ে আসে প্রকৃতির মালখানা থেকে। Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. জীবরঙ্গভূমিতে মানুষ এসে দেখা দেয় দুই শূন্য হাতে মুঠো বেঁধে। It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged.

Here is flutter TextStyle

Text('Sample Text, who come from api',
style: TextStyle(fontFamily: "Roboto"),)

How can I make this font fontFamily dynamic?


Solution

  • Inspired by my previous answer here https://stackoverflow.com/a/74347509/12902996 I edited it for your use case:

    import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(
                    child: Padding(
                      padding: const EdgeInsets.all(50.0),
                      child: MyText("Lorem Ipsum is simply dummy text of the printing and typesetting industry. জীবের মধ্যে সবচেয়ে সম্পূর্ণতা মানুষের। কিন্তু সবচেয়ে অসম্পূর্ণ হয়ে সে জন্মগ্রহণ করে। বাঘ ভালুক তার জীবনযাত্রার পনেরো- আনা মূলধন নিয়ে আসে প্রকৃতির মালখানা থেকে। Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. জীবরঙ্গভূমিতে মানুষ এসে দেখা দেয় দুই শূন্য হাতে মুঠো বেঁধে। It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged."),
                    ))));
      }
    }
    
    class MyText extends StatelessWidget {
      final String text;
    
      MyText(this.text, {Key? key}) : super(key: key);
    
      final RegExp regExp = RegExp(r'(?<=\s)');
      final RegExp alphanumeric = RegExp(r'\w');
    
      late final List<String> split = text.split(regExp);
    
      @override
      Widget build(BuildContext context) {
        return RichText(
          text: TextSpan(
              children: split
                  .map((e) => alphanumeric.hasMatch(e)
                  ? TextSpan(
                text: e,
                style: GoogleFonts.vampiroOne(
                    color: Colors.red, fontSize: 30),
              )
                  : TextSpan(
                text: e,
                style: GoogleFonts.poppins(),
              ))
                  .toList()),
        );
      }
    }
    

    Output:

    enter image description here

    I made the split between alphanumeric and not. I'm not sure if it's 100% what you want but you can give it a try.