<aside> ❓ 1. 코인 앱

• gif

1. 위의 결과물처럼 메인페이지에서의 코인이 1초마다 +1씩 되도록 만드시오.

   • 사용된 비트코인은 FontAwesome의 아이콘을 활용한다.

     Icon(
         FontAwesomeIcons.bitcoin,
         size: 96.0,
         color: Colors.yellow.shade700,
     ),
     

2. CoinController를 만들고, GetxController를 extends하여 위와 같은 결과물을 만들 수 있도록 하시오.

   • 코인은 int형의 데이터를 가지며, 관측가능한 형태의 데이터타입으로 사용한다.
   • 이 때 Timer를 사용할 수 있도록 한다.
   • 코인이 10의 배수가 될때 마때, 코인 10n개를 달성했다는 안내문구를 출력하도록 한다. (Getx의 워커중 상황에 맞는 올바른 워커를 사용할 것)

3. [상점으로 이동하기] 버튼을 누르면 상점 페이지로 이동한다.

   • 상점페이지에서도 보유한 코인을 볼 수 있다.
   • 코인 리셋을 누르면 보유한 코인이 다시 0개로 바뀐다. </aside>

• main.dart

  import 'package:first_app/homework/week7/day30/controller/coin_controller.dart';
  import 'package:flutter/material.dart';
  import 'package:get/get.dart';
  
  import 'page/main_page.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
  
      Get.put(CoinController());
  
      return GetMaterialApp(
        home: MainPage()
      );
    }
  }
  

controller

• coin_controller.dart

  import 'package:get/get.dart';
  
  class CoinController extends GetxController {
    RxInt coin = RxInt(0);
  
    CoinController({coin = 0}) : coin = RxInt(coin);  // coin 0으로 초기화
  
    @override
    void onInit() {
      super.onInit();
  
      Timer.periodic(Duration(seconds: 1), (timer) {
        coin.value++;
      });
  
      ever(coin, (value) {
        if (value != 0 && value % 10 == 0) {
          Get.snackbar('코인 $value개 돌파', '축하합니다');
        }
      });
    }
  }
  

page

• main_page.dart

  import 'package:flutter/material.dart';
  import 'package:font_awesome_flutter/font_awesome_flutter.dart';
  import 'package:get/get.dart';
  
  import '../controller/coin_controller.dart';
  import 'shop_page.dart';
  
  class MainPage extends StatelessWidget {
    const MainPage({super.key});
  
    @override
    Widget build(BuildContext context) {
  
      var controller = Get.find<CoinController>();
  
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Obx(() => Text('Current coin : ${controller.coin}', style: TextStyle(fontSize: 18))),
              Icon(
                FontAwesomeIcons.bitcoin,
                size: 96.0,
                color: Colors.yellow.shade700,
              ),
              TextButton(
                onPressed: (){
                  Get.to(() => ShopPage());
                },
                child: Text('상점으로 이동하기'),
              ),
            ],
          ),
        ),
      );
    }
  }
  

• shop_page.dart

  import 'package:flutter/material.dart';
  import 'package:get/get.dart';
  
  import '../controller/coin_controller.dart';
  
  class ShopPage extends StatelessWidget {
    const ShopPage({super.key});
  
    @override
    Widget build(BuildContext context) {
  
      var controller = Get.find<CoinController>();
  
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('상점', style: TextStyle(fontSize: 18)),
              Obx(() => Text('현재 보유한 코인 : ${controller.coin}')),
              TextButton(
                onPressed: (){
                  controller.coin.value = 0;
                },
                child: Text('코인 리셋'),
              ),
            ],
          ),
        ),
      );
    }
  }
  

결과