[Flutter] 플러터 기초 (9) - 로그인 페이지 예제(login page tutorial)

[Flutter] 플러터 기초 (9) - 로그인 페이지 예제(login page tutorial)

 

 

 

 

 

 

Flutter 플러터 기초 (9) - 로그인 페이지 예제(login page tutorial)

 

 

 

이모티콘・01・고양이 마멋 친구들 - Google Play 앱

 

안녕하세요 정보처리마법사 입니다.

 

이번 포스팅의 주제는  로그인 페이지 예제에 관한 내용입니다.

 

main.dart, login_page.dart

login_page.dart 를 import 해줍니다.

 

 

key : formKey, 의 위치를 주의하세요!

Program linking failed. 가 뜨길래 구글링 해보니 클린업을 해주랍니다.

Analyze > Code Cleanup.

Analyze > Silent Code Cleanup 을 해주니 linking failed 가 사라졌습니다.

 

의도한 대로 잘 됩니다.

 

 

 

main.dart

import 'package:flutter/material.dart';
 
import 'login_page.dart';
 
void main() {
  runApp(new MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'login demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new LoginPage(),
    );
  }
}
 

 

 

 

login_page.dart

import 'package:flutter/material.dart';
 
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
 
class _LoginPageState extends State<LoginPage> {
  final formKey = new GlobalKey<FormState>();
 
  String _email;
  String _password;
 
  void validateAndSave() {
    final form = formKey.currentState;
    if (form.validate()) {
      form.save();
      print('Form is valid Email: $_email, password: $_password');
    } else {
      print('Form is invalid Email: $_email, password: $_password');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('login demo'),
      ),
      body: new Container(
        padding: EdgeInsets.all(16),
        child: new Form(
          key: formKey,
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new TextFormField(
                decoration: new InputDecoration(labelText: 'Email'),
                validator: (value) =>
                value.isEmpty ? 'Email can\'t be empty' : null,
                onSaved: (value) => _email = value,
              ),
              new TextFormField(
                obscureText: true,
                decoration: new InputDecoration(labelText: 'Password'),
                validator: (value) =>
                value.isEmpty ? 'Password can\'t be empty' : null,
                onSaved: (value) => _password = value,
              ),
              new RaisedButton(
                child: new Text(
                  'Login',
                  style: new TextStyle(fontSize: 20.0),
                ),
                onPressed: validateAndSave,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
 

 

Ctrl + C ,   Ctrl + V 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Fin.

 

잘 못 된 정보가 있으면 말씀해주세요~

 

 

공감버튼 클릭은 작성자에게 큰 힘이 됩니다.  행복한 하루 되세요.