[flutter2.0] 7강 | 로그인 페이지 코드 리팩토링(refactoring)

✅이번 시간에는 코드 리팩토링 부분에 대해서 알아볼 예정이야.

플러터를 공부하면서 iOS에서 공부한 디자인 패턴을 적용할 수 없어서 유지보수가 힘들겠다는 생각이 들었었는데, 그럼 한번 보도록 할까?

 

이전 포스팅을 참고하면서 보면 2배로 좋다.

2021.08.17 - [flutter/조금 매운맛 (중급)] - [flutter2.0] 3~5강 | 로그인과 주사위 앱 만들기

[flutter2.0] 3~5강 | 로그인과 주사위 앱 만들기

 

이전 포스팅과 달라진 파일의 구조도

이전 포스팅과 달라진 파일의 구조도

✅login.dart 

import 'package:flutter/material.dart';
import 'package:signin_refactoring/my_button/my_button.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text(
          'Sign In',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        elevation: 0.2,
      ),
      body: buildButton(),
    );
  }

  Widget buildButton() {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ButtonTheme(
            height: 50.0,
            child: MyButton(
              image: Image.asset('images/glogo.png'),
              text: Text(
                'Login with Google',
                style: TextStyle(color: Colors.black87, fontSize: 15.0),
              ),
              color: Colors.white,
              radius: 4.0,
              onPressed: () {},
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          ButtonTheme(
            height: 50.0,
            child: MyButton(
              image: Image.asset('images/flogo.png'),
              text: Text(
                'Login with Google',
                style: TextStyle(color: Colors.black87, fontSize: 15.0),
              ),
              color: Colors.blueAccent,
              radius: 4.0,
              onPressed: () {},
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          ButtonTheme(
            height: 50.0,
            child: RaisedButton(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Icon(
                    Icons.mail,
                    color: Colors.white,
                  ),
                  Text(
                    'Login with Email',
                    style: TextStyle(color: Colors.white, fontSize: 15.0),
                  ),
                  Opacity(
                    opacity: 0.0,
                    child: Icon(
                      Icons.mail,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
              color: Colors.green,
              onPressed: () {},
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(4.0),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

 

✅my_bytton.dart

import 'package:flutter/material.dart';
import 'package:signin_refactoring/login_app/login.dart';

class MyButton extends StatelessWidget {

  MyButton({this.image,this.text,this.color,this.radius,this.onPressed});

  final Widget? image;
  final Widget? text;
  final Color? color; // 여기서 Colors 아니게 조심
  final double? radius;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {

    final LogIn logIn = new LogIn();
    logIn.buildButton();


    return ButtonTheme(
      height: 50.0,
      child: ElevatedButton(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            image!,
            text!,
            Opacity( // 이 위젯에 대해서 알아보기
              opacity: 0.0,
              child: Image.asset('images/glogo.png'),
            ),
          ],
        ),
        style: ElevatedButton.styleFrom(
          primary: color
        ),
        onPressed: onPressed,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(radius!),
        ),
      ),
    );
  }
}

❗️여기서 조금 주의해야 하는점

final Color? color; 의 선언에서 Color -> Colors로 잘못 선언하는 경우가 있는데 오류가 나니까,, 꼭 주의하기

null Safety가 적용되면서 에러가 종종 있기는 한데, 스위프트를 공부하면서 Optional을 이해하기 위해 엄청나게 노력했어서 플러터에서 그냥 쉽게 훅훅 들어와서 넘 불편함은 없다

 

 

✅main.dart

import 'package:flutter/material.dart';
import 'login_app/login.dart';
import 'my_button/my_button.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Login',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LogIn(),
    );
  }
}