在Flutter应用中存储外观和指标常量

Question

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

例如-我有由8-10个文本小部件组成的博客文章小部件。而且我想将它们的TextStyles属性一起存储在某个位置，以便轻松地对其进行修改，并且此小部件代码将更短。

可以将相同的内容应用于度量：宽度，填充，拐角半径等。

Answer 1

通过创建具有高重用性和维护性的自定义组件来减少样板代码的问题上下文。

因此，您可以通过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.将自定义窗口小部件导入任何视图： 在您的任何视图中，您都可以按以下方式导入自定义窗口小部件：

child: CustomWidget(
       // Initialize all required parameters
       )

好处

1. 将来，只要您想更改自定义窗口小部件或资源常量，就只需在一个位置进行更改，它将在所有位置反映出来。

2. 您也可以在所有项目中使用此自定义窗口小部件和资源常量，而只需进行少量修改。

3. Views代码看起来更清晰易读。