Guide complet Flutter : Le widget Text

Afficher un widget texte dans son application Flutter

L’élement “Text” est un widget de base de toute application Flutter, vous permettant, comme son nom l’indique, d’afficher du texte dans votre application. Voici un exemple simple d’utilisation du widget text, pour afficher “Bonjour tout le monde!” au centre de l’écran :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Mon Application Flutter')),
        body: Center(
          child: Text('Bonjour tout le monde!'),
        ),
      ),
    );
  }
}

Afficher du texte sur plusieurs lignes

Le comportement par défaut d’un texte dans Flutter est de prendre toute la place disponible pour s’afficher entièrement. Vous pouvez toutefois souhaiter que celui ne s’affiche que sur 2 ou 3 lignes pour des raisons esthétiques. Pour cela, Flutter met à disposition les propriétés maxLines et overflow :

Text(
  'Ceci est un exemple de texte très long qui devrait être affiché sur plusieurs lignes.',
  maxLines: 3,
  overflow: TextOverflow.ellipsis,
)

Dans cet exemple, si le texte dépasse trois lignes, il sera tronqué avec des points de suspension

Changer le style d’un texte

Le widget text possède plusieurs propriétés de style, vous permettant de moduler son esthétique. Vous pouvez notamment :

Changer sa couleur ;
Changer sa taille ;
Choisir une typographie ;
Gérer son alignement ;
Le mettre en gras ou en italique ;
Le souligne, etc.

Couleur

Pour changer la couleur du texte, utilisez la propriété color de TextStyle :

Text(
  'Texte coloré',
  style: TextStyle(color: Colors.blue),
)

Taille

Pour changer la couleur du texte, utilisez la propriété fontSize de TextStyle :

Text(
  'Texte de grande taille',
  style: TextStyle(fontSize: 24),
)

Typographie

Vous pouvez changer la police de vos textes, grâce à la propriété fontFamily de TextStyle :

Text(
  'Texte avec typographie personnalisée',
  style: TextStyle(fontFamily: 'Roboto'),
)

Si vous recherchez plus de typographies pour personnaliser votre application, pensez à utiliser le package google font.

Alignement

Vous pouvez décider de l’alignement d’un texte par rapport à son contenant, en utilisant la propriété fontAlign du widget Text. Voici un exemple de texte centré :

Text(
  'Texte centré',
  textAlign: TextAlign.center,
)

Mettre en gras ou en italique

Vos textes peuvent aussi être mis en gras ou en italique, grâce aux propriétés fontWeigth et fontStyle de TextStyle :

Text(
  'Texte en gras',
  style: TextStyle(fontWeight: FontWeight.bold),
)

Text(
  'Texte en italique',
  style: TextStyle(fontStyle: FontStyle.italic),
)

Souligner

Pour souligner du texte, utilisez la propriété decoration de TextStyle :

Text(
  'Texte souligné',
  style: TextStyle(decoration: TextDecoration.underline),
)

Pour plus de détails, n’hésitez pas à consulter mon article sur comment souligner du texte dans Flutter.

Conclusion

Vous êtes désormais capable d’ajouter du texte dans votre application afin de délivrer des informations aux utilisateurs. Désormais, pourquoi ne pas ajouter des icons pour rendre vos boutons plus compréhensibles ?

Guide complet Flutter : Le widget Icon →