참고 문서 및 링크
https://www.youtube.com/watch?v=IOyq-eTRhvo

---

Function Widget이란?

Method를 통해 위젯을 돌려주는 것을 의미하며

Helper Method이라고도 부릅니다!

예시

class _MyHomePageState extends State<MyHomePage> {
  final pageList = [1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ListView(children: [
            for (var page in pageList)
              listItem(page)
          ]),
        ));
  }

	//Function Widget
  Container listItem(int page) {
    return Container(
                margin: const EdgeInsets.all(8),
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(width: 1),
                    borderRadius: BorderRadius.circular(16),
                    color:
                        page % 2 == 0 ? Colors.black87 : Colors.transparent),
                child: Text("$page",
                    style: TextStyle(
                        color:
                            page % 2 == 0 ? Colors.white : Colors.black87)));
  }
}

Class Widget이란?

같은 위젯 상의 Method로 분리하는 것이 아닌

완전히 새로운 위젯( =Class)으로 분리해 호출하는 형식입니다!

예시

class _MyHomePageState extends State<MyHomePage> {
  final pageList = [1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ListView(children: [
            for (var page in pageList)
              ListItem(page: page)
          ]),
        ));
  }
}

//Class Widget
class ListItem extends StatelessWidget {
  const ListItem({
    required this.page,
  });

  final int page;

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(8),
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
            border: Border.all(width: 1),
            borderRadius: BorderRadius.circular(16),
            color:
                page % 2 == 0 ? Colors.black87 : Colors.transparent),
        child: Text("$page",
            style: TextStyle(
                color:
                    page % 2 == 0 ? Colors.white : Colors.black87)));
  }
}

---

차이점

언뜻 보면 비슷해 보이지만 둘의 차이는 아래와 같습니다.

Function Widget

const 사용이 불가능하여

상태가 변경되면 새로 빌드 하지 않아도 될 Widget 이어도 빌드가 반복되어 진행된다.

   → 즉, 불필요한 Rebuild 발생

💡 Rebuild는 왜 발생하나요?

이는 setState로 인해 상태가 변경되었을 때 전체 build Method가 다시 만들어지기 때문입니다.

추가적으로 애니메이션 사용 시에 제대로 동작하지 않는다는 문제 또한 존재합니다!

사용시 장점

• 내부 변수들을 사용하기에 편하다.
• 코드가 비교적 적다.

그에 반해서 Class Widget은?

Class widget

const 사용이 가능하여

상태가 변경되어도 빌드가 중복되지 않는다.

   → 단, 변수 전달이 복잡한 경우가 있으며
     Function Widget에 비해 코드가 길다.

사용시 장점

• 에러 메시지를 더욱 정확하게 확인할 수 있다.
• Flutter Inspector 사용이 더욱 쉬워진다.
• 별도의 context 사용이 가능하다.
• 앱 성능 최적화에 긍정적이다.

---

각자 장점 면에서는 성능이냐 개발자의 편리함이냐의 차이가 있지만

역시 성능을 생각하면 Class 방식 사용을 지향하는 것이 좋습니다.