[Flutter] Hello, Flutter~ 개발 환경 구축하기(for Mac)

본 게시물는 Flutter와 관련된 다양한 예제 및 개발에 대해서 살펴봅니다.

 

 

#. 구독 대상

• Flutter를 통하여 앱을 개발해보고자 하시는 분
• 모바일 앱 개발에 관심이 많으신 분
• 비전공자 및 여성 개발자
• 최대한 앱 개발에 대해서 빠르게 학습하시고 싶으신 분
• 기타 소프트웨어 개발과 지식에 관심이 있으신 모든 분들

 

 

---

 

 

Get Started

 

Flutter는 모바일 앱 개발을 위해서 제공되는 멀티(크로스)플랫폼 GUI SDK로서 다양하고 아름다운 UI 프레임워크를 손쉽게 적용할 수 있다는 점에서 매우 매력적인 개발 툴이며 현재 많은 모바일 앱에서 해당 SDK를 활용하여 개발 및 서비스를 하고 있습니다.

 

오늘은 그러한 Flutter를 학습하기 위한 첫걸음으로서 Flutter 설치 및 개발을 위한 개발 환경 구축에 대해서 살펴보겠습니다.

 

그리고 어떠한 프로그래밍 언어를 배우든 항상 다루게 되는 Hello, Flutter 샘플앱도 한번 구현하고 실행해보도록 하겠습니다.

 

그럼 지금 바로 시작하겠습니다~

 

 

 

Flutter

 

Flutter는 현재 Google에서 2017년 5월에 출시한 크로스 플랫폼 GUI SDK입니다. 출시 이후 다양한 의견들이 많았지만 현재는 그래도 다수의 메이저 및 스타트업 기업들이 도입하고 앱을 출시하고 있습니다.

 

아래는 공식 Flutter 홈페이지입니다.

 

https://flutter.dev/?gclid=Cj0KCQiAmpyRBhC-ARIsABs2EApKpFURvuBJKd1CeGQAIAfhLDpvUs4JROxe5IHyxSobVoBiM4KA6qoaAqcDEALw_wcB&gclsrc=aw.ds 

Flutter - Build apps for any screen

 

 

 

그렇다면 Flutter의 소개는 이쯤하고 우리가 오늘 알아보고자 하는 Flutter 개발환경 구축에 대해서 짧고 굵게 알아보겠습니다.

오늘 알려드리는 내용은 Mac을 기준으로 소개해드리는 점을 참고하시고 봐주시면 감사하겠습니다.

 

 

#. 개발 환경

• Operating Systems : macOS
• OS Version : 11.6.2
• Xcode 13.1
• Android Studios 4.1.1

 

 

 

 

 

---

 

설치할 목록

• Flutter SDK
• Android Studio
• Xcode

 

1. Flutter SDK

 

1) 위에서도 알려드린 Flutter 공식 홈페이지로 이동합니다. Flutter 공식 홈페이지 진입 후 우측 상단의 Get started -> Install  메뉴를 선택합니다. 오늘은 Mac OS를 기준으로 하기에 아래와 같이 macOS 버튼을 선택합니다.

 

 

 

2) Get the Flutter SDK 항목 아래 'flutter_macos_x.x.x-stable.zip' 버튼을 눌러 SDK를 현재 맥에 다운로드 받습니다.

 

 

 

3) 파일 다운로드를 하고 원하는 폴더에 압축을 풀어 Flutter SDK를 설치한다. Flutter 공식 홈페이지에서는 development 라는 폴더를 만든 후 해당 폴더에 Flutter SDK를 설치하도록 가이드하고 있습니다.

 

본 강의에서는 아래와 같이 Developments 폴더를 생성한 후 해당 폴도에 해당 Flutter SDK를 설치하였습니다.

 

 

4) 터미널을 활용하여 커맨드 입력을 활성화하기 위하여 PATH를 설정합니다.

 

우선 본인의 맥에서 터미널을 실행시킨 후 flutter 라고 입력을 해봅니다.

 

아래와 같이 '-bash: flutter: command not found'라고 메시지가 입력되면 .bash_profile 파일에 환경 변수 PATH를 또는

'bin/zsh : flutter: command not found' 라고 나오면 .zshrc 파일에 환경 변수 PATH를 입력하면 됩니다.

 

 

 

 

 

 

 

 

