ram2 🚗

이제 Step 6 !!!

지금까지 우리가 만든 앱은, next 버튼을 누르면 이전에 나왔던 단어를 볼 수 없었다.

그래서 이번 단계에서는 'Like' 버튼을 눌러, 원하는 단어를 기억해보려고 한다.

이번 목표는 다음 화면과 같다.

Add the business logic

MyAppState 에서 다음과 같이 코드를 수정해보자.

lib/main.dart

// ...

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

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

  // ↓ Add the code below.
  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

// ...

• 지금 우리는 favorites 라고 불리는 property를 MyAppState에 추가한 것이다. 이 property는 빈 리스트 [] 로 초기화된다.
• 또한, generics를 사용하여 목록에 단어쌍인 <WordPair>[]만 포함할 수 있도록 지정한 것이다. 이는 우리 앱을 더 강력하게 만드는 데 도움을 주는데, Dart가 WordPair 이외의 것을 추가하려고 할 때 우리 앱을 실행하는 것조차 거부하기 때문이다. 
  즉, WordPair 이외의 것은 추가하지 못하도록 하는 것이다. 이렇게 하면, favorites 목록을 통해 우리가 원하는 개체(ex. null)가 숨겨질 수 없음을 알 수 있다.
  List 대신 Set을 사용해도 된다. Set은 []가 아닌, {}을 통해 표현한다.
• 또한, toggleFavorite() 메소드를 추가할 수 있는데, 이는 만약 favorites 리스트에 현재 단어가 있는 경우 이를 없애거나, 만약 리스트에 없다면 추가할 수 있다. 이 두 경우, 코드는 notifyListerners();를 호출해야 한다.

Add the button

이제 좋아요 버튼을 만들어서 'Next' 버튼 왼쪽에 만들어줄 것이다. 버튼을 Next 옆에 두기 위해서는 Row 위젯이 필요하다.

먼저 현재 존재하는 버튼을 Row로 감싼다.

MyHomePage의 build()메소드로 가서, ElevatedButton 위에 커서를 두고 Refactor 메뉴를 열어 Wrap with Row를 선택한다.

이를 저장하면, Column을 적용했을 때와 비슷하게 children이 왼쪽에 치우져진 것을 확인할 수 있다. (Column은 위로..!)

이를 우리가 원하는 모양으로 수정하기 위해서는 Column에서 한 것과 비슷하게 center를 맞춰주면 된다.

Row에서는 mainAxisAlignment를 통해 맞출 수 있다.

이를 적용한 코드이다.

lib/main.dart

// ...

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

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,   // ← Add this.
              children: [
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

다시 Row를 적용하기 전으로 돌아간 것을 볼 수 있다. 즉, 센터가 맞춰진 것을 확인할 수 있다.

이제, 우리는 Like button을 추가해서 이를 toggleFavorites()와 연결할 것이다.

이를 위해, 코드랩에서는 다음과 같이 직접 도전해보길 권장하고 있다.

모두 직접 한 번 해보길..!

• MyHomePage에 버튼을 추가한다.
• ElevatedButton.icon()을 사용한다.
• build 메소드의 가장 윗 부분에 word pair가 favorite으로 선택됐는지의 여부에 따라 적절한 icon을 선택한다.
• SizedBox를 사용해서 두 버튼 사이의 여백을 둔다.

코드랩에서 제공한 코드는 이러하다

lib/main.dart

// ...

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

    // ↓ Add this.
    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [

                // ↓ And this.
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),

                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이렇게 하면, 다음과 같은 결과를 얻을 수 있다!!

이제 step 6이 끝났다!!!

다음 스텝에서는 우리가 좋아요 한 단어가 무엇인지를 보여주도록 할 예정 !!

전체 코드를 첨부한다 !

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();
  }

  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

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

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다.

하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 word가 한 눈에 들어오지 않는다.

우리는 사용자가 느끼기에 조금 더 쉽게, 원하는 정보를 얻을 수 있도록 해야한다. 

그래서 이번 스텝에서는 이러한 시각적인 요소(디자인) 에 조금 신경을 써보려고 한다.

