【Flutter】Flutterアプリの動作を高速化！すぐに実践できるパフォーマンス改善術

// Bad
Widget build(BuildContext context) {
  return Text('Hello');
}

// Good
Widget build(BuildContext context) {
  return const Text('Hello');  <-- constを使う
}

Copy

// updateChildメソッドの一部抜粋
Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {
 // 省略
 if (hasSameSuperclass && child.widget == newWidget) {　<-- 新旧ウィジェットのインスタンスを比較
   ...
   newChild = child;
 } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget))      {
   ...
   child.update(newWidget); <-- 同一でない場合はupdateの処理が発生してしまう
   ...
   newChild = child;
 }
 ...
 return newChild;
}

Copy

class _MyWidgetState extends State<MyWidget> {
  // constが使えないウィジェットをキャッシュする
  final _blueContainer = Container(color: Colors.blue, height: 100, width:100);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _blueContainer,　<-- キャッシュしたウィジェットを使用
        Container(
          color: Colors.red,
          height: 100,
          width: 100,
        ),
      ],
    );
  }
}

Copy

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'カウント:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            TextButton(
              onPressed: _incrementCounter,
              child: const Text('増やす！'),
            )
          ],
        ),
      ),
    );
  }
}

Copy

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: const Center(child: CounterText()),
    );
  }
}


// リビルドが発生するウィジェットを分割する
class CounterText extends StatefulWidget {

  const CounterText({super.key});

  @override
  State<CounterText> createState() => _CounterTextState();
}


class _CounterTextState extends State<CounterText> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(...省略);
  }
}

Copy