30일차 과제

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개로 바뀐다.

 

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:task29/controller/coin_controller.dart';
import 'package:task29/page/main_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    var controller = Get.put(CoinController());
    return GetMaterialApp(
      theme: ThemeData.dark(),
      home: const MainPage(),
    );
  }
}

lib/controller/coin_controller.dart

import 'dart:async';

import 'package:get/get.dart';

class CoinController extends GetxController {
  RxInt coin = 0.obs;

  @override
  void onInit() {
    super.onInit();
    Timer.periodic(const Duration(milliseconds: 1500), (timer) {
      coin(coin.value + 1);
    });

    ever(coin, (value) {
      if (value % 10 == 0 && value != 0) {
        Get.snackbar('코인 $value개 돌파', '축하합니다!');
      }
    });
  }
}

Timer클래스: dart:async 패키지에포함, 일정간격동안 반복하여 동작 수행할때 사용

[참고]: https://kyungsnim.net/83

 

lib/page/main_page.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:task29/controller/coin_controller.dart';
import 'package:task29/page/store_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.value}',
                  style: const TextStyle(fontSize: 25),
                )),
            const SizedBox(
              height: 30,
            ),
            Icon(
              FontAwesomeIcons.bitcoin,
              size: 96.0,
              color: Colors.yellow.shade700,
            ),
            const SizedBox(
              height: 20,
            ),
            TextButton(
                onPressed: () {
                  Get.to(() => const StorePage());
                },
                child: const Text(
                  '상점으로 이동하기',
                  style: TextStyle(fontSize: 20),
                ))
          ],
        ),
      ),
    );
  }
}

 

lib/page/store_page.dart

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:task29/controller/coin_controller.dart';

class StorePage extends StatelessWidget {
  const StorePage({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: 30, fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 20,
            ),
            Obx(() => Text(
                  '현재 보유한 코인: ${controller.coin.value}',
                  style: TextStyle(fontSize: 20),
                )),
            SizedBox(
              height: 20,
            ),
            TextButton(
                onPressed: (() {
                  // controller.coin = 0.obs;   이러면 메인페이지갔다와야 0으로 초기화되어있음;
                  controller.coin(0);
                }),
                child: Text(
                  '코인리셋',
                  style: TextStyle(fontSize: 20),
                ))
          ],
        ),
      ),
    );
  }
}

메인페이지->상점페이지->코인리셋버튼