Zenn
🐈

【一分理解】Flutterでログイン画面をつくろう

2022/03/11に公開
Flutter
アプリ
ログイン画面
忙しい人向け
tech

手取り早くアプリのログイン画面を作りたい方へ！

フォルダ構成(lib)
  • Components
    • footer.dart
    • header.dart
    • inputFields.dart
    • sideBar.dart
    • snsIcon.dart
  • Views
    • homeView.dart
    • loginView.dart
    • signInView.dart
  • main.dart
  • colors.dart
  • constants.dart
  • responsive.dart

作成時の

loginView.dart

ログイン画面と言っても必要なのは
・ID(Emailとか)の入力フォーム
・パスワードの入力フォーム
・ボタン
(・SNS認証用のボタン)

入力フォームは

TextField(
　　obscureText: 文字を隠すにはtrue,
 onChanged: 変更時の処理,
 decoration: InputDecoration(
            icon: アイコン,
            hintText:薄くなっている文字
 ),
)

を使います。入力された文字を保持するにはこの変更時の処理を使用しましょう。たったこれだけでログイン画面は完成です！

loginView.dart
import 'package:flutter/material.dart';
import '../Views/signInView.dart';

import '../Components/inputFields.dart';
import '../Components/sideMenu.dart';
import '../Components/snsIcon.dart';
import '../colors.dart';

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

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Container(
      width: size.width*0.8,
      child: Scaffold(
        drawer: SideMenu(),
        appBar: AppBar(
          // automaticallyImplyLeading: false,
          title: Text("Login"),
          actions: [
            IconButton(onPressed:() {
              Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SignInView(),
                  )
              );
            }, icon: Icon(Icons.assignment_turned_in_outlined)),
          ],
        ),
        body: Center(
          child: Column(
            children: [
              Text("Login!"),
              InputField(icon: Icon(Icons.person,color: primaryColor), onChanged: (String value) {  }, hintText: 'Email',),
              PassInputForm(onChanged: (String value) {  },),
              ClipRRect(
                borderRadius: BorderRadius.circular(24),
                child:
                  FlatButton(
                    padding: EdgeInsets.symmetric(vertical:20,horizontal: 40),
                      onPressed: (){},
                      color: primaryColor,
                      child: Text("Login!")),
              ),
              ExpandedParts(),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SNSIcon(iconSrc: 'assets/icons/twitter.png', press: (){},),
                  SNSIcon(iconSrc: 'assets/icons/facebook.png', press: (){},),
                  SNSIcon(iconSrc: 'assets/icons/google.png', press: (){},),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("まだアカウントを持っていない方は　",
                    style: TextStyle(
                        color: primaryColor,
                    ),
                  ),
                  GestureDetector(
                    onTap: (){
                      Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => SignInView(),
                          )
                      );
                    },
                    child: Text(
                        "こちら",
                        style: TextStyle(
                          color: primaryColor,
                          fontWeight: FontWeight.bold
                        ),
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
他に必要なもの

MyGitHub

Discussion