xDev Asia

開発ツール: タイムライン、メモリ、ネットワーク。ウィジェット最適化の再構築。 const コンストラクター、RepaintBoundary。画像キャッシュ、遅延読み込み。重い計算を分離します。ツリーの揺れ、読み込みの遅延。

フラッター＆ダーツ: 基本から上級まで

パート 6: テスト、CI/CD、本番環境

xdev.asia

1.フラッター開発ツール

# Mở DevTools
flutter run --profile
# Hoặc từ IDE: Open Flutter DevTools

タブ	機能
ウィジェットインスペクター	ウィジェットツリー、プロパティを表示する
タイムライン	フレームレンダリング、ジャンク検出
記憶	メモリリーク、割り当て追跡
ネットワーク	HTTPリクエストの監視
パフォーマンス	CPUプロファイリング、フレームチャート

2. ウィジェットの再構築を最適化する

// ✅ Dùng const constructor
const SizedBox(height: 16);
const Text('Static text');

// ✅ RepaintBoundary cho phần tử animate nặng
RepaintBoundary(
  child: AnimatedWidget(...),
);

// ✅ Tách widget nhỏ thay vì build method lớn
class ProductPrice extends StatelessWidget {
  final double price;
  const ProductPrice({super.key, required this.price});

  @override
  Widget build(BuildContext context) {
    return Text('\$${price.toStringAsFixed(2)}',
      style: Theme.of(context).textTheme.titleLarge);
  }
}

// ✅ Sử dụng selector để giảm rebuild
ref.watch(cartProvider.select((cart) => cart.length)); // Chỉ rebuild khi length thay đổi

// ✅ ListView.builder thay vì Column + map
ListView.builder(
  itemCount: items.length,
  itemBuilder: (_, i) => ItemWidget(item: items[i]),
);

3. 大量の計算のための分離

// compute() — simple isolate
Future<List<Product>> parseProducts(String jsonString) async {
  return compute(_parseJson, jsonString);
}

List<Product> _parseJson(String json) {
  final data = jsonDecode(json) as List;
  return data.map((e) => Product.fromJson(e)).toList();
}

// Isolate.run — Dart 2.19+
final result = await Isolate.run(() {
  // Heavy computation
  return processLargeData(data);
});

4. 画像の最適化

// CachedNetworkImage
CachedNetworkImage(
  imageUrl: product.imageUrl,
  placeholder: (_, __) => const Shimmer(),
  errorWidget: (_, __, ___) => const Icon(Icons.error),
  memCacheWidth: 300, // Resize in memory
);

// Precache images
Future<void> precacheImages(BuildContext context) async {
  for (final url in imageUrls) {
    await precacheImage(CachedNetworkImageProvider(url), context);
  }
}

// Deferred loading — chia code thành chunks
import 'package:my_app/heavy_feature.dart' deferred as heavy;

Future<void> loadFeature() async {
  await heavy.loadLibrary();
  heavy.showHeavyWidget();
}

次の記事: CI/CD とアプリの署名。

レッスン 20: パフォーマンスとデバッグ

1.フラッター開発ツール

2. ウィジェットの再構築を最適化する

3. 大量の計算のための分離

4. 画像の最適化