Flutter - TextField를 이용하여 로그인 페이지 구현하기(2)

ButtonBar를 이용하면 버튼의 배치를 쉽게 할 수 있습니다.

ButtonBar 위젯을 만들고 내부에 Button 위젯들을 넣어주면 수평으로 배치해줍니다.

 

버튼에는 FlatButton 과 RaisedButton 이 있습니다.

각각 Material 가이드라인에서 TextButton 과 Contained Button 으로 설명하고 있습니다.

 

하나는 버튼의 배경색이 없이 텍스트만있고, 다른 하나는 버튼의 배경색과 텍스트로 이루어져 있습니다.

왜 이렇게 나눠놨을까요? Material 가이드라인에 따르면 하나의 레이아웃에는 눈에 띄는 버튼이 있어야 한다고 합니다.

눈에 잘 띄는 버튼은 사용자가 앱을 통해 진행하기를 바라는 행동을 나타낸다고 하는데 그런 의미에서 버튼 위젯을 나눈 것이라 생각합니다.

 

TextEditingController 를 이용하여 취소 버튼을 눌렀을 때 사용자가 입력한 id, pw가 지워지도록 구현하고,
Navigator 의 pop 을 이용하여 Next 버튼을 클릭하면 네이게이션 스택에서 현재 페이지 ( Flutter에서는 route 라 불림)을

제거합니다. 그러면 다음 페이지로 이동하는 효과를 얻을 수 있습니다.

 

resizeToAvoidBottomInset 이 값의 default 값은 true 인데 body나 scaffold 위젯이 높이가 정의된 스크린 키보드에 의해 스스로 크기를 재조정한다는 의미합니다.

 

Id Pw를 입력하고 Next 버튼을 누르면 로그인 페이지가 아래로 내려가면서 완료 페이지가 나온다.

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(
                filled: true,
                labelText: 'Username',
              ),
            ),
            SizedBox(height: 12.0),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(
                filled: true,
                labelText: 'Password',
              ),
              obscureText: true,
            ),
            ButtonBar(
              children: <Widget>[
                FlatButton(
                  child: Text('CANCEL'),
                  onPressed: () {
                    _usernameController.clear();
                    _passwordController.clear();
                  },
                ),
                RaisedButton(
                  child: Text('NEXT'),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('You did it!'),
      ),
      resizeToAvoidBottomInset: false,
    );
  }
}

class ShrineApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shrine',
      home: HomePage(),
      initialRoute: '/login',
      onGenerateRoute: _getRoute,
    );
  }

  Route<dynamic> _getRoute(RouteSettings settings) {
    if (settings.name != '/login') {
      return null;
    }

    return MaterialPageRoute<void>(
      settings: settings,
      builder: (BuildContext context) => LoginPage(),
      fullscreenDialog: true,
    );
  }
}