7
votes

stockage des constantes d'apparence et de métrique dans l'application Flutter

En développant une application Flutter avec de nombreux widgets impliqués sur le même écran, j'ai réalisé qu'il pouvait être utile de stocker des structures avec des constantes d'apparence et de métrique qui sont utilisées à l'écran quelque part en dehors des widgets, mais je ne sais pas où.

Par exemple, j'ai un widget de publication de blog qui se compose de 8 à 10 widgets de texte. Et je veux stocker leurs propriétés TextStyles quelque part ensemble afin qu'il soit facile de les modifier et ce code de widgets sera plus court.

La même chose peut être appliquée aux métriques: largeur, remplissage, rayon de coin etc.


0 commentaires

3 Réponses :


8
votes

Le contexte de votre question pour réduire le code standard en créant des composant à haute capacité de réutilisation et de maintenance.

Vous pouvez donc y parvenir en 4 étapes simples:

1. Créez le répertoire de l'application sous la forme:

child: CustomWidget(
       // Initialize all required parameters
       )

2. Création de constantes de ressources:

Ses étapes très simples car vous devez ajouter uniquement des constantes dans les fichiers de ressources respectifs.

Exemple - création de constantes de couleur dans app_colors.dart

class CustomWidget extends StatefulWidget{
   // Declare your widget parameters 
   final data-type your_parameter;
   .....
   .....
   .....

  // Create constant constructor 
  const CustomWidget(
    // Initialize all your widget parameters
    this.your_parameter
    .....
    .....
    .....)
  @override
  _CustomWidgetState createState() => _CustomWidgetState();
}


/// CustomWidget State class
class _CustomWidgetState extends State<CustomWidget>{
   // Here you should use existing widget from either material library or cupertino etc

    @override
    Widget build(BuildContext context) {
       return ExistingBaseWidget(
          // Set here all necessary parameters for customization
          // For setting constansts from resources you do it like this
          color : AppColors.COLOR_NAME,
          radius : AppDimens.BORDER_RADIUS,
          .......
       );
   }

}

3. Créez des composants personnalisés:

Maintenant, dans le répertoire components , créez un widget personnalisé comme:

import 'package:flutter/material.dart';

/// App Colors Class - Resource class for storing app level color constants
class AppColors {

  static const Color PRIMARY_COLOR = Color(0xFF35B4C5);
  static const Color PRIMARY_COLOR_LIGHT = Color(0xFFA5CFF1);
  static const Color PRIMARY_COLOR_DARK = Color(0xFF0D3656);
  static const Color ACCENT_COLOR = Color(0xFFF2DA04);
}

4. Importer un widget personnalisé dans n'importe quelle vue: Dans toutes vos vues, vous pouvez importer des widgets personnalisés comme suit

    -\resources (parent resource directory)
      -\menus (store all menus list constants)
      -\values
        -\app_strings.dart (store all strings constants)
        -\app_colors.dart  (store all colors constants)
        -\app_styles.dart  (store all styles i.e. material dark, light, cupertino etc.)
        -\app_dimens.dart  (store all dimension constants)

    -\components (parent component directory)
      -\your_custom_widget.dart(create custom component here)
      -\.....

    -\views
      -\your_view.dart(your view where you import custom component)

Avantages

  1. À l'avenir, chaque fois que vous voudrez changer vos widgets personnalisés ou vos constantes de ressources, vous devrez le changer à un seul endroit et il se reflétera dans tous les endroits.

  2. Vous pouvez également utiliser ces widgets personnalisés et constantes de ressources dans tous vos projets avec des modifications mineures.

  3. Le code des vues semble plus propre et plus lisible.


0 commentaires

0
votes

Essayez de créer un fichier externe et mettez-y vos constantes.


0 commentaires

1
votes

La meilleure solution est de créer un fichier externe dans lequel vous allez créer une classe, puis y ajouter vos constantes.

Un exemple
Dans constant.dart, je vais créer la classe constante

Column(
      children: [
          Text('Hello World' ,style: Constant.myStyle,),
          IconButton(icon: Constant.myIcon, onPressed: null),
          Divider(color: Constant.myColor,)
                ],
              ),

Utilisation:

 import 'package:flutter/material.dart';
     class Constant {
      static Color myColor = Colors.blue;
      static Icon myIcon = Icon(Icons.search , color: Colors.red,);
      static TextStyle myStyle = TextStyle(
        fontSize: 17, 
        fontWeight: FontWeight.bold ,
        color: Colors.green);
    }

Sortie: entrez la description de l'image ici

N'oubliez pas d'importer la bibliothèque de votre fichier qui contient le constantes, dans mon cas ici, ce sera constant.dart.


0 commentaires