플러터란? 프로젝트 시작하기

플러터란?

플러터의 특징

• 운영체제와 직접적으로 소통하지 않음
  • 엔진이 코드를 반영함. (비디오 게임 엔진과 같음)
    • C/C++ → runner iOS → .ipa
    • C/C++ → runner Android → .apk
  • 단점 : 플랫폼의 native widget을 사용하지 않음. 운영체제에 의해 그려지는 게 아니라 렌더링 엔진에 의해 그려짐. 기존 위젯과 조금 달라서 어색함.
  • 장점 : 어플리케이션 호스트에 의존할 필요가 없음. 어떤 플랫폼에서든 똑같이 보임.
• Embedder : 다양한 플랫폼 위에서 엔진을 구동시킴.

React Native vs. Flutter

• RN
  • javascript로 호스트 운영체제와 대화.
  • 애니메이션 등을 패키지에 의존
  • 호스트가 제공하는 UI 사용에 좋음. → iOS, 안드로이드에서 다르게 보임.
• Flutter
  • RN보다 애니메이션, 슬라이딩이 쉬움.
  • 화면의 모든 px 통제하고 싶을 때
  • 전부 커스터마이징 해야할 때 추천됨

프로젝트 시작하기

설치하기

• 윈도우는 chocolatey.org 를 통해 설치
• 맥은 https://brew.sh/를 통해 설치
• brew install --cask flutter
• 이외 https://dartpad.dev/ 를 통해서 flutter를 실행시킬 수 있음 : 한 페이지에서 모든 코드를 작성해야한다는 단점이 있음

프로젝트 생성하기

flutter create <앱이름>

• VSCode에 flutter, dart extenstion 설치하기

플러터 프로젝트와 vscode

• lib 폴더의 main.dart에서 작성한 코드들이 뜸.
• 디버그 버튼을 이용해서 시뮬레이터에 앱이 빌드되는 것을 확인 → 코드 바꿀 시 즉각적으로 바뀜
• 모든 것이 widget을 만드는 방식으로 이루어짐.
  • widget을 만들기 = class를 만들기
  • 옵션에 위젯을 넣고 위젯에 위젯을 넣고….
  • widget의 방식에 익숙해지도록.
  • st만 입력해도 위젯을 만들 수 있음
• Stateless 위젯을 상속하려면 build 메소드를 구현해야함
  • build 메소드 : Widget의 UI를 만드는 것
  • override : 이미 있는 것을 override
• root는 material(android) 와 cupertino(ios) 디자인 중 하나를 선택해야함.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  // BuildContext 타입의 context
  Widget build(BuildContext context) {
    // material(android) 와 cupertino(ios) 디자인 중 하나를 선택해야함. 
    return MaterialApp(
      // home 에 다른 위젯을 넣음(Scaffold : 화면 구성 및 구조에 관한 정보)
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
        ),
        body: Center(
          child: Text('Hello world'),
           // Center: child를 center로 오도록하는 위젯
        ),
      ),
    );
  }
}

• new를 쓰던 안쓰던 상관 없음. dart 기본이 flutter에 적용됨
• Widget inspector (파란색 돋보기)

• 왜 파란 줄이 뜨는가
  • constant (const)는 수정할 수 없고 컴파일 전에 값을 알 수 있음. 최적화 가능. flutter에서도 같은 것이 적용됨. 몇몇 위젯은 constant
  • open user settings 에 다음 줄 추가 → 파란줄 뜨는 것을 자동으로 고쳐줌

"editor.codeActionsOnSave": {
    "source.fixAll": true
  },
// 파란줄 없앰 const로 바꿈

"dart.previewFlutterUiGuides": true,
// 부모 자식 관계 라인을 보여줌

• Code Actions : 전구 클릭시 Wrap with widget, Container, Padding 등으로 코드를 감쌀 수 있음 (또는 command + .) 을 이용할 수 있음
  • 또는 extract widget할 수 있음
• Extension Error Lens 설치 : 빨간색으로 코드에 어떤 에러가 있는지 표시
• const를 지워주는 경우가 있음(데이터를 미리 알 수 없을 때) → 지워지지 않으면 invalid value 에러가 뜸