[Flutter로 iOS 앱 개발하기] 첫번째 플러터 앱 시작하기

Udemy 사이트에서Flutter 강좌 를 수강 중입니다!
공부하는 내용을 최대한 정리하여 업로드 하려고 합니다.
* Mac을 기준으로 합니다.

* Material 디자인이란?

iOS의 감성을 따라잡고자, 모바일 뿐만 아니라 다른 기기에서도 통일성 있는 사용자 경험을 제공하고자 Google에 의해 개발되었다. 플랫 디자인의 가이드라인이라고 생각할 수 있다.

참고 : material.io

Material Design

 

Flutter 앱 시작하기!

새로운 Flutter App 을 생성하여, 다음과 같이 코드를 입력한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Text('Hello World')));
}

저장하고, iOS simulator를 실행하면, 나의 경우에는 아래와 같은 에러가 발생했다.

Unimplemented handling of missing static target

 

이유는 모르겠지만,, 처음 실행할 때는 Cmd + Shift + \ 단축키를 사용하여 실행했더니 실행이 잘 됐다..! 🤨 (구글링 짱,, 👍🏻)

 

실행을 하면 iOS Simulator에서 다음과 같은 화면을 확인할 수 있다.

Text 위젯의 경우, 기본적으로 왼쪽 상단에 정렬이 된다.

Text를 가운데 정렬하고 싶을 경우, Center 위젯 내에 Text 위젯을 배치해주면 된다.

void main() {
  runApp(MaterialApp(home: Center(child: Text('Hello World'))));
}

그러면, 아래와 같이 Text가 가운데에 위치하는 것을 볼 수 있다.

* 자동으로 코드 들여쓰기 정리하기

아래와 같이 닫는 괄호 뒤에 쉼표(,)를 삽입해주면, 마우스 우클릭 후 Reformat Code with dartfmt 를 실행하였을 때 코드가 예쁘게 정리된다!

void main() {
  runApp(MaterialApp(home: Center(child: Text('Hello World'),),),);
}

<Reformat Code with dartfmt 후>

void main() {
  runApp(
    MaterialApp(
      home: Center(
        child: Text('Hello World'),
      ),
    ),
  );
}

 

💡Preferences - Languages & Frameworks - Flutter 에서 Format code on save에 체크를 해주면, 코드를 저장할 때마다 자동으로 Reformat이 실행된다.

* Flutter 개발을 위한 Android Studio 설정 팁 참고

2020/10/04 - [💻 Programming/Flutter] - [Flutter로 iOS 앱 개발하기] Flutter 개발 환경 설정 - Android Studio 설정 추천