[flutter] 새롭게 바뀐 codelab (step5)

728x90

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

하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 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,
        ),
      ),
    );
  }
}

// ...