Stateless 그리고 Stateful

Futter를 하면서 가장 먼저 맞이한 신세계중 하나가 StatelessWidget 그리고 StatefulWidget 이였다.

이름 그대로 상태(State)가 있고 없는 것을 클래스를 생성하는 단계에서 구분해서 생성해주어야 한다.

만일 Stateless로 만들었는데, 상태 변화가 필요하다고 하면 몹시 귀찮게도 Stateful로 변경을 해주어야만 한다.

 

StatelessWidget의 경에는 상태가 변함 없는 화면을 구현하는 경우에 사용하게 된다.

import 'package:flutter/material.dart';

class FlutterTest extends StatelessWidget {
  final Color color;
  final String text;

  const FlutterTest(this.color, this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
        color: this.color,
        child: Text(this.text)
    );
  }
}

만일 FlutterBox가 한번 그려진 이후에는 , FlutterTest의 color와 text의 값이 변하게 되더라도 Container의 값은 변하지 않는다. 그래서 변수를 아예 fianl로 선언해준다. 한번 그려지고 변화가 없는 경우에만 사용한다.

 

값이 변해야 하는 경우에는 StatefulWidget을 사용해야 한다.

import 'package:flutter/material.dart';

class FlutterTest2 extends StatefulWidget {
  Color colors;
  String text;
  FlutterTest2({super.key, required this.colors, required this.text});

  @override
  State<FlutterTest2> createState() => _FlutterTest2State();
}

class _FlutterTest2State extends State<FlutterTest2> {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: widget.colors,
        child: Column(
          children: [
            Text(widget.text),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  widget.colors = widget.colors == Colors.blueAccent ? Colors.amberAccent : Colors.blueAccent;
                });
              },
              child: Text('changeColor'),
            ),
          ],
        ),
    );
  }
}

이전 화면에서 colors와 text를 받아서 화면을 그리게 되지만, 버튼에서 setState를 활용해서 변경을 해주면 화면에 새롭게 반영하게 된다.

 

일정이 급하다 보니 적응이 덜된 상태로 시작해서 초반엔 위젯을 많이 나누지 않고 하나의 화면에 모두 때려넣는 방식으로 하다보니 계속해서 Stateful로 만들었는데, 최근에는 조금 많이 나누기 시작했다.

 

참고자료

https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html