[Flutter] Dice App

 

dice6.png

0.01MB

dice5.png

0.01MB

dice4.png

0.01MB

dice3.png

0.01MB

dice2.png

0.01MB

dice1.png

0.00MB

 

project_name/images 사진 넣기

 

 

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - images/

 

 

 

MaterialApp ▶ GetMaterialApp

void main() {
  return runApp(
    GetMaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lime,
        body: _DicePage(),
      ),
    ),
  );
}

 

 

 

Controller class

class Controller extends GetxController {
  var _leftDiceNumber = 1.obs;
  var _rightDiceNumber = 1.obs;

  changeDiceFaceLeft() {
    _leftDiceNumber.value = Random().nextInt(6) + 1; // 0-5
  }

  changeDiceFaceRight() {
    _rightDiceNumber.value = Random().nextInt(6) + 1; // 0-5
  }
}

 

 

 

StatefulWidget ▶ StatelessWidget

class _DicePage extends StatelessWidget {
  Controller c = Get.put(Controller());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  c.changeDiceFaceLeft();
                },
                child: Obx(() => Image.asset('images/dice${c._leftDiceNumber}.png'))),
          ),
          Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  c.changeDiceFaceRight();
                },
                child: Obx(() => Image.asset('images/dice${c._rightDiceNumber}.png'))),
          )
        ],
      ),
    );
  }
}

 

 

 

결과

 

 

 

 

참고 : blog.naver.com/PostView.nhn?blogId=getinthere&logNo=221755866812&parentCategoryNo=34&categoryNo=&viewDate=&isShowPopularPosts=false&from=postList

flutter 챕터3 - Flutter 49강 주사위 앱 만들기