[Flutter] Flutter의 UI 구조

지난 포스팅에 이어 Flutter UI 구조에 대해 알아보려 합니다.

 

Flutter 프로젝트에 WebView를 추가한 소스 코드를 가져왔습니다.

void main() => runApp(WebViewTestApp());

class WebViewTestApp extends StatelessWidget {
  const WebViewTestApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  WebViewPage({Key? key}) : super(key: key);

  @override
  State<WebViewPage> createState() => WebViewPageState();
}

class WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://www.naver.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

 

위 소스를 보면 StatelessWidget 클래스를 상속받은 클래스 등 StatefulWidget, MaterialApp, Scaffold 

처음 접하는 이름들이 많습니다.

 

순서대로 확인해보며 개념을 다져보겠습니다 !-!

 

State

State는 위젯의 상태를 저장하며 위젯이 생성될 때 위젯의 속성을 유지하는 객체입니다.

 

StatelessWidget

StatelessWidget 클래스는 상태가 없는 위젯을 정의하는 데 사용됩니다.

상태를 가지지 않는다는 것은 한번 그려진 후 다시 그리지 않으며, 이 클래스는 프로퍼티로 변수를 가지지 않습니다.

 

특징으로는

• StatelessWidget 클래스는 build() 메서드를 가지고 있는데 build() 메서드는 위젯을 생성할 때 호출됩니다. 이는 실제로 화면에 그릴 위젯을 작성해 반환합니다.
• StatelessWidget 클래스를 상속받은 WebViewTestApp 클래스는 MaterialApp 클래스의 인스턴스를 작성해 반환합니다.

아직 잘 모르겠습니다. 그렇다면 MaterialApp 클래스는 뭐지

 

MaterialApp

Flutter는 Material Design을 기반으로 위젯이 만들어집니다. 

MaterialApp은 Material Design을 사용할 수 있게 해주는 클래스인 셈이죠.

 

MaterialApp의 속성은 다양하지만 이번 포스팅에서는 대표적인 3개만 다루겠습니다.

 

• title
• home
• theme

위 프로퍼티들을 설정하여 위젯의 속성을 표현합니다.

 

추가로 debugShowCheckedModeBanner 앱 우측 상단에 Debug 표시를 나타내는 속성도 있습니다. 값은 bool 타입입니다.

StatefulWidget

StatefulWidget 클래스는 데이터와 연동되며 사용자의 입력이나 데이터 수신 등에 의헤 발생한 이벤트에 의해서 상태가 변경되는 위젯입니다.

 

• Stateless와 다른 점은 Stateful 위젯은 State 위젯이 내부에 존재합니다.
• Stateful widget이 rebuild 되는 경우는 Child 위젯의 생성자를 통해 데이터가 전달되거나 Interal state가 변경될 때 입니다.

추가로 createState() 메서드는 Stateful 위젯이 호출될 때마다 실행됩니다.