[Flutter] 3주차 스터디_Flutter 시작하기

1. Flutter 소개

- 구글이 만든 프레임 워크로 iOS, 안드로이드, 윈도우, 리눅스등과 같은 멀티 플랫폼 개발을 지원한다
- 다트 언어로 작성하기 때문에 미리 다트 언어를 학습하는 것이 필수이다.

1.1 Flutter를 학습해야 하는 이유

- 웹/맥OS/윈도우/리눅스 심지어 임베디드, IoT와 같은 다양한 플랫폼을 지원하는 크로스플랫폼이다.
- html, css, java script와 같은 내용들을 학습하지 않아도 웹을 만들 수 있다.
- 애니메이션, 게임과 같은 다양한 그래픽도 flutter 하나로 구현할 수 있다.

1.2 Flutter의 실행 방식

Flutter 실행 방식

다른 프레임 워크는 운영체제에게 직접 text, button과 같은 요소를 만들어달라고 요청한다.
하지만 Flutter는 실행할 때 엔진에 의해서 만들어지는 것이다.

1.3 Flutter와 React Native의 차이

Flutter는 위에서 말한 것처럼 운영체제에서 만들어주는 것이 아닌 Flutter의 개별 엔진이 화면상의 모든 픽셀을 그려주는 것이기 때문에 네이티브 앱들이 지니고 있는 컴포넌트, 위젯을 사용할 수 없다.
즉 운영체제에서 지원하는 통일된 규격으로 사용할 수 없다는 것이다. 이것은 단점일 수도 있지만 flutter는 세밀한 디자인을 할 수 있으며 애니메이션 커스터마이징이 가능하기 때문에 개발하는 것의 특성을 맞춰서 선택하는 것이 좋을 것 같다.

정리하자면 개발하는 것이 개인적이고 창의적인 디자인이면 Flutter를 사용하고 운영체제에서 지원하는 스타일과 같아야 한다면 React Native를 사용하는 것이 좋다.

 

2. Flutter 설치하고 실행하기

Flutter 공식 문서에서 지원하는 방식보다 각자 운영체제에 맞춰서 다운로드 받아준다.

• 윈도우
  1. https://chocolatey.org/install 접속
  2. individual 선택 후
  3. powershell 다운로드
  4. powershell을 관리자권한으로 실행
  5. 차례대로 명령어 입력
  6. choco install flutter 작성
• 맥
  1. https://brew.sh/ 접속
  2. 다운로드 후 차례대로 명령어 입력

이후에는 flutter 공식 문서를 참고하며 각자 사용할 애뮬레이터 또는 시뮬레이터를 다운로드해준다.
다운로드하다가 오류가 생긴다면 flutter doctor 커멘드를 작성해서 이유를 확인할 수 있다.

위와 같은 방법이 어렵다면 https://dartpad.dev/ (다트패드)를 사용해서 개발해도 된다.
하지만 다트패드는 새로운 파일을 만들지 못하기 때문에 참고해야 한다. 상단의 Samples를 Counter로 변경해서 사용하면 된다.

2.1 Flutter 시작하기

Flutter를 개발하기 원하는 폴더로 이동한 후 터미널(혹은 cmd)에 'flutter create (원하는 이름)'을 작성하면 프로젝트가 생성된다.

flutter create studyFlutter

이후 VS Code를 실행해 준다. 확장에서 dart, Flutter를 다운로드해 주고 VS Code를 다시 시작해 준다.

• 우측 하단에 있는 버튼으로는 원하는 애뮬레이터(시뮬레이터)를 변경할 수 있다.
• lib 폴더 안에 있는 파일이 메인 파일이다.
• Flutter에서는 우측 상단에 있는 디버깅을 실행하면 디버깅 내용을 볼 수 있다.
  ※ dart DevTools가 보이지 않는다면 lib 폴더 안에 있는 main.dart 파일을 선택하고 우측 하단에 있는 {}에 마우스 오버하면 볼 수 있다.
• 저장하면 애뮬레이터가 바로바로 수정되는 것을 확인할 수 있다.

2.2 Flutter 실행해 보기

Flutter의 기본 내용

• Flutter는 모든 것이 위젯으로 구성되어 있다. 위젯을 조합해서 화면을 구성하는 것이다.
• Flutter에서 위젯을 만든다는 것은 class를 생성한다는 것과 같은 뜻이다.
• class를 생성할 때 Flutter SDK에 있는 core Widget인 StatelessWidget이나 StatefulWidget 중에 하나를 꼭 상속(extends) 받아야 한다. 
• 모든 위젯은 꼭 build method를 구현해야 한다. 이때 build method는 위젯의 UI를 만드는 것이다.
• 앱의 root Widget은 두 개의 옵션 중에 하나를 꼭 return 해야 한다.
  1. material app(구글 디자인 시스템)     2. cupertino app(애플 디자인 시스템) 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //시작하는 root Widget
}

class MyApp extends StatelessWidget { //coreWidget 상속
  @override
  Widget build(BuildContext context) { //build Method 구현
    return MaterialApp( //디자인 선택
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter!'),
        ), // AppBar
        body: Center(
          child: Text('Hello World!'),
        ), // Center
      ), // Scaffold
    ); // MaterialApp
  }
}

클래스를 생성할 때마다 , 를 찍으면 어떤 위젯인지 주석을 달아준다.

실습에서 Scaffold() 위젯을 사용했는데 이 위젯은 화면을 상/중/하로 나누어준다.

MaterialApp(
  home: Scaffold(
    appBar: 상단에 넣을 위젯,
    body: 중단에 넣을 위젯,
    bottomNavigationBar: 하단에 넣을 위젯,
  )
);

상단, 하단은 필수는 아니고 body만 필수이다.

위젯의 필수 파라미터는 소괄호 안에 ctrl + space를 누르면 확인이 가능하다.
맥북은 다른 것이 뜨기 때문에 다른 걸로 변경해주어야 합니다.

 

---

Flutter의 특징과 주의할 점

특징

- 화면을 위젯으로 구성하기 때문에 원하는 대로 화면을 구성할 수 있다.
- 크로스플랫폼 개발을 지원한다.

주의할 점

- 모든 화면은 위젯으로 구성되어 있다. 필수 구성 요소를 잘 확인하고 작성해야 한다.
- iOS 애뮬레이터를 실행하려면 Xcode 다운로드가 필수인데 오류가 많아서 다운로드할 때 신중해야 한다.

---

참고 자료

Flutter - Build apps for any screen

 

Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders