30일차 과제


  1. 위의 결과와 같이 메인 사이드의 코인을 1초마다 +1 시킵니다.
    • 사용된 비트코인은 FontAwesome의 기호를 사용합니다.
Icon(
    FontAwesomeIcons.bitcoin,
    size: 96.0,
    color: Colors.yellow.shade700,
),

2. 위와 동일한 결과를 얻을 수 있도록 CoinController를 생성하고 GetxController를 확장합니다.

  • 코인은 int 타입의 데이터를 가지고 있으며 observable 데이터 타입으로 사용됩니다.
  • 이 경우 타이머를 사용할 수 있습니다.
  • 코인의 개수가 10의 배수가 될 때마다 10n 코인에 도달했다는 메시지가 나타납니다.
    (Getx 작업자 중 상황에 맞는 작업자 사용)

삼. (스토어로 이동) 버튼을 클릭하면 스토어 페이지로 이동합니다.

  • 상점 페이지에서 보유한 코인도 볼 수 있습니다.
  • 코인 리셋을 누르면 코인이 0으로 리셋됩니다.

메인 다트

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개 돌파', '축하합니다!
'); } }); } }

타이머 클래스: dart:async 패키지에 포함되어 있으며 일정한 간격으로 작업을 반복하는 데 사용됩니다.

(참조): https://kyungsnim.net/83

라이브러리/페이지/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),
                ))
          ),
        ),
      ),
    );
  }
}

라이브러리/페이지/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),
                ))
          ),
        ),
      ),
    );
  }
}
메인 페이지->상점 페이지->코인 리셋 버튼