trc ui pour Flutter : des widgets « noir profond » pour le mobile, le web et le desktop

Après la version React, trc ui arrive sur Flutter. Le paquet trc_ui est publié sur pub.dev sous licence MIT. Il apporte le même style « noir profond » à vos applications Android, iOS, web, macOS, Windows et Linux : fonds quasi noirs, cartes graphite, titres Montserrat fins, une seule couleur d'accent et des boutons pilule dont la pastille s'étire au survol.

Pourquoi un portage Flutter

Nous développons beaucoup d'applications mobiles en Flutter. Avoir le même langage visuel sur le site et dans l'application, c'est une marque plus cohérente et moins de temps passé à redessiner les mêmes composants. trc_ui reprend donc les principes de la version React :

• Sobre. Des fonds quasi noirs, des cartes graphite, une seule couleur d'accent. La profondeur vient des nuances de gris, pas des ombres.
• Fin. Des titres en Montserrat léger, fournis avec le paquet, avec un mot d'accent par titre.
• Vivant. Des pilules qui s'étirent, des cartes qui s'éveillent au survol, un en-tête qui se floute au défilement, une barre de navigation dont la pilule glisse.
• Accessible. La sémantique sur chaque contrôle, le focus et les flèches du clavier sur desktop et web, le mouvement réduit respecté et tous les textes intégrés traduisibles.
• Léger. Aucune dépendance en dehors de Flutter.

Installation

trc_ui demande Flutter 3.32 ou plus récent.

flutter pub add trc_ui

Mise en place

Donnez le thème trc à votre MaterialApp, et placez le TrcToaster une fois si vous utilisez des notifications :

import 'package:flutter/material.dart';
import 'package:trc_ui/trc_ui.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: const TrcThemeData().toMaterialTheme(),
      builder: (context, child) => TrcToaster(child: child!),
      home: const HomePage(),
    );
  }
}

toMaterialTheme() construit un thème Material sombre dans le style trc : l'accent en couleur principale, des surfaces graphite plates et Montserrat. Les widgets trc et les widgets Material que vous gardez se ressemblent donc.

Premiers widgets

Comme en React, les mots entre astérisques prennent la couleur d'accent :

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const TrcHeading('Bienvenue dans le *noir profond.*', level: 1, size: TrcHeadingSize.display),
    const SizedBox(height: 24),
    const TrcText('Les mots entre astérisques prennent la couleur d\'accent.', size: TrcTextSize.lg),
    const SizedBox(height: 32),
    TrcPillButton(label: 'Commencer', solid: true, onPressed: () {}),
  ],
)

Le catalogue va plus loin que la version web : en plus des titres, cartes et formulaires, vous trouverez des boîtes de dialogue et des panneaux latéraux (showTrcDialog, showTrcDrawer), des menus et infobulles, des notifications (TrcToaster, TrcToast), des onglets, un fil d'Ariane, une pagination, un sélecteur de langue, des étapes, des avatars, des tableaux triables, des états de chargement et un bloc de code avec bouton copier.

La barre de navigation en verre

TrcBottomNav est probablement le widget le plus visible : une capsule flottante dont la pilule d'accent glisse d'un onglet à l'autre, avec badges et effet de verre optionnel.

Scaffold(
  extendBody: true, // le contenu défile derrière la barre
  body: content,
  bottomNavigationBar: TrcBottomNav(
    items: const [
      TrcBottomNavItem(icon: Icon(Icons.home_outlined), label: 'Accueil'),
      TrcBottomNavItem(icon: Icon(Icons.search), label: 'Recherche'),
      TrcBottomNavItem(icon: Icon(Icons.chat_bubble_outline), label: 'Messages', badge: 3),
    ],
    currentIndex: index,
    onTap: (i) => setState(() => index = i),
    glass: true,
  ),
)

style choisit la capsule flottante (par défaut) ou une barre ancrée avec TrcBottomNavStyle.bar. glass: true donne un fond graphite translucide qui floute le contenu en dessous.

Changer la couleur d'accent

Chaque couleur, rayon et réglage d'animation est un jeton de TrcThemeData. Changez l'accent une fois : l'accent adouci et l'anneau de focus suivent.

final tokens = const TrcThemeData().copyWith(
  accent: const Color(0xFFD41367),
  onAccent: Colors.white, // texte sur l'accent : quasi noir par défaut
);

MaterialApp(theme: tokens.toMaterialTheme());

Pour n'habiller qu'une zone, entourez-la d'un TrcTheme(data: tokens, child: ...).

Traductions

Chaque texte intégré est un paramètre avec une valeur anglaise par défaut : closeLabel, previousLabel, placeholder… Les textes qui contiennent une valeur prennent un modèle, comme pageLabel: 'Page {page}'. Le sélecteur de date prend les noms de mois et de jours dans les MaterialLocalizations de l'application.

Pour aller plus loin

• Paquet : pub.dev/packages/trc_ui
• Code source : github.com/aa404/trc-ui
• La version React et sa documentation : ui.theringconcept.com

Les issues et les pull requests sont les bienvenues.