Skip to content

[Widget] class VS method

Yoshiki Naruo edited this page Sep 22, 2022 · 4 revisions

method

Widget build(BuildContext context) {
    return Column(
      children: [
       _textList(), // 文字のリスト
      ],
    );
  }
}

Widget _textList() {
  return Column(
    children: [
     _text1(), // 文字1
     _text2(), // 文字2
     _text3(), // 文字3
    ],
  );
}

Widget _text1() {
  return Text(''); // 文字1
}

Widget _text2() {
  return Text(''); // 文字2
}

Widget _text3() {
  return Text(''); // 文字3
} 

class

  Widget build(BuildContext context) {
    return Column(
      children: [
        _TextList(), // 文字リスト
      ],
    );
  }
}

class _TextList extends StatelessWidget {
  const _TextList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _Text1(), // 文字1
        _Text2(), // 文字2
        _Text3(), // 文字3
      ],
    );
  }
}

class _Text1 extends StatelessWidget {
  const _Text1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('');
  }
}

class _Text2 extends StatelessWidget {
  const _Text2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('');
  }
}

class _Text3 extends StatelessWidget {
  const _Text3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('');
  }
} 

UIの組み方で少しmethodとclassでは違います。

それぞれのメリット

class

・パフォーマンス最適化(細かい範囲でrebuildできる) ・異なるWidgetを切り替える際にmethodは以前の状態を再利用することがあるが、classは正しく表示される ・ホットリロードが正常に動く ・その他

method

・コード量が少なくなる

参考元: https://qiita.com/b4tchkn/items/8d25e2a5c84c49b7848c

Clone this wiki locally