Flutter 和设计系统答案

【问题标题】：Flutter and the Design SystemFlutter 和设计系统
【发布时间】：2022-01-18 03:34:57
【问题描述】：

我已经使用原生 Android(Java) 开发了 Design System，现在我将开始使用 Flutter 开发新的 Design System，但我对 @987654325 不是很熟悉@，我有一些问题在网上没有得到解答。

在 Android 上我有 colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    //Brand Primary colors
    <color name="color_primary" category="color">#FDE6E3</color>
    <color name="color_secondary" category="color">#FE918D</color>

</resources>

如何在Flutter 中制作这个color 文件？

在 Android 上我有 dimen.xml:

    <resources>    
  //Font Sizes
  <dimen name="font_XXS" category="font-size">12sp</dimen>
  <dimen name="font_size_XS" category="font-size">16sp</dimen>


  
  //Spacing Inline
  <dimen name="spacing_XS" category="spacing-inline">4dp</dimen>
  <dimen name="spacing_XXS" category="spacing-inline">8dp</dimen>
  
  
  //Border Radius
  <dimen name="border_radius_none" category="radius">0dp</dimen>
  <dimen name="border_radius_XS" category="radius">4dp</dimen>
  

  //Border Width
  <dimen name="border_width_none" category="border-width">0dp</dimen>
  <dimen name="border_width_medium" category="border-width">2dp</dimen>

  
</resources>

如何在Flutter 中制作这个dimen 文件？

在 Android 上，我将它们放在一起创建了一个 Link 组件。

public class CustomLink extends AppCompatTextView {

private Context mContext;

public CustomLink(Context context) {
    super(context);
    this.mContext = context;
}

public CustomLink(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    this.mContext = context;

    TypedArray attrsArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLink,
            0, 0);
    initializeCustomLink();
    attrsArray.recycle();
}


private void initializeCustomLink() {
    initializeLinkContainer();

}

private void initializeLinkContainer() {
    float scale = getResources().getDisplayMetrics().density;

    this.setLinkTextColor(getResources().getColor(R.color.color_primary)); //Here I use a Design feature

    this.setTextColor(getResources().getColor(R.color.color_secondary)); //Here I use a Design System feature

    this.setTextSize((getResources.getDimension.font_XXS) / (int) scale); //Here I use a Design System feature

    this.setMovementMethod(LinkMovementMethod.getInstance());


   }

}

我将如何在Flutter 中做这些基本的事情？

【问题讨论】：

标签： android flutter

【解决方案1】：

在 common 文件夹下，你应该保留你的常量数据

这里是链接：https://github.com/dicodingacademy/a199-flutter-expert-project/tree/main/lib

【讨论】：