코드랩에서 제시한 다음 우리의 목표는 이 이미지와 같다.

Extract a widget

현재 우리 코드에서는 word pair를 다음과 같이 나타내고 있다.

Text(appState.current.asLowerCase)

이 코드를 조금 더 복잡하게 바꿔보려고 한다. 이 코드를 별도의 위젯으로 빼는 것이 좋다고 한다. 

이처럼 UI의 각 요소에 대해 별도의 위젯을 갖는 것은 Flutter에서 코드의 복잡성을 관리하는 중요한 방법이다. 

(+ 내 경험에 비추어보면, 이를 따로 위젯으로 빼서 만들어두면 나중에 또 쓰일 때 다시 코드를 짜거나, 이전 코드를 찾아 복붙하는 일을 하지 않아도 된다. 또한, 수정사항이 있을 때도 쉽게 찾아서 수정할 수 있다. 그래서 작은 단위로 위젯을 만드는 것을 추천한다 !!)

물론 Flutter에서는 위젯을 extract 하기 위한 도구가 있지만, 위젯을 사용하기 전에 extract되는코드가 필요한 것에만 접근하는지를 확인해야 한다. 우리 코드를 예로 보면, 현재 appState에 접속하지만, 우리가 원하는 정보는 현재 단어 쌍만 알면 되는 것이다.

그래서 이제  MyHomePage  위젯의 코드를 다음과 같이 바꿔보자..!!

lib/main.dart

// ...

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

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(pair.asLowerCase),                // ← Change to this.
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

이제 Text 위젯은 더이상 appState를 언급하지 않아도 된다.

그리구, 이제 Refactor 메뉴를 통해 다음과 같이 위젯 extract를 해볼 것이다.

두 가지 방법이 있다.

1. refactor 하고 싶은 위젯에서 우클릭 -> Refactor 메뉴를 선택 -> "BigCard" 입력 -> 엔터

2. Move your cursor to the piece code you want to refactor (Text, in this case), and press Ctrl+. (Win/Linux) or Cmd+. (Mac). (나만 헷갈렸나.. Cmd랑 .을 같이 누르면 된다..!!!)

이후 방법은 위 영상을 따라하면 된다 ! 

이처럼 extract widget 하는 방법을 잘 따라했다면, 다음과 같은 클래스가 하나 생성됐음을 확인할 수 있다 !

// ...
class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}
// ...

이제 이 refactoring을 통해 앱이 어떻게 작동하는지 확인해볼 것이다.

Add a Card

이제 우리가 목표라고 했던 그 화면을 기억 하는가...?

이 이미지를 보면 vastweb이 파란색 카드 안에 있는 것을 확인할 수 있다.

이제 카드를 만들어볼 것이다 !

아까 사용했던 refactor 메뉴를 이용할 것인데, 이번에는 extract 하지 않고, Wrap with Padding을 해볼 것이다.

위에서 언급한 두 가지 방법보다 내가 자주 사용하는 방법을 잠깐 언급해보려 한다.

refactor 메뉴를 불러오는 또 다른 방법은 vscode 좌측에 있는 전구 아이콘을 누르는 것이다.

이렇게 전구 아이콘 -> Wrap with Padding 을 선택하면, 자동으로 Padding이 위젯을 감싸는 것을 볼 수 있다.

그리고, Padding 크기를 8.0 -> 20 으로 바꿔준다.

이제, 위에서 만든 Padding 위젯을 Card 위젯으로 감싸줄 것이다. 즉, Padding 위젯의 상위 위젯으로 Card 위젯을 만드는 것이다.

padding 옆에 있는 전구 아이콘을 눌러서 (위에서 언급한 두 가지 방법을 사용해도 된다.) Wrap with widget...을 선택한다.

그리고, 만들어진 widget 텍스트를 지우고, Card를 입력한다. 그렇게 하면 빨간 줄도 사라질 것이다 !

중간점검을 해보자..!

여기까지 잘 따라 왔다면 다음과 같은 화면을 볼 수 있다.

Theme and style

이제 카드 색을 바꿔줄 건데, 일관된 색 구성을 유지하는 것이 좋기 때문에, 앱의 테마를 사용해서 색을 선택할 것이다.

main.dart에서 BigCard 클래스를 다음과 같이 수정한다.

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);         // ← Add this.

    return Card(
      color: theme.colorScheme.primary,    // ← And also this.
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }

// ...

이렇게 위에서 추가한 두 코드는 굉장히 많은 일을 한다.

• 먼저, 첫번째 코드는 앱의 현재 테마를 Theme.of(context)로 불러온다.
• 두 번째 코드는 테마의 colorScheme 속성과 동일하게 카드의 색상을 정의한다. 
  • 색 구성표는 많은 색을 포함하고 있으며, 기본 색은 앱의 primary color(앱을 정의하는)이다.

즉, 우리는 두 코드를 추가함으로써 MyApp 클래스에서 정의한 theme color를 불러온 것이다.

만약, 위의 seedColor를 바꾸면, 해당 카드의 색도 같이 바뀌게 된다.

이렇게 theme color를 사용하면, 앱의 전체적인 메인 색을 바꿔야 할 때, 그 색이 사용된 코드를 하나씩 찾지 않고, MyApp의 theme에서 색만 바꿔주면, 모두 바뀌게 된다.

TextTheme

지금까지 완성한 화면을 보면 이러하다.

하지만, 카드 안에 있는 글씨가 검은색이며, 크기가 너무 작아 읽기 힘들다.

이제 BigCard의 build() 메소드를 고쳐서 이러한 문제를 해결해볼 것이다.

다음과 같이 BigCard의 코드를 수정해보자

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    // ↓ Add this.
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        // ↓ Change this line.
        child: Text(pair.asLowerCase, style: style),
      ),
    );
  }

// ...

• theme.textTheme을 사용함으로써 app의 font theme에 접근할 수 있다. 이 클래스는 bodyMedium(medium size의 텍스트를 위한), caption(이미지를 위한), headlineLarge(large headlines를 위한)과 같은 속성들을 포함하고 있다.
• displayMedium property는 공식 문서에, "짧고 중요한 텍스트를 사용할 때" 라고 나와있다. 우리가 사용한 경우와 같다 !
• displayMedium 는 이론적으로 null이 될 수 있다. 하지만 Dart는 null-safe이기 때문에 null이 되도록 내버려두지 않는다.. 그래서, 이런 경우에는 ! 연산자를 사용해서 우리가 뭘 하고 싶은지 Dart가 알 수 있도록 해야 한다. 우리가 사용한 것은 이 경우에 해당하지 않는당..ㅎㅎ
• displayMedium 에 copyWith() 를 호출하면, 우리가 정의한 수정사항과 함께 텍스트 스타일의 복사본이 return 된다. 우리가 했던 경우를 살펴보면, 우리는 텍스트 색상만 변경한 것이다.
• 또 다른 새로운 색상을 얻고 싶다면, 앱의 테마에 다시 접근하면 된다. 

지금까지 한 결과이다..!!

후... step 5... 생각보다 길다.....

하지만...! 벌써 50%는 했으니.. 괜찮다....!!!!!!

계속 가보자구...

Improve accessibility

flutter는 기본적으로 앱에 엑세스 할 수 있다. 예를 들어서, flutter 앱은 앱의 모든 텍스트들을 올바르게 표시해서 TalkBack 및 VoiceOver와 같은 것들이 접근할 수 있다.

pair.asLowerCase보다는 upper camel case가 screen reader가 정확하게 단어를 인식하는 것에 도움이 될 수 있다.

자세한 부분은 코드랩을 보시길...... (절대 귀찮아서 생략하는게 맞습니다..ㅎㅎ)

그래서..! 결국 다음과 같이 코드를 수정해보자.

그러면, 이제 screen readers가 명확하게 각 단어 쌍들을 읽을 수 있다. (물론, UI에는 변화가 없을 것이다!)

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }

// ...

변화를 확인하고 싶다면, screen reader를 직접 사용해보시길...!!

Center the UI

이제..!! UI의 센터를 맞춰서 시각적인 불편함을 해소해 볼 것이다.

먼저, BigCard 는 Column의 부분임을 기억해야 한다. Column은 기본적으로 자식들을 top으로 한번에 두지면, 이를 쉽게 override 할 수 있다.

MyHomePage의 build() 메소드로 가서, 다음과 같이 바꿔보자..!

// ...

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

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,  // ← Add this.
        children: [
          Text('A random AWESOME idea:'),
          BigCard(pair: pair),
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

이렇게 하면, Column 안에 있는 children들이 main(vertical=수직) axis에 맞춰 center가 된 것을 확인할 수 있다.

사실 Column 안에 있는 children들은 이미 main axis 방향의 center가 맞춰져 있다. 즉, 가로 센터로 설정되어 있는데, 적용되지 않은 것처럼 보인다.

그 이유는, Column 자체가 센터가 아니기 때문이다. 그래서, Column의 센터를 맞춰주면 우리가 원하는 센터 위치로 둘 수 있다.

Column에서 전구 아이콘을 누르거나, cmd . 또는 ctrl . 을 눌러 Refactor menu를 열어준다.

Refactor menu -> Wrap with Center

그 결과, 화면의 센터에 위치한 결과를 확인할 수 있다 !!!

이제 조금 디테일적인 UI를 수정할 차례이다.

• 일단, 카드 위에 있는 "A random AWESOME idea:" 텍스트는 없애도 되므로 지워주겠다.
• 카드와 "Next" 버튼 사이에 여백이 있으면 더 좋을 것 같으므로, SizedBox 위젯을 사용해서 두 위젯 사이에 '공간'을 만들어준다

MyHomePage에서 다음과 같이 코드를 수정하면 된다.

lib/main.dart

// ...

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

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이제, 다음과 같은 결과를 얻을 수 있다.

우리가 처음에 목표한 이미지와 일치하다 !!!!!

이렇게.. 길었던 step5가 끝났다..!!!

그저 보고 만들기만 했다면, 빨리 끝났을테지만, 이해하고, 이를 정리하다보니 굉장히 길게 느껴졌다...

그만 적고 싶은 순간도 많이 있었지만...!!!!

그래도 step 5 끝 !!

아참! 혹시 몰라 필요한 사람들을 위한 전체 코드...!!

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>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

// ...

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

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

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

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

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

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

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

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

Flutter 설치하기

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

https://docs.flutter.dev/

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~~를 선택 !

여기까지 했다면 이제 바로 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'),
          ),
        ],
      ),
    );
  }
}

외주를 하다 보니 무선 디버깅을 해야할 일이 자주 있었다.

하지만 ios 14인가 15부터는 '$ flutter run'으로는 무선으로 실행할 수 없었다.

flutter run -d 기기번호 --release

기기번호 자리에 실행하고자 하는 기기의 번호를 입력하면 휴대폰에 앱이 설치되는 것을 확인할 수 있다.

몇 가지 에러가 뜬다면, xcode에서 기기를 선택하고 빌드한 뒤 다시 시도하면 된다.

앱이 설치되고 나서는 선을 제거하고도 무선으로 앱 실행이 가능하다.

flutter로 앱을 열심히 개발하다 보니 iphone에 직접 실행시켜서 개발 과정을 확인하고 싶었다.

실제 앱에서는 padding이나, 이미지 크기 등이 어색하게 보일 수 있기 때문에 iphone 연동이 시급했다.

하지만 flutter 초보인 내게 xcode를 다루는 일은 너무 어려웠다😭

여러 reference들을 참고했는데, 오히려 그것이 내게는 독이 되었던 것 같다.

여러 번의 실패 끝에 프로젝트를 다시 시작하기를 반복했다.

다시는 같은 실수를 하지 않기 위해 하나씩 정리하며 기록하려 한다.

1. iphone을 맥에 연결한다.

맥에 연결하면, finder에서 연결된 iphone을 확인할 수 있다.

해당 기기를 선택하면, 신뢰에 대한 부분이 나오는데 신뢰를 선택하면 된다. 

