[Flutter] 플러터 기본 틀과 메커니즘

플러터 기본 틀과 메커니즘에 대해서 코드 분석을 통해 알아보자.

우리가 이번에 만든 기본 틀은 다음 사진과 같다.

<만들어 보자!>

코드

import 'package:flutter/material.dart';

void main()  => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어!

// StatelessWidget은 변화지 않는 화면을 작업할 때 사용.
// 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용.
class MyApp extends StatelessWidget {

  // MaterialApp = 앱으로서 기능을 할 수 있도록 도와주는 뼈대
  @override
  Widget build(BuildContext context) {

    // return MaterialApp() -> Material 디자인 테마를 사용 
    return MaterialApp(
      title: "MyApp", // 앱 이름
      debugShowCheckedModeBanner: false, // 타이틀 바 우측 띠 제거

      // 앱의 기본적인 테마를 지정
      theme: ThemeData(
        primarySwatch: Colors.blue, // priamrySwatch 기본적인 앱의 색상을 지정
        ),

      home: MyWidget(), // 앱이 실행될 때 표시할 화면의 함수를 호출
      );
  }
}

// 앱이 실행 될때 표시할 화면의 함수
class MyWidget extends StatelessWidget {

  // scaffold = 구성된 앱에서 디자인적인 부분을 도와주는 뼈대
  // 화면 구성
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      // appBar에 AppBar 위젯을 가져온다.
      appBar: AppBar(title: Text("study"), // 타이틀 이름 지정
      centerTitle: true, // 타이틀 이름을 가운데 정렬
      elevation: 0.0, //elevation 속성을 통해 그림자 효과 제어
      ),

      // 앱의 body 부분 
      body: Container( // Container 위젯을 가져온다.
        height: 200, // 높이
        width: 200, // 너비
        color: Colors.red, // 색
      )
    );
  }
}

위 코드를 작성하고 분석해보자.

코드를 보게 되면 main(), class MyApp extends StatelessWidget {}, class MyWidget extends StatelessWidget {} 이렇게 크게 3가지로 나눌 수 있다.

main()

프로그램이 실행될 때 제일 먼저 실행되는 메서드이다.

runApp() 함수는 플러터 최상위 함수로 한 번만 호출되며 runApp() 함수 안에는 위젯이 들어와야 한다.

class MyApp extends StatelessWidget {}

StatelessWidget은 변화지 않는 화면을 작업할 때 사용된다. 변화는 화면을 작업하고 싶을 경우에는 StatefulWidget을 사용한다.

MyApp은 MaterialApp()을 return 하고 있다. Material 디자인 테마를 사용할 수 있고 MaterialApp이란 앱으로서 기능을 할 수 있도록 도와주는 뼈대라고 생각하면 좋을 거 같다.

home은 앱이 실행될 때 표실할 화면의 함수를 호출하거나 작성하는 것으로 위 코드에서는 MyWidget() 함수를 호출하는 것을 확인할 수 있다.

class MyWidget extends StatelessWidget {}

이제 앱이 실행될 때 표시할 화면을 구성할 차례이다.

Scaffold는 구성된 앱에서 디자인적인 부분을 도와주는 뼈대라고 생각하면 좋을 것 같다. Scaffold 안에 다양한 위젯을 배치할 수 있다. 

appbar에 AppBar 위젯을 가져와 타이틀에 텍스트 위젯을 가져와 타이틀의 이름을 지정해준다.

앱의 body 부분에는 Container 위젯을 가져와 크기를 조정하고 색을 입혔다.

참고

Flutter 레이아웃