Flutter Chapter-01-01 Material 디자인과 Widget(위젯) 사용법

머트리얼 디자인이란 구글에서 일관된 디자인을 적용시키기 위해 만들어진 기본 틀이다.

기본적으로 Flutter 플러터는 해당하는 디자인을 구현하게 구성되어 있으며 해당하는 위젯 사용법은 아래 웹 사이트를 참조하면 더 좋을 것이다.

 

https://material.io/design

Material Design

 

MaterialApp을 사용할때 가장 중요한 점은 home 이다.

해당하는 home에서 부터 앱이 시작되기때문이다.

그럼 간단한 코드를 보고 동작시켜보겠다.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: Text('Hello World'),
    ));

해당하는 코드를 실행하면 아래와 같이나오는 것을 확인 할 수 있다.

이유는 runApp을 통해서 MaterialApp을 실행 시키고 해당하는 홈 부분에 텍스트 위젯을 추가 시켰기 때문 좀 더 정확 하게 하기위해서 Center위젯을 추가시켜 보도록 하겠다.

 

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: Center(child: Text('Hello World')),
    ));

Center위젯을 추가시킴으로써 텍스트 위젯이 가운데로 정렬이 된 것을 확인 할 수 있다.

어떻게 동작되는가 설명 하도록 하겠다.

기본적으로 위젯은 트리 형식으로 구현이 되어있다.

때문에 MaterialApp -> Center -> Text가 실행 되는 것을 알 수 있다.

도식으로 살펴 보면 아래와 같은 그림이 되겠다.

코드 실행화면

 

 

위젯은 트리형식으로 구현되며 아래 이미지 처럼 순차적으로 구현 된다.

1, 2번의 트리 형식 구조

기본적으로 어떻게 플러터가 동작 되는지 배워 보았고, Chapter-01-02는 Scaffold와 이미지 불러오는 방법을 올리겠다.