Flutter 다이스게임만들기 4

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

오늘은 Dice 페이지  외형만 완성해보겠습니다.

 Column(
    children: [
      Padding(
        padding: EdgeInsets.only(top: 100),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 2,
                child: Image(
              image: AssetImage('image/bluelogo.png'),
            ),
            ),
            SizedBox(
              width: 100,
            ),
            Expanded(
              flex: 2,
                child: Image(
              image: AssetImage('image/bluelogo.png'),
            ),
            ),
          ],
        ),
      ),
     
    ],
  ),

우선  이미지 두개 한줄 버튼한개 한줄 이렇게  하기위해 column을 써주고 위에 너무 붙으면 그러니까 젤위에 있는 이미지를 가로로 넣기 위해 만든 Row를 padding으로 감싸서 padding: EdgeInsets.only(top: 100), 이렇게 넣어서 위에 100만큼 빈공간을 뛰워주었습니다.

그리고 왼쪽 오른쪽 비율을 똑같이 넣기 위해서 Expande를 사용합니다. flex에 있는 숫자가 다른 Expanded 에 대한 비율입니다. 현재 2:2이고 2:1로 바꺼보면

 Column(
    children: [
      Padding(
        padding: EdgeInsets.only(top: 100),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 2,
                child: Image(
              image: AssetImage('image/bluelogo.png'),
            ),
            ),
            SizedBox(
              width: 100,
            ),
            Expanded(
              flex: 1,
                child: Image(
              image: AssetImage('image/bluelogo.png'),
            ),
            ),
          ],
        ),
      ),

    ],
  ),

이런식으로 오른쪽이 반정도 줄어든것이 확인 됩니다.

다시 원상복구 하고  이미지들 사이에 SizedBox로 공간을뛰워 줍니다.

mainAxisAlignment: MainAxisAlignment.center,

이거를 사용해서 이미지가 중간에 오도록 설정해줍니다.

그런데 Expande때문인지 넣어도 빼도 차이가 안보이지만 혹시 수정할수있으니 그대로 놔둘께요

이렇게 완성됬으면 이제 밑에 버튼을 넣어주겠습니다.

Column(
    children: [
      Padding(
        padding: EdgeInsets.only(top: 100),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,

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

          ],
        ),
      ),
      SizedBox(
        height: 50,
      ),
      ButtonTheme(
       
        child: ElevatedButton(
          onPressed: () {},
          child: Icon(
            Icons.play_arrow,
            color: Colors.white,
            size: 50.0,
          ),

        ),
      )

    ],
  ),

이런식으로 Row 밑에 sizedBox로 거리 벌려주고 ButtonTheme로  버튼을 한개 만들어줬습니다.

지금  버튼이 ElevateButton 이니까 

style: ElevatedButton.styleFrom(primary: Colors.purpleAccent),

이렇게 ElevatedButton.styleFrom을 불러와서 배경색으로 보라색을 주었습니다.

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> {
  @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/bluelogo.png'),
                  ),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    flex: 2,
                      child: Image(
                    image: AssetImage('image/bluelogo.png'),
                  ),
                  ),

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

              child: ElevatedButton(
                onPressed: () {},
                child: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 50.0,
                ),
                style: ElevatedButton.styleFrom(primary: Colors.purpleAccent),

              ),
            )

          ],
        ),

    );
  }
}

오늘은 이까지 외형만 만들어보고 내일은 버튼을 누르면 왼쪽 오른쪽이미지에 준비한 주사위 이미지가 랜덤하게 나오게 해보겠습니다.