Flutter - statelessWidget vs statefulWidget

statelessWideget

- 화면이 로드될 때 상태(state)가 없는 위젯

- 변경이 필요한 데이터가 없는것으로 이벤트에도 동작하지 않음

- 정적인 위젯

- 예시 : statelessWidget에서 버튼클릭시 카운트올리기

 

statefulWidget

- 화면이 로드될 때 상태(state)가 있는 위젯

- data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영

- 동적인 위젯

 

statelessWideget , statefulWidget 위젯 카운트 예시

 

-statelessWideget 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    int count = 0;
    void plusCount() {
      count++;
      print(count.toString());
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text('$count'), RaisedButton(onPressed: plusCount)],
        ),
      ),
    );
  }
}

 

클릭시 print

 

화면에서는 아무리 클릭을 해도 숫자가 변하지 않는 statlessWidget

 

-statefulWidget

 

import 'package:flutter/material.dart';

class StateFulPage extends StatefulWidget {
  const StateFulPage({Key key}) : super(key: key);

  @override
  _StateFulPageState createState() => _StateFulPageState();
}

class _StateFulPageState extends State<StateFulPage> {
  int count = 0;
  void plusCount() {
    setState(() {
      count++;
    });

    print(count.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text('$count'), RaisedButton(onPressed: plusCount)],
        ),
      ),
    );
  }
}

 stateless 코드와 마찬가지로 print에서는 똑같이 count가 증가되는걸 볼수있다.

하지만 statefulWidget에서 setstate를 통해 count의 상태가 눌릴때마다 그려져서 바뀌는걸 볼수있다