[Flutter] パフォーマンスのクソ悪いアプリを作ってみる

こんにちは。いせりゅーです。
この記事は、「クソアプリ Advent Calendar 2023」のアドベントカレンダーになっております。

パフォーマンスが悪くなるやり方を考えてみた

他にもあるかもしれませんが、今回は３つを取り上げてみます。

• 頻繁な無駄なビルドをしてみる
• 大量のアニメーション
• 非効率なデータ構造の使用

頻繁な無駄なビルドをしてみる

以下のコードでは、タイマーが毎秒setState()を呼び出し、ウィジェット全体を再描画しています。これはとても非効率です。

import 'dart:async';

import 'package:flutter/material.dart';

class BadBuildScreen extends StatefulWidget {
  const BadBuildScreen({super.key});

  @override
  BadBuildScreenState createState() => BadBuildScreenState();
}

class BadBuildScreenState extends State<BadBuildScreen> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(seconds: 1), (Timer t) => _updateCounter());
  }

  void _updateCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Counter: $_counter'),
      ),
    );
  }
}

大量のアニメーション

このコードでは、100個の画像を含むリストを作成し、それぞれにフェードインアニメーションを適用しています。これはパフォーマンスに大きな負荷をかける可能性があります。

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class ManyAnimationScreen extends StatelessWidget {
  const ManyAnimationScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: 'https://pbs.twimg.com/profile_images/1642880523373789185/eNP5YbVw_400x400.jpg',
            width: 50,
            height: 50,
          );
        },
      ),
    );
  }
}

非効率なデータ構造の使用

このコードでは、各リストアイテムを表示するたびに、リスト全体を検索しています。これは非常に非効率的です。

import 'package:flutter/material.dart';

class InefficientDataStructuresScreen extends StatelessWidget {
  const InefficientDataStructuresScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final List<int> largeList = List.generate(10000, (index) => index);
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: largeList.length,
        itemBuilder: (context, index) {
          return Text('Item ${largeList.where((item) => item == index).first}');
        },
      ),
    );
  }
}

これらのコードは以下のリポジトリに挙げております。
気になる方はクローンしてみてください。

最後に

パフォーマンスをよくする記事はいくつかありましたが、逆に悪くする記事がなかったので、思いつきで書いてみました。普通に考えて参考にしませんよね💦
しかし、コードを見た時に、同じようになっている！？という確認においては役立つと思います。
人気があれば、その２を作ります🔥

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！