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
       )

优势

将来，每当要更改自定义窗口小部件或资源常量时，都只需在一个位置进行更改，它将在所有位置反映出来。
您还可以在所有项目中使用此自定义窗口小部件和资源常量，而只需进行少量修改。
Views代码看起来更清晰易读。

Answer 2

最好的解决方案是创建一个外部文件，在其中创建一个类，然后在其中添加常量。

示例
在constant.dart中，我将创建常量类

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

用法：

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

输出：

别忘了导入文件库，其中包含常数，就我而言，它将是constant.dart。

Answer 3

尝试创建一个外部文件，然后将常量放在此处。

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

3 个答案: