[flutter] 새롭게 바뀐 codelab (step1-step4)

1. Introduction

학습할 내용은!

✅  flutter가 어떻게 작동하는지의 기초

✅  flutter에서 layout 만들기

✅  앱 동작과 user interaction의 연결 (좋아요 버튼 누르는 것이 그 예)

✅  flutter 코드를 정갈하게 짜는 것

✅  반응형 앱을 만드는 것 (screen 크기에 따라 다른게 반응할 수 있음 !)

✅  앱의 일관된 형태와 느낌을 주도록 

 

2. Set up your Flutter environment (flutter 환경 설정)

📍 Visual Studio Code 사용

codelab 공식 문서에서 vscode를 다운받을 수 있도록 연결해두었다!

 

공식문서 링크 ⬇️ 

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#1

Your first Flutter app  |  Google Codelabs

 

개발 타깃 설정하기 (다음 중 원하는 os를 선택하면 된다.)

flutter의 가장 큰 장점이자 특징인 부분이다.

multi-platform toolkit이기 때문에 같은 코드로 서로 다른 os를 실행할 수 있다.

os는 주로 개발하고 싶은 os를 선택하면 된다.

• iOS
• Android
• Windows
• macOS
• Linux
• web

이때 직접 기기를 연결해서 사용해도 되고, simulator를 통해 개발해도 된다.

(나는 약 80%를 simulator로 개발한다!)

 

Flutter 설치하기

Flutter SDK 설치는 다음 공식 문서에 자세하게 설명되어 있다.

https://docs.flutter.dev/

Flutter documentation

codelab을 진행하기 위해서는 다음의 3가지만 있으면 된다.

1. Flutter SDK

2. Visual Studio Code (Flutter plugin이 설치된)

3. 개발 타깃에 요구되는 software (예를 들어, Visual Studio Code는 Windows, Xcode는 macOS)

 

(이 외에, flutter SDK 설치나 환경 설정에 어려움이 있다면, codelab 2단계에서 보여주는 StackOverflow를 참고하길 !)

 

3. Create a project

• Visual Studio Code를 실행하고 command palette를 Open. (  F1  또는  ctrl+Shift+P  또는  Shift+Cmd+P  )
• "flutter new"를 입력하고 그 결과 검색된 Flutter: New Project 를 선택한다.
  • 만약 flutter 환경 설정이 제대로 이루어졌다면, 다음과 같이 잘 뜨는 것을 확인할 수 있다.
• Flutter: New Project 를 선택하고 Appliction을 선택한다.
• 다음으로 폴더를 생성하고자 하는 위치와, 프로젝트 이름을 설정해주면 된다.
• 만약 다음과 같이 신뢰와 관련한 창이 뜬다면 Yes~~를 선택 !

출처: https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

여기까지 했다면 이제 바로 Flutter 개발을 시작할 수 있다 !!

 

codelab을 따라하기 위해 죄측 상단에 있는 아이콘을 누르고, pubspec.yaml 파일을 선택한다.

해당 폴더에 있는 내용 중, 가장 위 두 줄을 제외한 코드를 모두 지운 뒤, 이 코드를 복사해서 붙여넣어준다.

(name과 description부분은 그대로 둔다 !)

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.18.4 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

이 pubspec.yaml은 앱에 대한 정보를 담고 있는 파일이다. 이 앱의 현재 버전, dependencies, assets 등의 정보가 있다.

 

• 다음은 같은 아이콘 내에 있는 analysis_options.yaml 파일을 바꿔준다.
  • 안에 있는 코드를 모두 지우고, 다음 코드를 붙여넣어준다.

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

이 파일은 얼마나 엄격하게 우리가 짠 코드를 분석해야 하는지를 결정한다. 이 부분은 언제든지 바꿀 수 있으며, 현재는 우리가 처음 하는 것이기 때문에 쉽게 넘어가줘~ 하고 이야기하는 것과 같다.

 

- 마지막으로 main.dart 파일을 바꿔준다. (위치는 lib/main.dart)

파일에 있는 코드를 모두 지우고, 다음 코드를 붙여넣기 한다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

이제 모든 setting이 끝났다 !!!!

오예 !! 🎉

 

본격적으로 다양한 위젯들을 사용해서 직접 코드를 짜보자 !!

 

4. Add a button

이제 Next button을 만들어보자 !

.

.

그 전에 앱을 Launch해봐야 한다. 

먼저  lib/main.dart  를 열어 target device가 선택되었는지 확인해본다.

vscode의 우측 하단을 보면 현재 지정된 target device를 확인할 수 있다. 바꾸고 싶다면, 이를 클릭해서 바꾸면 된다.

나는 기존에 연결해둔 기기가 있어 바로 그 기기로 설정이 되어있었다. 맥이라면 시뮬레이터를 열어 ios 기기를 사용할 수 있고, android studio를 통해 안드로이드 기기를 만들어 실행할 수 있다.

기기를 연결했다면 ! 한 번 실행해보자 !!

 

우측 상단에 있는 실행버튼을 눌러 실행하면 된다!

다음과 같이 뜨면 아주아주 잘 따라온 것이다 !!!!

만약 코드를 바꾸었다면, Command+s 또는 Ctrl+s를 하면 바로바로 결과가 바뀌는 것을 확인할 수 있다.

그렇지 않는다면, 코드랩에서 제시한 Hot Reload에 대한 stack overflow를 참고하길 !

 

이제 진짜 진짜 진짜 버튼을 만들어볼거다 !!!

 

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(appState.current.asLowerCase),

          // ↓ Add this.
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),

        ],
      ),
    );

