Wibaek Dev Blog/
Flutter 시작하기
Search

Flutter 시작하기

Published
October 3, 2024
Last updated
Last updated December 2, 2024
Tistory
Category
Tags
Flutter
개요환경 구축(in MacOS)SDK 설치Path 설정설치 확인Xcode 설치CocoaPods 설치Unable to get list of installed Simulator runtimes 오류시Android Studio 설치시작Flutter 플러그인 추가라이선스 관련설치 확인VSCode 환경 설정(필요시)FlutterFlutter 작동 방식Getting StartedFlutter로 웹뷰 앱 만들기라이브러리 추가Reference

개요

환경 구축(in MacOS)

💡
설치 중간중간에 flutter doctor명령을 사용하면 개발환경 세팅 해야할 것을 친절하게 알려준다

SDK 설치

  • Brew를 이용한 설치법
brew install --cask flutter
 
  • 또는 공식 사이트에서 SDK 다운로드
Start building Flutter iOS apps on macOS
Configure your system to develop Flutter mobile apps on macOS and iOS.
Start building Flutter iOS apps on macOS
https://docs.flutter.dev/get-started/install/macos/mobile-ios
Start building Flutter iOS apps on macOS

Path 설정

zsh 기준 설정법.
vi ~/.zshenv

# 파일 마지막에 추가
export PATH=$HOME/development/flutter/bin:$PATH

# 환경 변수 적용
source ~/.zshrc
💡
Brew로 설치시에는 별도의 path 설정이 없어도 되는 것으로 보인다.

설치 확인

flutter --version

Xcode 설치

  • App Store에서 설치해준다
 
  • 이후 다음 명령어 실행
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

CocoaPods 설치

CocoaPods는 iOS나 macOS 플랫폼 코드를 위한 패키지 매니저로, 거의 필수적으로 사용된다고 한다.
brew install cocoapods

Unable to get list of installed Simulator runtimes 오류시

다음 오류 발생시
[!] Xcode - develop for iOS and macOS (Xcode 16.0)
    ✗ Unable to get list of installed Simulator runtimes
다음과 같이 iOS runtime 설치해주기
xcodebuild -downloadPlatform iOS

Android Studio 설치

  • Brew를 이용한 설치법
brew install --cask android-studio
 
  • 직접 다운로드
Download Android Studio & App Tools - Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
Download Android Studio & App Tools - Android Developers
https://developer.android.com/studio
Download Android Studio & App Tools - Android Developers

시작

  • 기본 권장 설정으로 패키지 다운로드

Flutter 플러그인 추가

cmdline-tools component를 설치하는 과정입니다.
Android Studio에서 Projects > More Actions > SDK Manager > SDK Tools > Android SDK Command-line Tools (latest) 설치
 

라이선스 관련

flutter doctor --android-licenses

설치 확인

Flutter 도구들이 잘 설치되었는지 확인하는 커맨드.
flutter doctor

VSCode 환경 설정(필요시)

  • Extensions
    • Dart
    • Flutter
이후 VSCode 우측 하단에서 <macOS (darwin)> 선택시 실행 가능한 에뮬레이터를 확인할 수 있다.

Flutter

Flutter 작동 방식

  • Dart로 작성한 플러터 코드들은 직접적으로 OS와 소통하지는 않는다
    • 대신 C++등으로 작성된 플러터 엔진 위에서 작동한다
    • 그래서 플랫폼 native 위젯을 사용하지는 않는다
    • 그래서 native 위젯을 사용하지 않는다는 점이 문제가 될 수 있다
      • 최대한 비슷하게 만들려 하긴 했지만, 아무튼 native 한건 아님
    • 다만 이건 반대로 Flutter에서 모든것을 통제할 수 있게 된 것이기도 함
    • 통제당하지 않고 렌더링 엔진을 통해 모든것을 할 수 있다는 것
  • Embedder: 플러터 엔진을 가동시키는 runner 프로젝트를 의미
    • 즉 플랫폼마다 embedder은 다르다
    • Embedder는 호스트 플랫폼에서 플러터 엔진을 가동시키는 역할을 한다

Getting Started

flutter create <app name>
 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
runApp 함수는 Widget(위젯)를 받는다.
위젯은 플러터의 기본 단위가 되고, class를 만들때 주요 Widget 3가지 클래스중 하나를 상속받으면 만들 수 있다.
root 위젯을 만들기 위해 가장 기초적인 StatelessWidget를 상속받아 제작할 때, build()를 구현해줘야 한다. build()에서 리턴한 값을 스크린에 표시하게 되는데, build() 리턴값 자체도 위젯이 되어야 한다. 즉 위젯을 리턴하기 위해 위젯을 만든 것.
import 'package:flutter/material.dart';

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

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
  }
}
root 위젯은 두개의 옵션중 하나를 리턴해야 한다.
  • material 앱
    • MaterialApp
    • 구글의 디자인 시스템
  • cupertino 앱
    • CupertinoApp
    • 애플의 디자인 시스템
내가 구글이나 애플의 디자인같은 것이 아닌 커스텀 디자인을 쓰고 싶다해도 일단 테마를 선택해줘야한다.
 
 

Flutter로 웹뷰 앱 만들기

라이브러리 추가

flutter pub add webview_flutter
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://blog.wibaek.net'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebViewWidget(
          controller: controller,
        ),
      ),
    );
  }
}
 
 
 
 

Reference

[Flutter] WebView 사용하기 1편
이번 글에서는 Flutter로 WebView를 어떻게 사용해야 하는지에 대해서 간단하게 알아보도록 하겠다.개발을 하다보면 Webview를 사용해야 할 경우가 많이 발생한다. 개인적으로 웹뷰를 자주 사용해 봤지만 Flutter에서 웹뷰는 그리 강력한 기능을 제공하지 못한
[Flutter] WebView 사용하기 1편
https://velog.io/@tygerhwang/Flutter-WebView-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-1%ED%8E%B8
[Flutter] WebView 사용하기 1편