본 맥에서는 bash 관련 에러가 나오므로 .bash_profile 파일에 PATH를 입력해보도록 하겠습니다.

 

 

5) 터미널에서 'vim .bash_profile' 이라고 입력합니다. 만약 해당 파일이 없을 경우는 새로 만들어지고 있는 경우는 이전에 있던 내용이 표시되면 해당 파일로 이동하게 됩니다.

 

 

 

 

 

 

6) .bash_profile 파일을 오픈 후 편집 모드로 변경하기 위하여 키보드 'i' 키를 입력합니다. i 키를 입력하면 아래와 -- INSERT --

표시와 함께 입력 모드로 변경됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7) 아래와 같이 아까 설치한 경로의 PATH를 입력합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8) 입력 완료 후 파일 저장을 위하여 키보드 esc 키를 입력 후 아래와 같이 :wq(저장 후 종료)를 입력하여 저장 후 파일 편집을 종료합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9) 최종 PATH 설정이 잘 되었는지 확인해보겠습니다. 새로운 터미널 화면을 실행키켜 다시 한번 flutter 를 입력하면 아래와 같이 정상적으로 커맨드가 적용되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Android Studio

 

1) Flutter 개발을 위해서 다양한 IDE를 설치하여 개발을 할 수 있습니다. 본 강좌에서는 많은 Android 개발자들이 익숙한 Android Studio를 활용하도록 하겠습니다.

 

설치 방법은 아래의 공식 Android Studio 페이지에서 다운로드를 하면 됩니다.

 

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

 

2) Android Studio 설치 완료 후 기본적인 Flutter 및 Dart 플러그인을 설치해줍니다.(Android Studios -> 환경설정(Preferences) ->  Plugins -> 'Flutter 및 Dart 검색')

 

3. Xcode

 

1) iOS 컴파일 및 개발을 위해서는 반드시 Xcode를 설치해야 합니다. 또한 애플은 기본적으로 실제 단말기에서 개발을 하기 위해서는 반드시 유료 개발자로 등록을 하여야만 개발이 가능한 점도 참고 바랍니다.

 

아래는 Apple의 Xcode 공식 홈페이지 입니다.

 

https://developer.apple.com/kr/xcode/

Xcode - Apple Developer

 

 

 

Hello Flutter

 

이제 Flutter 개발을 위한 기본 개발 환경을 모두 마쳤습니다. 그럼 한번 간단한 Flutter 앱 프로젝트를 만든 후 Hello Flutter를 한번 출력하는 앱을 만들어 보겠습니다.

 

 

1) Flutter 프로젝트 생성

 

아래와 같이 Android Studio -> File -> New Flutter Project 를 선택합니다.

 

 

 

 

 

프로젝트 이름 및 기본 설치 위치 등을 설정합니다.

 

패키지명을 입력 후 최종 Finish 버튼을 눌러 프로젝트를 생성합니다.

 

 

2) main.dart에 Hello Flutter 관련 코드 작성

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

 

3) 앱 소스 빌드 및 실행

 

최종 적용한 소스를 컴파일 실행을 해보면 아래와 같은 화면이 출력됩니다. 아래는 iOS 시뮬레이터로 실행한 예시 화면입니다.

이렇게 간단한 소스 적용으로 너무나 쉽게 Hello Flutter 텍스트를 출력하였습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Flutter 공식 가이드 페이지에서도 Hello World 라는 샘플 코드 및 Flutter 앱 개발에 관한 기초 학습 내용도 자세히 소개되었으니 Flutter를 처음 접하신 분들께서는 Flutter 개발에 대한 기본 개념을 잡기 위하여 한번쯤 방문하여 살펴보시길 바랍니다.

 

https://flutter-ko.dev/docs/get-started/codelab

첫 Flutter 앱 작성하기 - 1부

 

 

 

 

---

 

 

 

 

 

이상으로 오늘 Flutter 기본 개발 환경 설치 방법 학습 및 Hello Flutter 샘플앱을 같이 만들어보았습니다.

 

그럼 긴 글을 읽으시느라 모두들 고생 많으셨으며 즐거운 휴일 되시길 바랍니다.

 

 

 

감사합니다.