Flutter 4주차 - 정적인 화면 만들기

Flutter 4주차 - 정적인 화면 만들기

 

이번 주차에서는 위젯의 클래스에 대해서 알아보고 StatelessWidget을 활용해 정적인 화면을 만들어 볼 예정이다.

 

 

목차

 

 

위젯의 3가지 클래스

 

개발자가 만드는 위젯은 아래 3가지 클래스 중 하나를 상속받아 구현하게 된다.

 

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

 

여기서 InheritedWidget은 상태 관리와 관련이 있으므로 나중에 상태 관리를 배울 때 자세히 다루기로 하고, 이 글에서는 StatelessWidget과 StatefulWidget에 대해 살펴보도록 하자.

 

 

StatelessWidget

 

StatelessWidget은 상태(State)와 연결되지 않는 위젯을 만드는 클래스이다. 여기서 상태는 '화면에 업데이트되는 데이터'를 의미한다.

즉, StatelessWidget은 처음 생성할 때의 정보로만 화면을 구성하고 이후에 화면의 내용이 바뀌지 않는 '정적인 화면'을 만들 때 사용한다.

 

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

 

StatelessWidget에도 변수나 함수를 선언할 수 있으며 함수에서 변수값을 바꿀 수도 있지만, StatelessWidget은 상태를 포함하지 않으므로 데이터가 변경되도 화면에는 적용되지 않는 특성을 가지고 있다.

 

 

 

정적인 화면 만들기

 

StatelessWidget을 활용하여 정적인 화면을 만들어보자.

 

lib 아래 ch8_3이라는 디렉터리를 만들고 여기에 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(
                icon: (enabled ? Icon(Icons.check_box, size: 20,) :
                    Icon(Icons.check_box_outline_blank, size: 20,)),
                color: Colors.red,
                onPressed: changeCheck,
                ),
              Container(
              padding: EdgeInsets.only(left: 16),
              child: Text('$stateText', style: TextStyle(fontSize: 30,
                          fontWeight: FontWeight.bold),),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

 

앱 내에 체크박스를 클릭하면 데이터가 변경되기는 하지만 StatelessWidget을 활용한 정적인 화면이므로 변경된 데이터가 화면에 반영되지는 않는 모습이다.