[2024.01.09] 플러터(flutter) 조금 매운맛 강좌 05 | 로그인과 주사위게임

<< 소스 코드 - main.dart >>

import 'package:flutter/material.dart';
import 'dice.dart';

void main() => runApp(MyApp());

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

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

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

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

class _LogInState extends State<LogIn> {
  //ID / Pwd TextBox의 값을 읽어들이기 위해 TextEditingController 사용.
  TextEditingController controller = TextEditingController();
  TextEditingController controller2 = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar 영역에 AppBar 위젯 추가
      appBar: AppBar(
        title: Text('Log in'),
        backgroundColor: Colors.redAccent,
        centerTitle: true,
        //AppBar의 왼쪽(leading)에 아이콘 버튼(메뉴아이콘) 추가
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){},
        ),
        //AppBar의 오른쪽(Actions)에 아이콘 버튼(서치아이콘) 추가
        actions: <Widget>[
          IconButton(onPressed: (){}, icon: Icon(Icons.search))
        ],
      ),
      //바디 영역 구현
      body: Builder(
        builder: (context) {
          //사용자의 제스쳐를 받을때 GestureDetector 위젯 사용
          return GestureDetector(
            //화면의 빈공간 Tab 시 focus가 사라져서 키보드가 사라짐.
            onTap: (){
              FocusScope.of(context).unfocus();
            },
            child: SingleChildScrollView(
              //Column(세로타입) 위젯 추가
              child: Column(
                children: <Widget>[
                  //Padding(여백) 지정
                  Padding(padding: EdgeInsets.only(top: 50)),
                  //Center(중앙) 위젯을 추가하여 중앙에 이미지 추가
                  Center(
                    child: Image(
                      image: AssetImage('assets/sanrio.png'),
                      width: 170.0,
                      height: 190.0,
                    ),
                  ),
                  //여러개의 TextField 관리를 위하여 Form을 사용
                  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(
                                  //autofocus: true,
                                  controller: controller,
                                  //TextField와 TextEditingController의 연동
                                  decoration: InputDecoration(
                                      labelText: 'Enter "dice"'
                                  ),
                                  keyboardType: TextInputType.emailAddress,
                                ),
                                TextField(
                                  controller: controller2,
                                  //TextField와 TextEditingController의 연동
                                  decoration: InputDecoration(
                                      labelText: 'Enter password'
                                  ),
                                  keyboardType: TextInputType.text,
                                  obscureText: true,
                                ),
                                SizedBox(height: 40.0,),
                                ButtonTheme(
                                    minWidth: 100.0,
                                    height: 50.0,
                                    child: 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') {
                                            showSnackBar2(context);
                                          }
                                          else if (controller.text != 'dice'
                                              && controller2.text == '1234') {
                                            showSnackBar3(context);
                                          }
                                          else {
                                            showSnackBar(context);
                                          }
                                        },
                                        child: Icon(
                                          Icons.arrow_forward,
                                          color: Colors.white,
                                          size: 35.0,
                                        ))
                                ),
                              ],
                            )
                        )
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      ),
    );
  }
}

void showSnackBar(BuildContext context){
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('로그인 정보를 다시 확인하세요.',
      textAlign: TextAlign.center,),
      duration: Duration(seconds: 2),
      backgroundColor: Colors.blue,
    )
  );
}

void showSnackBar2(BuildContext context){
  ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('비밀번호가 일치하지 않습니다.',
          textAlign: TextAlign.center,),
        duration: Duration(seconds: 2),
        backgroundColor: Colors.blue,
      )
  );
}

void showSnackBar3(BuildContext context){
  ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('dice의 철자를 확인하세요.',
          textAlign: TextAlign.center,),
        duration: Duration(seconds: 2),
        backgroundColor: Colors.blue,
      )
  );
}

 

<< 소스 코드 - dice.dart >>

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:fluttertoast/fluttertoast.dart';

class Dice extends StatefulWidget{
  @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(
        backgroundColor: Colors.redAccent,
        title: Text('Dice game'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(32.0),
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // Image(
                  //   image: AssetImage('image/dice1.png'),
                  //   width: 300.0,
                  // )
                  Expanded(
                    // flex: 2,
                    child: Image.asset('image/dice$leftDice.png')
                  ),
                  SizedBox(
                    width: 20.0,
                  ),
                  Expanded(
                    // flex: 1,
                    child: Image.asset('image/dice$rightDice.png')
                  ),
                ],
              ),
            ),
            ButtonTheme(
              minWidth: 100.0,
              height: 60.0,
              child: ElevatedButton(
                  onPressed: (){
                    setState(() {
                      leftDice = Random().nextInt(6)+1;
                      rightDice = Random().nextInt(6)+1;
                    });
                    showToast(
                        "Left dice: {$leftDice}, Right dice: {$rightDice}"
                    );
                  },
                  child: Icon(
                    Icons.play_arrow,
                    color: Colors.white,
                    size: 50.0,
                  ),
                  style: ElevatedButton.styleFrom(
                    backgroundColor:Colors.orangeAccent,
                    foregroundColor: Colors.white,
                  ),
              ),
            ),
          ],
        ),
      ),
    );
  }}

void showToast(String message){
  Fluttertoast.showToast(
    msg: message,
    backgroundColor: Colors.white,
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
  );
}

 

<< 출력 화면 >>