flutter 다이스게임 만들기

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

오늘 부터 주사위 게임을 만드는것을 조금씩 해보겠습니다.

이런식으로 주사위 굴리는 걸 만들어보겠습니다.

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',

      debugShowCheckedModeBanner: true,
      home: dice(),
    );
  }
}



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('hello'),
        centerTitle: true,
        backgroundColor: Colors.purple,
        leading: IconButton(icon: Icon(Icons.menu),onPressed: (){}),
        actions: [
          IconButton(icon: Icon(Icons.search),onPressed: (){})
        ],
      ),
    );
  }
}

기본적으로 dic클래스 만드는거까지는 생략하고 설명을 하겠습니다.

그럼 

Scaffold(
  appBar: AppBar(
    title: Text('hello'),
    centerTitle: true,
    backgroundColor: Colors.purple,
    leading: IconButton(icon: Icon(Icons.menu),onPressed: (){}),
    actions: [
      IconButton(icon: Icon(Icons.search),onPressed: (){})
    ],
  ),
);

여기서 scaffold 안에 apprbar을 만들어줍니다. 

centerTiltile로 title이 중간에올수 있게 해주고

leading으로 왼쪽에 넣을 요소를 넣어줍니다. 현제 iconbutton을 넣어 주었습니다.

actions에는 오른쪽에 넣을 것들을 적어 줍니다. [] 이렇게 배열 형태이므로 여러개 넣어 줄수 있습니다.

leading도 Row넣고 해서 여러개 넣을수 있기는 합니다.

그다음 

class _diceState extends State<dice> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello'),
        centerTitle: true,
        backgroundColor: Colors.purple,
        leading: IconButton(icon: Icon(Icons.menu),onPressed: (){}),
        actions: [
          IconButton(icon: Icon(Icons.search),onPressed: (){}),

        ],
      ),
      body: Column(
        children: [
          Padding(padding: EdgeInsets.only(top: 50),),
          Center(
            child:Image(
              image:AssetImage('image/bluelogo.png') ,
              width: 170,
              height: 170,
            )
          )
        ],
      ),
    );
  }
}

dice class를 이렇게 수정해주세요

이제 body 에 column을  넣어서 요소들을 세로로 배치하게 만들었습니다.

그리고 그안에 padding위젯을 활용해서 위에 공간을 뛰우게 만들었습니다.

그다음 center로 중간에 위치하게 만들고 Image위젝을 이용하여 이미지를 넣어줬습니다.

Image위젯 내부에 image는 들어갈 이미지를  정하게 되는데 AssetImage는 현재 컴퓨터 내부에 있는것을 넣겠다는 것입니다. 이를 하기 위해서는 pubspec으로 이동해서

이런식으로 해주면 image폴더 내부에 있는 모든것을 활용할수 있게 됩니다.

width와 height는 그림 폭과 높이를 정하게 해줍니다.

Column(
  children: [
    Padding(
      padding: EdgeInsets.only(top: 50),
    ),
    Center(
        child: Image(
      image: AssetImage('image/bluelogo.png'),
      width: 170,
      height: 170,
    )),
    Form(
      child: Theme(
        data: ThemeData(
            inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(
            color: Colors.red,
            fontSize: 20.0,
          ),
        )),
        child: Container(
          padding: EdgeInsets.all(40),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter"dice"',
                ),
                keyboardType: TextInputType.text,
              ),
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter"password"',
                ),
                keyboardType: TextInputType.text,
              ),
            ],
          ),
        ),
      ),
    )
  ],
),

column 내부에서 이미지 밑에 Form 위젯을 넣고 그안에서 Theme 위젯 을 여어줍니다.

data요소로 ThemeData를 열어서 여러 색깔이나 형식을 정해주게 됩니다.

input 즉 입력 하는 부분의 스타일을 설정해주기위해 inputDecorationTheme를 활용하고

그중에 labelstyle에 Textstyle을 넣어서 색깔은 빨간색 크기는 20으로 설정했습니다.

그리고 Theme의 child로 container을 넣어서 패딩을 주고 그자식에는 column을 넣어주서

세로로 요소가 들어가도록 했습니다.

TextField는 글자를 입력하는 부분을 만드는 것으로  keyboardtype은 어떤 종류인지 알려줍니다.

단순히 글자인지 이메일인지 비밀번호인지 그에따른 형식으로 우리눈에 보이게 됩니다.

decoration의 inputDecoration을 활용하여 input부분을 설정할수있는데 labelText로 그림처럼 나오는 글자를 설정 할수 있습니다.

 

오늘은 여기까지 해보도록하겠습니다.