로그인 페이지 디자인 만들기 (elevated button)

opacity 클래스(투명도) 활용

=> 마지막 구글 로고 이미지를 투명하게 설정하여 없는 것처럼 보이게 할 수 있다

해당 이미지와 글자의 간격이 spaceEvenly 속성이 적용되어 각 요소들의 공백 간격을 균등하게 배치시키지만

' Login with google ' 메시지가 가운데로 잘 오지 않는다 이것을 해결하기 위해 투명도를 활용할 수 있다

[ 로고 참고용 ]

flogo.png

0.00MB

glogo.png

0.00MB

[ 실행 화면 ]

[ 메인 페이지 ]

개별적인 버튼을 일일이 만들면 코드가 길어지고 가독성이 떨어진다

규격화 하여 하나의 메서드 또는 위젯을 만들어 관리해보자~! ' body ' 부분에는 메서드, 위젯의 형태로 만들어도 상관없다

' widget ' 타입으로 맞춰서 만들면 된다

import 'package:flutter/material.dart';
import 'package:loginpage/mybutton.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 StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Sing In'),
      ),
      body: _buildButton(),
    );
  }

  Widget _buildButton() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          MyButton(
            image: Image.asset('image/glogo.png'),
            text: Text(
              'Login with Google',
              style: TextStyle(color: Colors.black),
            ),
            color: Colors.white,
            radius: 10,
            onPressed: () {},
          ),
          SizedBox(
            height: 10,
          ),
          MyButton(
            image: Image.asset('image/flogo.png'),
            text: Text(
              'Login with Facebook',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.indigo,
            radius: 10,
            onPressed: () {},
          ),
          SizedBox(
            height: 10,
          ),
          MyButton(
              image: Icon(Icons.email),
              text: Text(
                'Login with Email',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.green,
              radius: 10,
              onPressed: () {})
        ],
      ),
    );
  }
}

[  MyButton 위젯 ]

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  const MyButton(
      {Key? key,
      required this.image,
      required this.text,
      required this.color,
      required this.radius,
      required this.onPressed})
      : super(key: key);

  final Widget image;
  final Widget text;
  final Color color;
  final double radius;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: color,
        minimumSize: Size.fromHeight(50),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(radius),
        ),
      ),
      onPressed: onPressed,
      child: Row(
        mainAxisAlignment:
            MainAxisAlignment.spaceEvenly, //해당 요소들의 공백 간격을 균등하게 배치
        children: [
          image,
          text,
          Opacity(
            opacity: 0.0,
            child: Image.asset('image/glogo.png'),
          ),
        ],
      ),
    );
  }
}