Le widget Theme dans Flutter

• data: Cette propriété est utilisée pour définir les données de thème pour l’arborescence des widgets. Il prend une instance de ThemeDatacomme valeur.
• child: Cette propriété est utilisée pour définir le widget auquel le thème doit être appliqué.
• shadowThemeOnly: Cette propriété est utilisée pour spécifier si le thème ne doit être appliqué qu’aux éléments du thème de l’ombre, tels que DropShadow, et non au reste de l’arborescence du widget.
• key: Cette propriété est utilisée pour définir une clé unique pour le widget, ce qui est utile dans les scénarios où vous devez trouver le widget dans l’arborescence des widgets.

Theme(
  data: themeData,
  shadowThemeOnly: true,
  child: Container(
    child: Text("This text will have a shadow"),
  ),
)

Remarque : Le widget « Theme » ne peut être utilisé qu’une seule fois dans une arborescence de widgets. Si vous souhaitez appliquer le même thème à plusieurs widgets, vous devez envelopper chaque arborescence de widgets avec le widget Theme et transmettre la même instance ThemeData à chacun.

• Thème clair – Il s’agit du thème bleu clair du thème par défaut.
• Thème sombre – Un thème sombre avec le bleu sarcelle comme couleur secondaire ColorScheme, pour économiser de l’énergie pour une plus grande autonomie de la batterie et réduire la fatigue oculaire dans les situations de faible luminosité.
• Vous pouvez passer au thème sombre en définissant la propriété de thème MaterialApp sur la méthode ThemeData.dark() . Par example,

Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData.dark(),
     home: HomeScreen(),
   );
 }

static const ColorScheme colorSchemeLight = ColorScheme(
    primary: primaryColor,
    secondary: accentColor,
    surface: background,
    background: background,
    brightness: Brightness.light,
    error: failurRed,
    onBackground: Colors.black,
    onError: Colors.white,
    onPrimary: Colors.white,
    onSecondary: Colors.white,
    onSurface: Colors.black,
    primaryContainer: primaryColor,
    secondaryContainer: accentColor,
  );
    mainTheme = ThemeData(
            appBarTheme: appBarTheme,
            brightness: Brightness.light,
            primaryColor: primaryColor,
            colorScheme: colorSchemeLight,
            textTheme: viatoTextTheme,
            backgroundColor: background,
            scaffoldBackgroundColor: background);

final theme = ThemeData(
  primaryColor: Colors.blue,
  accentColor: Colors.yellow,
  fontFamily: 'Roboto',
  textTheme: TextTheme(
    headline: TextStyle(
      fontSize: 24.0,
      fontWeight: FontWeight.bold
    ),
    body1: TextStyle(
      fontSize: 16.0,
      fontWeight: FontWeight.normal
    ),
  ),
);

• Une fois le thème créé, vous pouvez l’appliquer à l’ensemble de votre application en enveloppant votre arborescence de widgets dans le Themewidget et en transmettant votre themeobjet en tant que datapropriété.

MaterialApp(
  theme: theme,
  home: MyHomePage(),
)

• Cela appliquera le thème défini à l’ensemble de votre application, lui donnant un aspect visuel cohérent.
• Pour utiliser un thème dans Flutter, suivez les étapes suivantes:
• 1- Créez un objet ThemeData avec les paramètres souhaités, définissez les données de thème dans un objet ThemeData, qui contient les propriétés visuelles de votre thème, telles que la couleur et la typographie.
• 2- Enveloppez l’arborescence de widgets avec un Themewidget, en passant l’objet ThemeData comme data argument.
• 3- Accédez aux données du thème à l’aide de Theme.of(context).

• Créez une nouvelle application Flutter avec un thème sombre en utilisant ThemeData.
• Modifiez la couleur de fond de l’application en utilisant les propriétés de couleur dans ThemeData.
• Ajoutez une police personnalisée à l’application en utilisant la propriété textTheme dans ThemeData.
• Modifiez les couleurs des boutons en utilisant les propriétés buttonTheme et buttonColor dans ThemeData.
• Créez plusieurs thèmes différents pour l’application en utilisant des instances de ThemeData distinctes et en les switchant selon les préférences de l’utilisateur.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Définit la luminosité et les couleurs par défaut.
        brightness: Brightness.light,
        primaryColor: Colors.indigo,
        // Définit la famille de polices par défaut.
        fontFamily: 'Montserrat',
        // Définit le `TextTheme` par défaut. Utilisez ceci pour spécifier la valeur par défaut
        // style de texte pour les titres, les titres, les corps de texte, etc.
        textTheme: TextTheme(
          headline1: TextStyle(
            fontSize: 36.0,
            fontWeight: FontWeight.bold,
            color: Colors.indigo[900],
          ),
          headline2: const TextStyle(
            fontSize: 28.0,
            fontWeight: FontWeight.bold,
            color: Color.fromARGB(255, 126, 26, 109),
          ),
          bodyText1: TextStyle(
            fontSize: 16.0,
            color: Colors.grey[800],
            fontWeight: FontWeight.normal,
          ),
          bodyText2: TextStyle(
            fontSize: 14.0,
            color: Colors.grey[600],
            fontWeight: FontWeight.normal,
          ),
        ),
        buttonTheme: ButtonThemeData(
          textTheme: ButtonTextTheme.primary,
          buttonColor: Colors.indigo[900],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
        appBarTheme: AppBarTheme(
          color: Colors.indigo[50],
          textTheme: TextTheme(
            headline6: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.indigo[900],
            ),
          ),
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mon thème personnalisé'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Text(
                'Bienvenue dans mon application personnalisée!',
                style: Theme.of(context).textTheme.headline1,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: Text(
                'Bienvenue dans mon application personnalisée!',
                style: Theme.of(context).textTheme.headline2,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: Text(
                'Bienvenue dans mon application personnalisée!',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: Text(
                'Bienvenue dans mon application personnalisée!',
                style: Theme.of(context).textTheme.bodyText2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}