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

<< 소스 코드 - 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) {
          return 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(
                                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';

class Dice extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Container();
  }
}

 

 

<< 출력 화면 >>