iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
Mobile Development

在 Flutter 開發旅程的手札系列 第 8

Flutter Models - 介紹Models

  • 分享至 

  • xImage
  •  

今天要介紹的是Models,在寫程式時,經常會遇到同一類型的東西,經常看到的像是status、type、permission...,這時候我們能用models整理,讓程式碼變得好讀外,也能避免改A卻漏改了B的狀況

下方舉例以水果作為參考案例,假設有下方四種水果

Enum:
[ apple, banana, orange, strawberry ]

新增一個fruit_method.dart,將拿到的文字轉為FruitMethod,使用extension可將method轉回文字
⚠️ :unknown是為了避免有非預期狀況時,所放的保留字

enum FruitMethod { apple, banana, orange, strawberry, unknown }

FruitMethod getFruitMethodType(String fruitType) {
  switch (fruitType) {
    case "apple":
      return FruitMethod.apple;
    case "banana":
      return FruitMethod.banana;
    case "orange":
      return FruitMethod.orange;
    case "strawberry":
      return FruitMethod.strawberry;
    default:
      return FruitMethod.unknown;
  }
}

extension FruitMethodExtension on FruitMethod {
  String getFruitMethodValue() {
    switch (this) {
      case FruitMethod.apple:
        return "apple";
      case FruitMethod.banana:
        return "banana";
      case FruitMethod.orange:
        return "orange";
      case FruitMethod.strawberry:
        return "strawberry";
      default:
        return "unknown";
    }
  }
}


也能在裡面將context放進去,結合多國語系使用
若還不會做多國語系的朋友可以參考,連結:Flutter Package — 製作多國語系

import 'package:flutter/cupertino.dart';
import '../../generated/l10n.dart';

extension FruitMethodNameExtension on FruitMethod {
  String getFruitMethodNameExtension(BuildContext context) {
    switch (this) {
      case FruitMethod.apple:
        return S.of(context).apple;
      case FruitMethod.banana:
        return S.of(context).banana;
      case FruitMethod.orange:
        return S.of(context).orange;
      case FruitMethod.strawberry:
        return  S.of(context).strawberry;
      default:
        return "unknown";
    }
  }
}


在Screen上的應用
宣告變數

  List<FruitMethod> fruitMethods = [
   FruitMethod.apple, FruitMethod.banana, FruitMethod.orange, FruitMethod.strawberry,
  ];

在Column內,使用List.generate將值一個一個拿出來,並用Text顯示出來

    Column(
              children: List.generate(
                  fruitMethods.length,
                  (i) => Text(
                        fruitMethods[i].getFruitMethodNameExtension(context),
                      )).toList(),
            ),

https://ithelp.ithome.com.tw/upload/images/20220923/201526836ll0oo1bwy.png


上一篇
Flutter Package - 串接api(三)
下一篇
Flutter Package - 更換APP的ICON
系列文
在 Flutter 開發旅程的手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言