自學Flutter

另外如果你想响state改變時做某啲嘢
可以用 ref.listen()

// inside build method
 ref.listen<int>(movesControllerProvider.select((value) => value.length), (previousCount, newCount) {
      final countChange = previousCount == null ? newCount : newCount - previousCount;
      final snackBar = SnackBar(
        elevation: 0,
        behavior: SnackBarBehavior.floating,
        backgroundColor: Colors.transparent,
        content: AwesomeSnackbarContent(
          title: 'Success',
          message: 'Downloaded $countChange new moves!\nTotal: $newCount',
          contentType: ContentType.success,
        ),
      );

      ScaffoldMessenger.of(context).showSnackBar(snackBar);
    });

但我要响邊度call controller.jumpTo()?
當我clear search text時
listview未rebuild

定係我要用controller.addListenser

Flutter易唔易揾工？
好似無乜工請Flutter
React Native就大把

Declare個陣可以set initialScrollOffset
JumpTo你要attach左個controller落listview先可以用 唔係會throw exception
AddListener你個listview未build 都係唔會有feedback比你

明白 又學多樣嘢

之前我哋响poke api度拎data
最好就cache咗佢 咁就唔使次次hot restart/reload再download過

我哋可以用以下package
同用hive 去 store data

https://pub.dev/packages/dio_cache_interceptor
https://pub.dev/packages/dio_cache_interceptor_hive_store

設定好options 再將 Dio inject去 PokeApiClient
而家經api拎data就會cache 30日
同埋只要有cached data 就唔會去poke api度 download

// main.dart
final options = CacheOptions(
  policy: CachePolicy.request,
  store: HiveCacheStore(AppPath.path),
  hitCacheOnErrorExcept: [401, 403],
  maxStale: const Duration(days: 30),
);

final dio = Dio()..interceptors.add(DioCacheInterceptor(options: options));

final pokeApiClient = PokeApiClient(dio);

runApp(
  ProviderScope(
    overrides: [
      pokeApiClientProvider.overrideWithValue(pokeApiClient),
    ],
    child: const PokepediaApp(),
    ),
  ),
);

用android studio可以睇到我哋個app入面有個cache file

開app 前fetch 晒咪唔覺有download
同埋會唔會對下個api response有冇更新會好啲？

可能我理解錯
我之前都係諗住一開app download晒data先
但如果開app前call api拎晒所有data
可能要make好多次call

因為poke api 冇endpoint俾我1次過拎
例如我想拎頭151隻pokemon
我先要call https://pokeapi.co/api/v2/pokemon/?limit=151
得返嚟嘅data只係151條url

{
    "count": 1126,
    "next": "https://pokeapi.co/api/v2/pokemon/?offset=151&limit=151",
    "previous": null,
    "results": [
        {
            "name": "bulbasaur",
            "url": "https://pokeapi.co/api/v2/pokemon/1/"
        },
        ... // total 151 results
        {
            "name": "mew",
            "url": "https://pokeapi.co/api/v2/pokemon/151/"
        }
    ]
}

然後我要再call 151次去拎每隻pokemon嘅data
如果我要拎埋其他data可能要make過千api call
短時間內make咁多api call會唔會俾佢ban
佢網站又冇寫1分鐘幾多limit

我而家個approach 係一入pokemon page先download同cache頭20隻
如果user拉到最底先再download 多20隻

check api更新嗰度我之後再諗諗

原來有咁嘅limitation 咁唔好做開app download 了
加油

Thank you

想問如果要display 1個nullable int
你地會點handle
用int? 然後UI

Text('Power: ${move.power ?? '---'}')

定define 1個class

@override
String toString() {
return value?.toString() ?? '---';
}

然後UI

Text('Power: ${move.power}')

Int / Num Ext value({fallback: ‘—-‘})

我通常就就咁Text('Power: ${move.power ?? '---'}')
但冇研究過有咩好處壞處

今日我哋試下加sort功能去我哋嘅move page
首先sort by power
由於power可以係 null
我哋先define 點樣sort

Comparator<int?> nullableIntComparator = (a, b) {
  if (a == null && b == null) {
    return 0;
  } else if (a == null) {
    return -1;
  } else if (b == null) {
    return 1;
  } else {
    return a.compareTo(b);
  }
};

你可以睇成 左邊 a 同 右邊 b比較

如果左右兩邊都係 null :
result係0
唔改次序

如果得左邊係 null
result係-1
將a排响b前面

如果得右邊係 null
result係1
將a排响b後面

之後就用呢個 Comparator

final sortedList = originalList.toList();
sortedList.sort((a, b) {
    return nullableIntComparator(a.power, b.power);
  });

又或者用shot form

final sortedList = [...originalList]..sort((a, b) {
    return nullableIntComparator(a.power, b.power);
  });

如果你有用https://pub.dev/packages/collection
可以直接用 sorted()

final sortedList = originalList.sorted((a, b) {
  return nullableIntComparator(a.power, b.power);
});

但結果不似預期 原本條list 係跟id排
sort完之後 同tier應該跟id排
但結果係亂晒 google完之後發現dart sorting algorithm 係唔stable
https://api.flutter.dev/flutter/dart-core/List/sort.html

唯有再改一改 如果power相同 就跟id排

final filteredList = moves.sorted((a, b) {
  final sortResult = nullableIntComparator(a.power, b.power);
  if (sortResult == 0) {
    return a.id.compareTo(b.id);
  } else {
    return sortResult;
  }
});

extensions method嗎?

如果UI有好多widget都係咁寫
我想轉唔show橫線 show N/A 就要改好多地方
就算我有重用widget都可能要改幾個widget
我想做到1個地方改

純粹想拋磚討論下

不過而家諗諗下可以用static String

係 個fallback就係你想佢null個時show 啲乜，default係你啲橫線

bloc 係垃圾黎
用返getx就得

https://www.reddit.com/r/FlutterDev/comments/po1bei/why_is_getx_such_a_bad_state_management/

好兩極

我最近都學緊flutter

setup嚟講，我覺得react native簡單啲
但react native啲寫法未必咁直覺

以前就setup難
宜家expo兩野搞掂

不過expo嘅話，一eject就麻煩