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

728x90

이제 Step 6 !!!

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

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

 

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

이번 step의 목표 !!

 

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