Flutter 다이스게임 만들기 2

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

오늘은 가볍게 어제꺼에 이어서 껍데기부분을 완성해보겠습니다.

이런식으로 버튼을 만들어 보겠습니다.

Column(
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: 'Enter"dice"',
      ),
      keyboardType: TextInputType.text,
    ),
    TextField(
      decoration: InputDecoration(
        labelText: 'Enter"password"',
      ),
      keyboardType: TextInputType.text,
    ),
    SizedBox(
      height: 40.0,
    ),
    ElevatedButton(
        onPressed: (){},
        child: Icon(Icons.arrow_forward),
      style: ElevatedButton.styleFrom(
        primary: Colors.yellow,
        minimumSize: Size(100.0, 50.0),
      ),
    )
  ],
),

어제만들던거 밑에 sizedBox넣어주고  그밑에 버튼을 넣어주겠습니다.

onpressed에 누르면 실행할 함수넣어줘야되느데 일단 아무것도 안넣어주고 형식만 만들어 놓았습니다.

child는 버튼안에 넣어줄 내용 추가해주세요

style은 버튼종류.stylefrom하면  괄호안에 설정해주면 됩니다.

버튼 종류마다 다른데 elevatedButton 에서는 primary가 버튼 배경색 onprimary가 배경 글자색 으로 적용됩니다.

minimumSize는 최소 사이즈를 정해줄수 있습니다. 최소한의 크기를 정하게 해줍니다.

그럼 이제 이렇게 입력부분선택하면 선택한 부분이 밑에 내려가있어서 저렇게 노란색 뜨는 것을 해결해 보겠습니다.

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: SingleChildScrollView(
        child: 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,
                      ),
                      SizedBox(
                        height: 40.0,
                      ),
                      ElevatedButton(
                          onPressed: (){},
                          child: Icon(Icons.arrow_forward),
                        style: ElevatedButton.styleFrom(
                          primary: Colors.yellow,
                          minimumSize: Size(100.0, 50.0),
                          onPrimary: Colors.blue,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

이렇게 Scaffold body부분을 저런식으로 SingleChildScrollview로 감싸주면 해결이됩니다.

그럼 이제 여기서 입력다하고 아무리 화면 다른데 눌러도 탈출이 안되는데 그것을 해제해보겠습니다.

:GestureDetector(
    onTap: (){FocusScope.of(context).unfocus();},
  child:SingleChildScrollView(
    child: 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,
                  ),
                  SizedBox(
                    height: 40.0,
                  ),
                  ElevatedButton(
                      onPressed: (){},
                      child: Icon(Icons.arrow_forward),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.yellow,
                      minimumSize: Size(100.0, 50.0),
                      onPrimary: Colors.blue,
                    ),
                  )
                ],
              ),
            ),
          ),
        )
      ],
    ),
  ),
)

이런식으로 body부분을 GestureDetector로 감싸주고 ontab함수에   저런식으로 unfocus하도록 넣어주면 됩니다.

GestureDetector 너는 영어그대로 행동을 감지해줍니다 내부 요소들에게 일어나는 행동들을 감지 해줍니다.

그래서 이렇게 감지하는 행동이 이렇게 여러가지 있습니다.

즉 여기서 appbar를 누르면 해제가 안되지만 그밑에 body부분을 누르면 해제 됩니다.

FocusScope.of(context).unfocus();여기를 보면 Focus가 선택되어있는 것으로 보면 되고 현재 페이지의 context를 받아서 어떤 페이지의 focus를 해제 시켜줄지 정하게 됩니다.

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