[Flutter] Offstage class 정리

728x90

반응형

Offstage class

offstage class는 말 그대로 stage에서 off(벗어난다)한다는 것으로 이해했다.

offstage class는 navigator와 비슷하게 페이지가 바뀌는 것처럼 보인다.
하지만, 새로운 페이지를 만들지 않아도 된다는 특징이자 장점이 있다.

또 다른 특징은 우리 눈에는 보이지 않지만 offstage 상태에서도 계속 실행되고 있기 때문에 우리 눈에 보이느냐 안보이느냐의 여부에 관계 없이 배터리가 소요된다.

이제 offstage에 대해 더 자세하게 이해하기 위해 예시 코드를 가져왔다.
전체 코드는 아래 링크로 두었으니 전체 코드가 궁금하다면 들어가길 바란다.

1. offstage를 실행하기 전에 먼저 true로 값을 설정해준다.

bool _offstage = true;

1. offstage가 true이면 물리적 공간이 눈에 보이지 않는다.
   반대로, offstage가 false이면 물리적 공간이 눈에 보인다.

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Offstage(
          offstage: _offstage,
          child: FlutterLogo(
            key: _key,
            size: 150.0,
          ),
        ),
        Text('Flutter logo is offstage: $_offstage'),
        ElevatedButton(
          child: const Text('Toggle Offstage Value'),
          onPressed: () {
            setState(() {
              _offstage = !_offstage;//false로 초기 설정한 값이 버튼을 누를 때마다 값이 바뀐다.
            });
          },
        ),
      ],
    );
  }

<초기화면>

<버튼 누른 후 화면>

전체 코드
https://dartpad.dev/?id=2bad6eb52a25efd3df702370db842253