[Flutter] 로그인 화면 예제

 

 

Flutter 언어로 로그인화면을 구현해보겠습니다. 

Flutter 는 ios 와 android 를 동시에 구현할 수 있는 언어입니다. 

때문에 빠른 개발이 필요시 많이 사용하게되는데요 . 오늘은 로그인 페이지를 구현해 보겠습니다 .

 

 

flutter는 

widget 마다 함수로 나눠주는 것이 좋다고합니다 .  가독성면에서도 좋습니다. 

login() 부분은 서버와 통신을 하는 부분이라 각자 알맞게 사용하시면 될거같습니다.~

 

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

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final idTextController = TextEditingController();
  final passwordTextController = TextEditingController();

  FocusNode idFocus = FocusNode();
  FocusNode passwordFocus = FocusNode();
  final _navService = GetIt.I<NavigationService>();

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      child: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.symmetric(horizontal: 16),
          children: <Widget>[
            logo(),
            id(),
            password(),
            SizedBox(height: 50),
            button(),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    idFocus.requestFocus();
  }

  Widget logo() => Container(
        child: Image.asset(
          'assets/logo.png',
          width: 96,
          height: 47,
        ),
      );

  Widget id() => Container(
        margin: EdgeInsets.only(top: 70),
        height: 53,
        child: TextField(
          controller: idTextController,
          onSubmitted: (_) {
            passwordFocus.requestFocus();
          },
          focusNode: idFocus,
          decoration: InputDecoration(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            labelText: '아이디',
          ),
        ),
      );

  Widget password() => Container(
        margin: EdgeInsets.only(top: 15),
        height: 53,
        child: TextField(
          controller: passwordTextController,
          focusNode: passwordFocus,
          obscureText: true,
          decoration: InputDecoration(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            labelText: '비밀번호',
          ),
        ),
      );

  Widget button() => Container(
        margin: EdgeInsets.only(top: 15),
        height: 53,
        child: ElevatedButton(
          onPressed: () => login(),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(
              Color(0xFF2C75F5),
            ),
          ),
          child: Text(
            "로그인",
            style: TextStyle(
              fontSize: 14,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      );

  @override
  void dispose() {
    idTextController.dispose();
    passwordTextController.dispose();
    super.dispose();
  }

  login() async {
  ////요 부분은 데이터 통신을 위한 부분이라 빼실거 빼도 됩니다 . 
    if (idTextController != null && passwordTextController != null) {
      RequestLoginModel requestLoginModel = RequestLoginModel(
        email: idTextController.text,
        password: HashUtil.hash256(passwordTextController.text),
      );

      ResponseLoginModel result =
          await Client.create().login(requestLoginModel);

      if (result.result != false) {
        Client.token = result.token;
        _navService.navigateAndClear(RouteNames.Home);
      }
    }
  }
}

 

 

저도 Flutter 처음 써보네요 ~ 

좋은방법있으면 댓글 부탁드립니다 . 감사합니다 .