[Flutter] Widget 별 가독성 향상

별건아니고, 저번 포스팅에서 너무 계층이 많다보니, 가독성이 떨어져서

위젯별로 리턴하는 펑션을 분리하고, 해당 펑션으로 대체하여 계층소스에 추가하였다.

이렇게 하니, 좀더 명확하고 직관적이여서 보기 편했다.

 

추천! 개인적으로 State의 소스가 너무 길어지면... 뎊스에 대해서 헷갈린다.

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

void main() => runApp(LoginApp());

class LoginApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Login',
      home: Login(),
    );
  }
}
class Login extends StatefulWidget{
  @override
  State<Login> createState() => LoginState();
}

class LoginState extends State<Login>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Log in'),
        elevation: 0.0,
        backgroundColor: Colors.red,
        centerTitle: true,
        leading: IconButton(icon: Icon(Icons.menu),onPressed: (){}),
        actions: <Widget>[
          IconButton(onPressed: (){}, icon: Icon(Icons.search))
        ],
      ),
      body: Column(
        children: [
          const Padding(padding: EdgeInsets.only(top: 50)),
          const Center(
            child: Text(
              textAlign: TextAlign.center,
              'logo text'
            ),
          ),
          Form(child: Theme(
            data: ThemeData(
              primaryColor: Colors.grey,
              inputDecorationTheme: const InputDecorationTheme(
                labelStyle: TextStyle(color: Colors.teal,fontSize: 15.0)
              )
            ),
            child: Container(
              padding: const EdgeInsets.all(40.0),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    email(),
                    password(),
                    const SizedBox(height: 40.0,),
                    button()
                  ],
                ),
              ),
            ),
          ))
        ],
      )
    );
  }

  Widget email() => const TextField(
    decoration: InputDecoration(labelText: 'Enter email'),
    keyboardType: TextInputType.text,
    
  );
  Widget password() => const TextField(
    decoration: InputDecoration(labelText: 'Enter password'),
    keyboardType: TextInputType.text,
    obscureText: true,
  );
  Widget button() =>  ButtonTheme(
        minWidth: 100.0,
        height: 50.0,
        child: ElevatedButton(
          onPressed: (){},
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.orangeAccent
          ),
          child: const Icon(
            Icons.arrow_forward,
            color: Colors.white,
            size: 35.0,
          ),
        ),
  );
}