[flutter] 로그인과 주사위 게임 만들기 (코딩셰프 조금 매운 맛)

 

snackBar은 하지 않았다. showSnackBar가 더이상 지원하지 않기 때문이다. 

하지만 text를 입력할 때 화면 밖을 눌렀을 때 입력창이 내려가는 GestureDetextor 때문에 Builder 위젯을 남겨두었다.

 

onPressed() - 버튼을 누를 때

onTap() - 버튼 외의 여러 위젯을 누를 때

 

Expanded를 사용하면 위젯을 지정 구역까지 꽉차게 만들 수 있다. flex로 비율을 지정할 수도 있다.

Image.asset() 을 사용하면 간편하게 이미지를 불러올 수 있다.

 

LogIn Widget 코드

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LogIn(),
      title: 'Dice Game',
    );
  }
}

class LogIn extends StatefulWidget {
  const LogIn({Key? key}) : super(key: key);

  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  TextEditingController controller = TextEditingController();
  TextEditingController controller2 = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Log In'),
          centerTitle: true,
          elevation: 0.0,
          backgroundColor: Colors.redAccent,
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          actions: [
            IconButton(onPressed: () {}, icon: Icon(Icons.search),)
          ],
        ),
        body: Builder(
        builder: (context) {
          return GestureDetector(
            onTap: (){
              FocusScope.of(context).unfocus();
            },
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
                    child: Center(
                      child: Image(
                        image: AssetImage('images/JjangGu.png'),
                        width: 170,
                        height: 190,
                      ),
                    ),
                  ),
                  Form(
                    child: Theme(
                      data: ThemeData(
                        primaryColor: Colors.teal,
                        inputDecorationTheme: InputDecorationTheme(
                            labelStyle: TextStyle(
                              color: Colors.teal,
                              fontSize: 15.0,
                            )
                        ),
                      ),
                      child: Container(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          children: [
                            TextField(
                              controller: controller,
                              decoration: InputDecoration(
                                  labelText: "Enter 'Dice'"
                              ),
                              keyboardType: TextInputType.emailAddress,
                            ),
                            TextField(
                              controller: controller2,
                              decoration: InputDecoration(
                                  labelText: "Enter password"
                              ),
                              keyboardType: TextInputType.text,
                              obscureText: true,
                            ),
                            SizedBox(
                              height: 30,
                            ),
                            ElevatedButton(
                              onPressed: () {
                                if (controller.text == 'dice' &&
                                    controller2.text == '1234') {
                                  Navigator.push(context,
                                      MaterialPageRoute(
                                          builder: (BuildContext context) =>
                                              Dice()));
                                }
                                else if (controller.text == 'dice' && controller2
                                    .text != '1234') {

                                }
                                else if (controller.text != 'dice' && controller2
                                    .text == '1234') {

                                }
                                else {

                                }
                              },
                              child: Text('Login'),
                              style: ButtonStyle(
                                backgroundColor: MaterialStateProperty.all(
                                    Colors.redAccent),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          );
        }
    )
    );
  }
}

 

Dice Widget 코드

 

class Dice extends StatefulWidget {
  const Dice({Key? key}) : super(key: key);

  @override
  State<Dice> createState() => _DiceState();
}

class _DiceState extends State<Dice> {
  int leftDice = 1;
  int rightDice = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent,
      appBar: AppBar(
        title: Text('Dice Game'),
        centerTitle: true,
        elevation: 0.0,
        backgroundColor: Colors.redAccent,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Row(
               children: [
                  Expanded(child: Image.asset('images/dice$leftDice.png')),
                 SizedBox(width: 20.0,),
                 Expanded(child: Image.asset('images/dice$rightDice.png')),
               ],
              ),
            ),
            ElevatedButton(onPressed: (){
              setState(() {
                leftDice = Random().nextInt(6)+1;
                rightDice = Random().nextInt(6)+1;
              });
            },
              child: Icon(Icons.play_arrow),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.amber)
              ),
            ),
          ],
        )
      ),
    );
  }
}

 

 

실행 결과이다.