01. flutter 화면출력해보기

 

오래만에 flutter 관련 내용 적네요.

이번에 flutter 동작을 한번 진행을 해볼려고 합니다.

 

저번에 cmd(명령 프롬프트)로 라이센스를 등록하셨으면 vscode로 emulator(에뮬)를 실행할 수 있습니다.

(아직 하지 못하셨으면 라이센스 등록을 해주셔야 합니다.)

 

그럼 먼저 vscode(Visual Studio Code)를 실행해보겠습니다.

 

▼flutter가 설치되어 있지 않을 경우▼

1. Extensions을 클릭해줍니다. (ctrl + shift + x)

2. flutter를 검색해줍니다.

3. flutter를 선택하여 설치해줍니다.

 

다음은 프로젝트를 만들어주는데 만들어보겠습니다.

view - Command Palette(ctrl + shift + p)를 눌러주세요. 그러면 입력칸이 나올텐데 flutter를 입력합니다.

뒤에 new project라고 되어 있는 항목을 선택해줍니다.

 

 

그럼 무엇을 선택할 것인지 물어보는데 어플(앱)을 선택해 줍니다.

선택을 하셨으면 저장할 폴더를 선택하라고 뜨는데 자신이 알기 쉽고 보기 편한 곳에 

폴더 하나를 만들어서 선택하시면 됩니다. (따로 관리하는 폴더가 있으면 해당 폴더에...)

 

 

다음은 프로젝트 이름을 설정하는 창이 나옵니다.

저는 여기서 flutter_test1라고 하겠습니다.

 

그럼 파일이 생성된 것을 확인하실 수 있습니다.

여기서 lib > main.dart부분을 들어가서 수정을 한번 해보겠습니다.

처음에는 main.dart 내용 전부를 지워주세요. 

다 지우셨으면 동작할 메인(main)이 필요하니 main함수를 넣겠습니다.

 

void main(){
  runApp()
}

 

앱을 실행하는데 아무 내용이 없으니 동작을 제대로 수행하지 않겠죠?

내용을 추가로 입력해줍니다.

 

MaterialApp을 선언해줍니다.

MaterialApp: 가장 기본이 되는 위젯. 위젯 상(트리)에서 가장 최상단에 위치

MaterialApp() 안에 home을 입력한 후 Scaffold를 입력해줍니다.

Scaffold 안에 body를 선언을 해주는데 이 부분은 실행경로라고 이해하시면 될 것 같습니다. 

(body에서 내용을 입력해도 실행은 되지만 보기도 불편하여 따로 빼서 작성하시는 걸 추천드립니다.)

Scaffold: MaterialApp의 화면 구성의 기본 배경

그럼 입력한게 별로 없을겁니다.

(body 부분은 밑에서 나올 클래스 이름을 지정해주시면 됩니다.)

내용을 따지자면:

1. 앱을 실행 -  runApp

2. 틀 구성  -  MaterialApp

3. 화면 구성 및 경로 지정  - Scaffold 

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: 클래스명(),
    ),
  ));
}

 

다음은 클래스를 만들어줘야하는데 들어가기 앞서 간단한 용어를 설명하겠습니다.

화면의 동작을 2가지로 나눌 수 있는데 statewidget, statelesswidget 입니다.

 

statewidget: 상황에 따라 화면을 갱신할 필요가 있을 때 사용 

statelesswidget: 화면의 갱신이 필요없는 정적인 화면 구성 시 사용 
(state + less + widget: less가 "거의 ~않다"의 뜻을 가지니 state(상태)가 거의 변하지 않는다고 기억해주세요)

 

일단 출력을 어떻게 하는지만 진행을 할 생각이라 statelesswidget로 진행을 하겠습니다.

'stl'을 입력하고 'ctrl + spacebar'를 눌러주세요.

그럼 "State less widget"이 있을 겁니다. 클릭해주세요.

 

 

그럼 이런 클래스가 생성되었을 텐데 클래스명을 body에서 선언했던 이름으로 변경해주세요.

 

변경하셨으면 밑의 Widget build 부분으로 가셔서 return 뒤의 문장을 제거해줍니다.

Text()를 입력하시고 출력하고 싶은 내용을 작성해주세요. 

작성하셨으면 다시 Text부분을 클릭하신 후 'ctrl + .'을 클릭해주세요. 

가운데서 보는게 편하겠죠. center를 클릭하겠습니다.

 

 

이번에는 방금 만든 center에서 'ctrl + .' 을 사용하여 위젯을 하나 만들어줍니다.

이 위젯에 SafteArea를 입력하여 각 기종에 맞게 표현하도록 합니다.

 

 Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Text(
          '플루터 시작합니다.',
          style: TextStyle(
            color: Colors.black,
            fontSize: 40,
          ),
        ),
      ),
    );
  }

 

 

에뮬레이터를 실행해보시면 아래와 같이 나올겁니다.