flutterでログイン画面を作る

初めましてblueです。

現在、ITベンチャー企業でスマホアプリ開発を行なっています。

今回はflutterでログイン画面を作ったので、全体コードを載せておきます
※見た目だけになります

実装画面

全体コード

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
 runApp(const MyApp());
}

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

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const Login(),
   );
 }
}

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

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

class LoginState extends State<Login>{
 bool passwordDisplay = true;

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: const Text('ログイン'),
       ),
       body: Center(
           child: Container(
             padding: const EdgeInsets.all(30.0),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
                 TextFormField(
                   decoration: const InputDecoration(
                     labelText: 'ログインID',
                   ),
                 ),
                 TextFormField(
                   obscureText: passwordDisplay,
                   decoration: InputDecoration(
                       labelText: 'パスワード',
                       suffixIcon: IconButton(
                         icon: FaIcon(passwordDisplay
                             ? FontAwesomeIcons.solidEyeSlash
                             : FontAwesomeIcons.solidEye),
                         onPressed: () {
                           setState(() {
                             passwordDisplay = !passwordDisplay;
                           });
                         },
                       )),
                 ),
                 ElevatedButton(
                   child: const Text(
                     'ログイン',
                     style: TextStyle(
                       fontSize: 20,
                     ),
                   ),
                   onPressed: () {
                   },
                 ),
               ],
             ),
           ),
       ),
     ),
   );
 }
}

実装コードの一部

TextFormField(
  obscureText: passwordDisplay,
  decoration: InputDecoration(
 　　labelText: 'パスワード',
  suffixIcon: IconButton(
      icon: FaIcon(passwordDisplay
        ? FontAwesomeIcons.solidEyeSlash
        : FontAwesomeIcons.solidEye),
        onPressed: () {
          setState(() {
            passwordDisplay = !passwordDisplay;
                });
          },
     )),
  ),

パスワードの部分を表示・非表示出来るようにしています。
今回は、アイコン部分を押すことで表示・非表示が出来るので、passwordDisplayにtrue・falseを渡すようにしています。

suffixIcon でテキスト部分の右側にアイコンを表示することが出来ます
obscureText でテキストの表示・非表示をすることが出来ます