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

![スクリーンショット 2023-11-22 13.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/5125d8ad-3814-e7c9-652c-c1f832eab884.png)


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

https://qiita.com/advent-calendar/2023/kuso-app


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

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

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

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

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

```dart
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'),
      ),
    );
  }
}
```

![Simulator Screen Recording - iPhone 15 Pro - 2023-11-22 at 14.54.30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/681365bf-5a71-d7d8-9407-82e11310ee9a.gif)



# 大量のアニメーション

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

```dart
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,
          );
        },
      ),
    );
  }
}

```

![Simulator Screen Recording - iPhone 15 Pro - 2023-11-22 at 14.54.45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/a30b804a-8956-1cc0-4d6c-2fc627be982d.gif)



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

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

```dart
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}');
        },
      ),
    );
  }
}

```

![Simulator Screen Recording - iPhone 15 Pro - 2023-11-22 at 14.54.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/24f6adb4-3b44-cf61-9eed-bd50b6863b45.gif)


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

https://github.com/iseruuuuu/bad_app

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

# ちょっとした宣伝


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

https://qiita.com/advent-calendar/2023/yumemi-23-graduation