// ...

다음과 같이 scaffold 내에 있는 Column에 ElevatedButton을 추가해준다.

이때 버튼을 누르면 콘솔에 다음과 같이 뜨는 것을 확인할 수 있다.

이제 main.dart가 어떻게 실행되는지를 이해해보자

lib/main.dart의 가장 상단에서 우리는 다음과 같은 코드를 찾아볼 수 있다.

// ...

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

// ...

우리는 main() 이라는 이름의 함수를 찾을 수 있는데, 이 함수 내에 있는 코드는 MyApp에 정의된 앱을 실행하도록 Flutter에 알려주는 것이다.

 

MyApp 클래스는 StatelessWidget을 확장한다. 위젯은 우리가 만든 모든 flutter app의 요소들인데, 앱 그 자체도 위젯이다.

MyApp에 있는 코드는 전체 앱을 구성한다. 이는 app-wide state(나중에 다룰 예정!) 를 생성하고, 앱의 이름을 짓고, 시각적 theme을 정의하고, "home" 위젯(그러니까, 앱의 시작 지점)을 설정할 수 있다.

 

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

// ...

flutter에는 app state를 관리하는 많은 방법들이 있다. 가장 쉽게 이야기할 수 있는 방법 중 하나는 ChangeNotifier이다.

MyAppState는 function에 앱이 필요로 하는 data를 정의한다. 

• state class는 변화를 알리는 ChangeNotifier를 확장한다. 예를 들어, 만약 현재 단어가 바뀌었다면, 앱에 있는 어떤 위젯이 이를 알 필요가 있는 것이다. 
• MyApp에 사용했듯이, ChangeNotifierProvider를 사용해서 상태를 생성하고, 앱에 정보를 제공한다. 이는 앱에 있는 어떤 위젯이라도 이 상태를 알 수 있게 한다.
• 즉, 쉽게 이야기하면 ChangeNotifier를 MyAppState에 사용하면, 앱에서 발생하는 변화들을 다른 위젯들이 알 수 있다는 것이다.
  • MyApp이 가장 상위 위젯이며, ChangeNotifier는 변화를 인지하고 이를 위젯에 알리는 역할임을 이해하면 더 쉽다

마지막으로 MyHomePage에 대해 알아보자.

이 위젯은 우리가 이미 수정한 위젯이다. 공식문서에서 설명한 내용을 그대로 가져와서 조금 쉽게 설명할 것이다.

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {           // ← 1
    var appState = context.watch<MyAppState>();  // ← 2

    return Scaffold(   // ← 3
      body: Column(    // ← 4
        children: [
          Text('A random AWESOME idea:'),        // ← 5
          Text(appState.current.asLowerCase),    // ← 6
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

1. 모든 위젯은 위젯의 환경이 변경될 때마다 자동으로 호출되어 위젯이 항상 최신 상태를 갖도록 하는 build() method를 정의한다.
2. watch method를 사용하여 앱의 변화를 추적하고, 앱의 현 상태를 유지한다.
3. 모든 build 메서드는 위젯 또는 중첩된 위젯 트리를 반환해야 하는데, 이 경우 최상위 위젯은 Scaffold이다. Scaffold는 실제로 굉장히 자주 사용되며, main.dart에서 볼 수 있듯이, 다음과 같이 사용된다.  return Scaffold(); 
4. Column은 아주 자주 쓰이면서 가장 기본적인 layout widget이다. 이 위젯은 많은 수의 children을 가질 수 있으며, 위에서부터 아래로 배치한다. default로 column은 좌측 상단부터 시작하는데, 이를 center로 바꿔줄 수 있다. (뒤에서 다룰 예정)
5. Text("")의 형태로 쓰이며, "" 안에 원하는 문자열을 넣으면 그대로 화면에 그려진다.
6. 이 Text 위젯은 appState를 가지고 있으며, 이 클래스의 member에만 접근할 수 있다. (여기에서는 current). 
   WordPair은 asPascalCase, asLowerCase 또는 asSnakeCase와 같이 유용한 getter를 제공한다.
7. flutter에는 괄호가 굉장히 많이 쓰이는데, 쉼표는 사용하지 않아도 된다. 하지만, vscode에서는 쉼표를 사용할 경우, 다음과 같이 구분하기 쉽게 자동정렬이 되기 때문에 선택에 따라 사용하면 된다. 나는 경우에 따라 다른데, 코드가 길어지는게 싫은 경우 사용하지 않고, 구분이 필요할 경우 사용하는 편이다.

 

직접 해보자

MyAppState로 가서 getNext method를 추가해보자.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

getNext() 메소드는 current에 새로운 랜덤 WordPair를 재할당해준다. 또한 이를 notifyListeners()라 부르는데, (ChangeNotifier의 메소드 중 하나이다.)이는 MyAppState를 보고 있는 모든 사용자에게 알림을 준다.

 

 

 

lib/main.dart

// ...

    ElevatedButton(
      onPressed: () {
        appState.getNext();  // ← This instead of print().
      },
      child: Text('Next'),
    ),

// ...

이제 Next 버튼을 누를 때마다 단어가 바뀌는 것을 볼 수 있다 !!!

 

생각보다 너무 길어져서 다음 단계는 다음 글에 적어야겠다 !!

 

필요한 사람이 있을지 몰라 codelab의 step1~step4까지의 lib/main.dart 전체 코드이다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
          ElevatedButton(
            onPressed: () {
              appState.getNext(); // ← This instead of print().
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}