dart - 在 Flutter 应用程序中存储外观和指标常量

Question

在开发在同一屏幕上包含许多小部件的 Flutter 应用程序时，我意识到存储一些具有外观和指标常量的结构可能很有用，这些结构在小部件之外的屏幕上使用，但我不确定在哪里。

例如 - 我有包含 8-10 个文本小部件的博客文章小部件。而且我想将它们的 TextStyles 属性存储在一起，以便修改它们并且这个小部件代码会更短。

同样的东西可以应用于度量:宽度、填充、角半径等。

Answer 1

Your question context in reducing boilerplate code by creating custom component with high reuse-ability and maintenance.

所以你可以通过 4 个简单的步骤来实现:

1.创建应用程序目录为:

    -\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)

<强>2。创建资源常量:

这是非常简单的步骤，因为您只需在相应的资源文件中添加常量。

示例 - 在 app_colors.dart

中创建颜色常量

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);
}

3.创建自定义组件:

现在在 components 目录中创建一个自定义小部件:

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,
          .......
       );
   }

}

4.将自定义小部件导入任何 View :在您的任何 View 中，您都可以像这样导入自定义小部件

child: CustomWidget(
       // Initialize all required parameters
       )

优势

1. 以后每当您想更改您的自定义小部件或资源常量时，您只需在一处进行更改，它将反射(reflect)在所有地方。

2. 您还可以在所有项目中使用此自定义小部件和资源常量，只需稍作修改。

3. Views 代码看起来更干净可读。