[Flutter] StatelessWidget vs StatefulWidget

📌  이번 글은

Flutter Widget을 만들 때 상속받는 StatelessWidget과 StatefulWidget의 차이점 정리입니다.

먼저 두 위젯은 Scaffold를 이용해 동일한 방식으로 화면을 구성합니다.

 

 

StatelessWidget (SLW)

• 단 한번만 build 하여, 화면을 한 번만 그린다.
• 정적 화면 구현시에 사용하면 성능상 좋다.

👩🏻‍💻 예제

class SLWPage extends StatelessWidget {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('StatefulWidget Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "$_count",
                style: const TextStyle(fontSize: 30),
              ),
              ElevatedButton(
                onPressed: () {
                    _count++;
                  print('onPressed : $_count');
                },
                child: const Text('+'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

'+' 버튼을 눌러도 Text 위젯은 반응이 없습니다.

그러나 콘솔에서는 _count 값이 계속 증가합니다.

 

 

이렇게 동적으로 변하는 위젯이 포함된다면 SFW를 사용하면 됩니다!

 

StatefulWidget (SFW)

• state를 포함.
• setState가 발생할 때마다 build 한다.
• 동적 화면 구현에 용이.

👩🏻‍💻 예제

class SFWPage extends StatefulWidget {
  @override
  _SFWPageState createState() => _SFWPageState();
}

class _SFWPageState extends State<SFWPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('StatefulWidget Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "$_count",
                style: const TextStyle(fontSize: 30),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _count++;
                    print('onPressed : $_count');
                  });
                },
                child: const Text('+'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

'+' 버튼 -> onPressed() -> setState()를 이용하여 위젯을 build 시켰습니다.

_count의 증가에 따라 Text 위젯이 build 되면서 변화합니다!

 

 

 

🐱 Github 전체소스 데모 프로젝트 바로가기 🐱

GitHub - SuniDev/flutter_sfw_vs_slw: [Flutter] StatelessWidget vs. StatefulWidget Demo

 

🙋🏻‍♀️ 참고

[Flutter] StatelessWidget & StatefulWidget 차이점 정리