정적인 화면 만들기

개발자가 만드는 위젯은 다음 3가지 클래스 가운데 하나를 상속받아 작성합니다. 여기서 InheritedWidget은 상태 관리와 관련이 있으므로 18장에서 자세히 다루기로 하고, 여기서는 StatelessWidget과 StatefulWidget을 살펴보겠습니다.

• StatelessWidget: 상태를 관리하지 않는 정적인 위젯
• StatefulWidget: 상태를 관리하는 동적인 위젯
• InheritedWidget: 여러 위젯에서 공통으로 이용할 상태 관리 위젯

StatelessWidget은 상태와 연결되지 않는 위젯을 만드는 클래스입니다. 여기서 상태는 화면에 업데이트되는 데이터를 의미합니다. 즉, StatelessWidget 클래스는 화면에 업데이트 되는 데이터와 연결할 수 없으므로 처음 생성할 때의 정보로만 화면을 구성할 수 있고 이후에 화면의 내용이 바뀌지 않는 화면, 즉 정적인 화면을 만들 때 사용합니다.

 

정적인 화면을 만들 때는 StatelessWidget을 상속받는 클래스를 선언하고 여기에 build() 함수를 재정의합니다. build() 함수는 자동으로 호출되며 이 함수에서 반환하는 Widget 객체가 출력할 화면 정보입니다.

// 정적인 화면 만들기
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      ..(생략)..
    );
  }
}

 

StatelessWidget은 상태를 포함하지 않으므로 데이터가 변경돼도 화면에 적용되지 않습니다. 물론 StatelessWidget에도 변수나 함수를 선언할 수 있으며 함수에서 변숫값을 바꿀 수 있습니다. 단지 변숫값을 변경해도 화면에 적용되지 않는다는 의미입니다.

 

정적인 화면 만들기

StatelessWidget을 활용해 정적인 화면을 만들어 보겠습니다. 화면의 아이콘을 클릭하면 위젯의 데이터가 변경되게 만들어 보겠습니다. 다만 StatelessWidget을 활용한 정적인 화면이므로 변경된 데이터가 화면에 반영되지는 않습니다.

 

1단계 다트 파일 작성하기

lib 아래 stateless라는 디렉터리를 만들고 여기에 test.dart 파일을 만든 후 다음처럼 코드를 작성합니다. 그리고 앱을 실행해 아이콘을 클릭할 때 모양이 바뀌는지 확인합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  bool enabled = false;
  String stateText = "disable";

  void changeCheck() {
    if (enabled) {
      stateText = "disable";
      enabled = false;
    } else {
      stateText = "enable";
      enabled = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Test'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                onPressed: changeCheck,
                icon: (enabled
                    ? Icon(
                        Icons.check_box,
                        size: 20,
                      )
                    : Icon(
                        Icons.check_box_outline_blank,
                        size: 20,
                      )),
                color: Colors.red,
              ),
              Container(
                padding: EdgeInsets.only(left: 16),
                child: Text(
                  '$stateText',
                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}