flutter 다이스게임만들기 5 마지막

코딩셰프 강의를 보고 만든 파일입니다.
https://www.youtube.com/watch?v=mQX_kJKnZzk&list=PLQt_pzi-LLfoOpp3b-pnnLXgYpiFEftLB&index=3

우선 위에 유튜브 영상을 가셔서 더보기란에 프로젝트에 가셔서 이미지를 받아주세요.

받으신후  dice이미지를 

이런식으로 image폴더에 넣어주세요

import 'dart:math';

import 'package:flutter/material.dart';

class Dice extends StatefulWidget {
  const Dice({Key? key}) : super(key: key);


  @override
  State<Dice> createState() => _DiceState();
}

class _DiceState extends State<Dice> {
  int left=1;
  int right=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("주사위 게임"),
        centerTitle: true,
        backgroundColor: Colors.purple,
      ),
      body: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(top: 100),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,

                children: [
                  Expanded(
                    flex: 2,
                      child: Image(
                    image: AssetImage('image/dice$left.png'),
                  ),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    flex: 2,
                      child: Image(
                    image: AssetImage('image/dice$right.png'),
                  ),
                  ),

                ],
              ),
            ),
            SizedBox(
              height: 50,
            ),
            ButtonTheme(

              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    left=Random().nextInt(6)+1;
                    right=Random().nextInt(6)+1;
                  });
                },
                child: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 50.0,
                ),
                style: ElevatedButton.styleFrom(primary: Colors.purpleAccent),

              ),
            )

          ],
        ),

    );
  }
}

클래스 젤 상단에 int 변수 두개를 선언해주세요  각 왼쪽 오른쪽 주사위 눈 숫자를 나타낼용도로 쓸것입니다. 초기값을 1로 설정해주시고

이미지 경로 설정해준 곳을

Expanded(
  flex: 2,
    child: Image(
  image: AssetImage('image/dice$left.png'),
),
),

이런식으로 image/dice$변수명.png 이런식으로 바꺼주세요 그럼 숫자가 바뀔때마다 불러오는 이미지 이름이 dice1 dice5이런식으로 변할겁니다 그에따라 이미지도 변하게 됩니다.

그럼 초기 상태는 1이기 때문에 주사위 1 이미지가 보입니다. 그럼 이제 버튼을 누르면 변경되도록 해보겠습니다.

ButtonTheme(

  child: ElevatedButton(
    onPressed: () {
      setState(() {
        left=Random().nextInt(6)+1;
        right=Random().nextInt(6)+1;
      });
    },
    child: Icon(
      Icons.play_arrow,
      color: Colors.white,
      size: 50.0,
    ),
    style: ElevatedButton.styleFrom(primary: Colors.purpleAccent),

  ),
)

이렇게 버튼 부분 onpressed에 setState를 넣어주고 그안에서 Random을 활요해서 각 변수에 숫자가 랜덤으로 들어가게 해주었습니다.

Random().nextInt(6)+1

이거느 랜덤으로 숫자가 나오게 하는것으로 Random().nextInt(6)이거는 0~5.까지 나오게 합니다 그래서 거기에 1을 더해줘서 1~6이 나오게  만들어줬습니다.

그럼 이제 변수두개가 버튼을 누르면 바뀌고 그에따라 이미지도 바뀔것입니다.

이런식으로 변경됩니다.

그럼 pubsec.yaml로 이동해서

이런식으로 fluttertoast를 입력해주고 위에 pubget을 눌러줍시다

ButtonTheme(

  child: ElevatedButton(
    onPressed: () {
      setState(() {
        left=Random().nextInt(6)+1;
        right=Random().nextInt(6)+1;
      });
      Fluttertoast.showToast(
          msg: "Left Dice:{$left}, Right Dice:{$right}",
          backgroundColor: Colors.purpleAccent,
          toastLength: Toast.LENGTH_LONG,
          gravity: ToastGravity.BOTTOM,
          textColor: Colors.black
      );
    },
    child: Icon(
      Icons.play_arrow,
      color: Colors.white,
      size: 50.0,
    ),
    style: ElevatedButton.styleFrom(primary: Colors.purpleAccent),

  ),
)

import 'package:fluttertoast/fluttertoast.dart';

이렇게 작성하고 import까지 해주고 에뮬레이터를껐다켜주세요. 그리고 눌러보면

이런식으로 스낵바와는 다른 모양으로 글자가 뜨는 것을 알수 있습니다.

Fluttertoast.showToast(
    msg: "Left Dice:{$left}, Right Dice:{$right}",
    backgroundColor: Colors.purpleAccent,
    toastLength: Toast.LENGTH_LONG,
    gravity: ToastGravity.BOTTOM,
    textColor: Colors.black
);

여기서 msg는 뛰울 글자이고 $변수 이렇게 해서 변수내용을 뛰울수 있습니다.

backgroundcolor는 배경 색

toastlength는 뜨는 창이 떠있는 시간을 말합니다 Duration을 뜻한다고  생각하면 됩니다.

gravity는 위치 를 말합니다.

textColor는 글자색 을 말합니다.

 

gravity를 CENTER로  바꾸면

이런식으로 됩니다.

이렇게 다이스게임을 완성했습니다 ㅎㅎ