[Flutter/플러터] 플러터 StatefulWidget 클래스 알아보기

안녕하세요!

플러터의 StatefulWidget 클래스에 대해 알아보겠습니다. 플러터 샘플 앱 분석의 일환으로, 샘플 앱 전체 구조는 아래 글을 참고 바랍니다.

 

[Flutter/플러터] 플러터 샘플 앱 분석하기

 

StatefulWidget

• 상태가 있는 위젯을 정의할 때는 StatefulWidget 클래스를 사용
• StatefulWidget 클래스는 StatefulWidget을 상속받은 MyHomePage 클래스와 State<MyHomePage> 클래스를 상속받은 _MyHomePageState 클래스로 구성됨

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});	//1

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();	//2
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;	//변경 가능한 상태 3
 
 ...생략...
 
  @override
  Widget build(BuildContext context) {	//4
    return Scaffold(...생략...)
    }
}

 

1. MyHomePage 클래스의 생성자는 key와 title 프로퍼티를 옵션으로 받아서 super 키워드로 부모 클래스의 생성자에 key를 전달함
2. MyHomePage 클래스에는 상속받은 createState() 메서드를 재정의하여 _MyHomePageState 클래스의 인스턴스를 반환함. 이 메서드는 StatefulWidget이 생성될 때 한 번만 실행되는 메서드
3. State 클래스를 상속받은 클래스를 상태 클래스라고 함. 상태 클래스는 변경 가능한 상태를 프로퍼티 변수로 표현함. 나중에 이 변수의 값을 변경하면서 화면을 다시 그리게 됨.
4. _MyHomePageState 클래스의 상태에 따라 화면에 그려질 코드를 여기에 작성. 모양새는 StatelessWidget 클래스와 같음. build() 메서드를 가지고 있고 여기에 화면에 그려질 부분을 정의