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

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

<details>
<summary>フォルダ構成(lib)</summary>

- 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

</details>

## 作成時の

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

入力フォームは
```dart
TextField(
　　obscureText: 文字を隠すにはtrue,
 onChanged: 変更時の処理,
 decoration: InputDecoration(
            icon: アイコン,
            hintText:薄くなっている文字
 ),
)
```
を使います。入力された文字を保持するにはこの`変更時の処理`を使用しましょう。たったこれだけでログイン画面は完成です！



```dart: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](https://github.com/yamuyum/flutter-Basic "yamuyum/flutter-Basic")