2. 실행하고자 하는 폴더를 찾는다.

나같은 경우, 실행하고자 하는 폴더 명이 "my_work_plz" 였다. (폴더명에서도 간절함을...)

해당 폴더에 들어가서 ios > Runner.xcworkspace 로 이동해서 파일을 연다. 파일을 열고 상단에 있는 Runner > 김하람의 iphone이 되도록 한다.

Runner > 이 부분에 ios Device가 선택되면 된다.

3. Runner > Targets에 Runner를 선택하고, Signing & Capabilities의 Signing

여기에서 add account를 선택해서 apple id로 로그인을 한다. 

* 전제조건은, apple developer.com 에서 개발자 등록을 해야 한다는 것!

Bundle Identifier는 다른 사람이 사용하지 않을만한 것으로 지정해야 한다. 그래서 나는,

com.example.firstwork -> com.example.firstworksesd 로 바꿔줬다. 

4. 이렇게 Bundle Identifier 가 통과되면, 이 실행 버튼을 눌러주면 된다.

5. keychain password

이렇게 실행을 하다 보면, keychain password를 입력하라는 창이 나오는데, 이 부분은 미처 캡쳐하지 못했다..😭

사실 나는 keychain password에서도 꽤나 많은 시간을 쏟았다.. keychain이 뭔지도 잘 모르겠는데, 갑자기 비밀번호를 입력하라고 하니 매우 당황스러웠다. 비밀번호를 설정한 적이 없어 굉장히 당황했으나, 대부분 컴퓨터 잠금 비밀번호라고 한다. 

물론 나는 되지 않아서, keychain password를 초기화하고, 재설정했다. 기회가 된다면 이 부분도 포스팅 해봐야겠다.

Always Allow를 선택하면 나중에 훨씬 편하다!

그렇게 실행을 하다 보면, Could not launch "Runner" 라는 다이얼로그가 뜬다. 이는 연결하려는 기기가 당신을 개발자로 신뢰하지 않기 때문이다. 일단 OK를 선택하고, 연결하려는 기기로 가보자.

6. 기기에서 설정 > 일반 > VPN 및 기기 관리

기기에서 설정 > 일반 > VPN 및 기기 관리로 이동해서 Apple Development~~ 부분을 선택하고, 신뢰하겠다는 버튼을 누르면 된다.

여기까지만 했다면 벌써 80%이상 끝났다!!

이렇게 기기에서 신뢰하겠다는 것까지 선택한 뒤, 다시 xcode에서 실행 버튼을 누르면....!!

기기에서 또 어떤 창이 나온다. 이 모든 부분을 캡쳐 했어야 했는데.. 너무 아쉽다..😢

어쨌든, xcode를 실행했을 때 기기에서 어떤 창이 나온다면 OK 또는 확인을 선택하면 된다.

아마 로컬 네트워크에 기기를 연결할 것이느냐에 대한 창이 나올 것이다.

7. vscode 빌드

이제 xcode를 잠시 뒤로 두고, 다시 vscode로 넘어와보자.

vscode에서 빌드를 하기 전에, vscode 우측 하단에 원하는 기기가 잘 연결 됐는지 확인해보자.

확인이 됐다면, vscode에서 빌드를 시작하면, 연결한 기기에서 코드가 실행되는 것을 확인하면 좋겠지만, 아쉽게도 vscode에서 또 하나의 창이 뜰 것이다...

마지막 창이다.. 이 부분도 캡쳐를 하지 못했는데, "iproxy"에 대한 부분이었다. vscode를 실행하는 중에 "iproxy"로 시작하는 창이 뜬다면, 일단 cancel을 누르자.

8. iproxy 해결하기

컴퓨터에서 flutter를 찾는다. flutter 폴더를 찾으면, flutter > bin > cache 로 이동한다.

cache에 오면, "artifacts"라는 폴더가 있을 것이다.

이 artifacts를 삭제하면 된다.

9. 다시 빌드

다시 vscode로 돌아와서 빌드하면, 파일들이 다운로드되고, 기기에서 코드가 실행되는 것을 확인할 수 있다 !!