주사위수 변경; function&변수설정

goal : 'variable' & 'void function' 을 사용하여 유저와 상호작용하는 앱 만들기

화면에 있는 2개의 주사위중 하나를 사용자가 터치하면, 2개 주사위 모두 랜덤으로 변하는 앱을 만들어 볼것이다.

이미지파일 세팅

프로젝트내의images폴더에 1부터 6까지의 주사위 이미지를 넣어놓았다.

화면구현

화면의 2개의 이미지가 있어야하므로 총 'Row' 클래스를 사용해 2열로 구성하자.
각 열에 이미지를 배치할 것이다.위의 구조로 코드를 작성했다.

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Center(
            child: Text('Dicee'),
          ),  // Center
          backgroundColor: Colors.red,
        ),  // AppBar
        body: DicePage(),
      ),  // Scaffold
    ),  // MaterialApp
  );
}

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Image.asset('images/dice1.png'),
          Image.asset('images/dice1.png'),
        ],
      ),  // Row
    );  // Center
  }
}

하드코드된 이미지크기 해결

보시다시피 이미지가 화면을 벗어난다. 이를 해결하기 위해 하드코드 형식으로 직접 사이즈를 지정할 수 있지만, 'Expanded'클래스를 사용하여 해결하자.
※'Expanded' 클래스는 가로와 세로화면에 모두 맞는 사이즈로 유동적 조정을 지원한다.※
또한, 이미지를 'TextButton' 클래스로 감싸서 유저의 클릭을 가능하게 하자.

• Expanded1
  padding : 8 (전방향)
  -TextButton1
  onPressed(){} : print()
  child : 이미지
• Expanded2
  padding : 8 (전방향)
  -TextButton2
  onPressed(){} : print()
  child : 이미지

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: TextButton(
                onPressed: () {
                  print('left button');
                },
                child: Image.asset('images/dice1.png'),
              ),  // TextButton
            ),  // padding
          ),  // Expanded
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: TextButton(
                onPressed: () {
                  print('right button');
                },
                child: Image.asset('images/dice1.png'),
              ),  // TextButton
            ),  // Padding
          )  // Expanded
        ],
      ),  // Row
    );  // Center
  }
}

실행경과 의도한대로 화면이 나오며, 각 버튼을 클릭했을 때 void Function 'print'에 의해 지정한 텍스트가 console에 출력된다.

클릭을 통한 위젯상태 변경

이제 주사위를 클릭할때마다 주사위가 랜덤으로 바뀌는 모습을 사용자가 볼 수 있도록 코드를 수정할 것이다.
StatelessWidget' 대신 'StatefulWidget'을 사용해야한다.
※'StatefulWidget'은 사용자와의 상호작용에 의해 위젯의 상태변경이 가능하게 한다.※
또한, 'onPressed(){}'내에 'setState((){})'를 적용해야한다.
※'setState((){})'는 {}내의 변경상태를 적용하여 다시 'build'를 실행해주어 사용자와의 실시간 상호작용이 가능하게 해준다.※
그리고 이미지를 하드코드형식이 아닌 변수로 지정해주어서 이미지가
바뀔수있게 해야한다.

• 변수지정
  leftdicenumber : 정수형
  rightdicenumber : 정수형
• setState((){}) : {leftdicenumber = Random(), rightdicenumber = random()}
• 이미지1 : 'images/dice$leftdicenumber.png'
• 이미지2 : 'images/dice$rightdicenumber.png'

※'Random' 클래스를 사용하기 위해서는math라이브러리를 'import'해야한다.※

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  int leftdicenumber = 5;
  int rightdicenumber = 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: TextButton(
                onPressed: () {
                  setState(() {
                    leftdicenumber = Random().nextInt(6) + 1;
                    rightdicenumber = Random().nextInt(6) + 1;
                  });
                },
                child: Image.asset('images/dice$leftdicenumber.png'),
              ),  // TextButton
            ),  // Padding
          ),  //Expanded
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: TextButton(
                onPressed: () {
                  setState(() {
                    leftdicenumber = Random().nextInt(6) + 1;
                    rightdicenumber = Random().nextInt(6) + 1;
                  });
                },
                child: Image.asset('images/dice$rightdicenumber.png'),
              ),  // TextButton
            ),  // Padding
          )  // Expanded
        ],
      ),  // Row
    );  // Center
  }
}

※2개의 setState 내의 코드는 동일하므로 다음과같이 함수를 만들어서 코드를 간략화할 수 있다.※이로써 아래와 같이 사용자가 주사위를 클릭할때마다 주사위가 무작위로 바뀌는 앱을 만들었다.