4. login_division_page

appBar, bottomNavigation둘다 없다.

Body만 가지고 있다.

Scaffold에 Stack로 구성을 해도될것 같다. 

Background이미지로 gif로 주고, Positioned로 로그인 버튼들의 위치를 임의로 잡아준다.

만드는 도중에 로그인 버튼들을 내가 직접 만들려고 했지만, 다른 사람들을 찾아보니 모두 image로 사용을했었다.

일단 우선 image로 만들어서 넣고 InkWell로 버튼화 시켜주었다. 아이콘 등 마음에 안들지만.. 우선 시간이 없으니 먼저 초안으로 만들어 놓고 추후 수정 해보자.

 

전체 코드 

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class LoginDivisionPage extends StatelessWidget {
  const LoginDivisionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: _loginBox(context),
      ),
    );
  }

  Stack _loginBox(BuildContext context) {
    return Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/background.gif"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned(
            bottom: 80,
            left: 20,
            child: Container(
              width: 350,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: [
                    _outhButton(
                        context, "/login", "assets/kakaologinbutton.png"),
                    SizedBox(height: 8),
                    _outhButton(
                        context, "/login", "assets/appleloginbutton.png"),
                    SizedBox(height: 8),
                    InkWell(
                      onTap: () {
                        Navigator.pushNamed(context, "/login");
                      },
                      child: Container(
                        width: double.infinity,
                        height: 50,
                        child: Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: Text(
                            "다른 방법으로 시작",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 16, fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 8),
                    InkWell(
                      onTap: () {
                        Navigator.pushNamed(context, "/main");
                      },
                      child: Container(
                        width: double.infinity,
                        child: Padding(
                          padding: const EdgeInsets.only(bottom: 10),
                          child: Text(
                            "로그인 전 둘러보기",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff8A8A8A),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ],
      );
  }

  InkWell _outhButton(context, routeName, String imagePath) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, routeName);
      },
      child: Container(
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          image:
              DecorationImage(image: AssetImage(imagePath), fit: BoxFit.cover),
        ),
      ),
    );
  }
}