フラッターでサイコロシェーカーアプリケーションを作成する

#フラッター付きダイスローラー
ボードゲームをプレイしたいが、サイコロを持参するのを忘れたことがありますか？
サイコロを持参するのを忘れるか、サイコロを失うと、あなたは間違いなく怒ります.
したがって、サイコロについて怒って考えるよりも。 フラッターを使用してサイコロアプリケーションを作成する必要があります。その前に、1から6までのサイコロ画像を準備する必要があります
##Step 1
```dart:main.dart
class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Image.asset('images/dice1.png')
        ),
        Expanded(
          child: Image.asset('images/dice1.png')
        ),
      ],
    );
  }
}
```
最初に、1〜6個のサイコロ画像を読み込んで、プロジェクトのパッケージ画像に入れます。 また、pubspec.yamlアセットの画像を有効にすることを忘れないでください.


##step2
押したときにサイコロの画像がランダムに1から6に変わるようにするには、サイコロの画像をフラットボタンにする必要があります。

```dart:main.dart
class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: FlatButton(
              onPressed: (){
                print('left button pressed');
              },
              child: Image.asset('images/dice1.png'),
            )
          ),
          Expanded(
            child: FlatButton(
              onPressed: (){
                print('right button pressed');
              },
              child: Image.asset('images/dice1.png'),
            )
          ),
        ],
      ),
    );
  }
}
```
最初に、サイコロ表示を2つに分割するための子行が作成されます。 さらに、フラッターの拡張機能を使用して、2つの画像間の距離を分割し、2つの画像のサイズの割合を分割することもできます。 この場合、1対1のみを使用します.次に、flat buttonという名前の子を作成します。 フラットボタンの機能の後には、ボタンが押されたときに機能を実行するために常にonpressedが続きます。このステップでは、ボタンが押されたときにランダム関数を実行していません

##step 3
ステートレスウィジェットは使いにくいでしょう。 これは、画像を押すと画像が変更されるため、ステートフルウィジェットが必要になるためです。 使用できるフラッターショートカットは「stful」です。
 
```dart:main.dart
class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  int leftDiceNumber = 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
              child: FlatButton(
                onPressed: (){
                  setState(() {
                    leftDiceNumber = 5;
                  });

                },
                child: Image.asset('images/dice$leftDiceNumber.png'),
              )
          ),
          Expanded(
              child: FlatButton(
                onPressed: (){
                  print('right button pressed');
                },
                child: Image.asset('images/dice1.png'),
              )
          ),
        ],
      ),
    );
  }
}
```

変更できるかどうかを判断するために、leftDiceNumberという名前の整数変数を定義しようとしています。 次に、押されると、setState関数が作成され、leftDiceNumberの値が変更されます。 したがって、上記のコードでは、番号1が番号5に変わります。

##最後のステップ
乱数関数を使用できるようにするには、import 'dart：math'を使用できます。 次に、以下に含まれるコードに適用されます.

```dart:main.dart
class _DicePageState extends State<DicePage> {
  int leftDiceNumber = 1;
  int rightDiceNumber =1;

  void changeDice(){
    setState(() {
      leftDiceNumber = Random().nextInt(6) +1; //random number from 1 to 6
      rightDiceNumber= Random().nextInt(6)+1;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
              child: FlatButton(
                onPressed: (){
                 changeDice();
                },
                child: Image.asset('images/dice$leftDiceNumber.png'),
              )
          ),
          Expanded(
              child: FlatButton(
                onPressed: (){
                  changeDice();
                },
                child: Image.asset('images/dice$rightDiceNumber.png'),
              )
          ),
        ],
      ),
    );
  }
}
```
次に、このようなランダム関数を使用します
「leftDiceNumber =ランダム（）。nextInt（6）+1;」
生成される乱数が0〜5ではなく1〜6になるように、この関数が1つ追加されます。
そのため、完全なコードと表示例は次のようになります。

```dart:main.dart
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
          title: Text('DiceApp'),
          backgroundColor: Colors.blue,
        ),
        body: DicePage(),
      ),
    ),
  );
}

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

class _DicePageState extends State<DicePage> {
  int leftDiceNumber = 1;
  int rightDiceNumber =1;

  void changeDice(){
    setState(() {
      leftDiceNumber = Random().nextInt(6) +1; //random number from 1 to 6
      rightDiceNumber= Random().nextInt(6)+1;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
              child: FlatButton(
                onPressed: (){
                 changeDice();
                },
                child: Image.asset('images/dice$leftDiceNumber.png'),
              )
          ),
          Expanded(
              child: FlatButton(
                onPressed: (){
                  changeDice();
                },
                child: Image.asset('images/dice$rightDiceNumber.png'),
              )
          ),
        ],
      ),
    );
  }
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517366/389fb8e9-95ac-a8fe-c86b-27b5e06f048b.png)