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.
3 Réponses :
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.dartclass 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
À 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.
Vous pouvez également utiliser ces widgets personnalisés et constantes de ressources dans tous vos projets avec des modifications mineures.
Le code des vues semble plus propre et plus lisible.
Essayez de créer un fichier externe et mettez-y vos constantes.
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);
}
N'oubliez pas d'importer la bibliothèque de votre fichier qui contient le constantes, dans mon cas ici, ce sera constant.dart.