Utiliser RichText dans Flutter  : Guide et exemples

Dans Flutter, RichText est un widget qui vous permet de créer du texte avec différents styles et formats au sein d'un seul widget de texte. Vous pouvez utiliser plusieurs TextSpan widgets pour définir différentes parties du texte avec différents styles.

Voici un exemple d'utilisation RichText  :

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('RichText Example'),  
     ),  
      body: Center(  
        child: RichText(  
          text: TextSpan(  
            text: 'Hello ',  
            style: DefaultTextStyle.of(context).style,  
            children: <TextSpan>[  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: ' is amazing!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Dans cet exemple, le RichText widget est utilisé pour créer un texte avec différents styles. Les TextSpan widgets sont utilisés comme enfants pour définir les différentes parties du texte avec des styles distincts.

• Le premier TextSpan est stylisé en utilisant le style de texte par défaut du contexte(dans ce cas, il hérite du style par défaut du AppBar).
• La seconde TextSpan applique une police de caractère grasse et une couleur bleue au mot « Flutter  ».
• Le troisième TextSpan ajoute simplement le texte « est incroyable ! » jusqu'à la fin.

Vous pouvez personnaliser la mise en forme, les polices, les couleurs et autres styles de chacun TextSpan selon vos besoins.

Le RichText widget est particulièrement utile lorsque vous devez appliquer différents styles à différentes parties de votre texte, par exemple lors de l'affichage de contenu formaté ou de la mise en valeur de mots ou d'expressions spécifiques.

N'hésitez pas à expérimenter différents styles et TextSpan widgets imbriqués pour obtenir les effets visuels souhaités dans votre application.