[프로젝트][Front] login ui 생성하기_(1) spacer와 Expended

이번에는 login ui를 생성해 볼 것이다.
가장먼저 할 일은, 카카오 로그인으로 연결할 수 있는 로그인 화면을 만드는 것이다.

결과물을 먼저 보자면 다음과 같다.

다른건 찾아보면 쉬운 내용이라 넘어가고,
이번시간에는 가장 중요한 부분중에 하나인(버튼을 아래에 고정하기 위해) spacer와 extended에 대한 부분을 설명해보려고 한다.

이 두가지에 대한 개념은 일전에 내가 이미 정래해둔 바가 있는데,

여기를 참고 바란다.
https://velog.io/@sunj_0120/%EC%BA%A1%EC%8A%A4%ED%86%A4front-Spacer-Expended%EB%A1%9C-%EB%B2%84%ED%8A%BC-%ED%95%98%EB%8B%A8%EC%97%90-%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0

정리하자면, expended로 공간을 설정하고, spacer로 띄워주는게 핵심이다.

전체 구조는 다음과 같다. 알아보기 쉽도록 하기 위해 일부 요소는 제외했다.

class LoginHome extends StatefulWidget {
  const LoginHome({super.key});

  @override
  State<LoginHome> createState() => _LoginHomeState();
}

class _LoginHomeState extends State<LoginHome> {
  // 이미지 파일 경로 목록
  final List<String> imagePaths = [
    'assets/image/1.jpg',
    'assets/image/2.jpg',
    'assets/image/3.jpg',
    'assets/image/4.jpg',
    // 추가 이미지 경로들
  ];

  // 현재 이미지 인덱스
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    double screenHeight = ScreenSizeUtil.screenHeight(context);
    double screenWidth = ScreenSizeUtil.screenWidth(context);

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                flex: 50,
                child: Column(
                  children: [
                    ........
                    Text(
                      '${currentIndex + 1} / ${imagePaths.length}',
                      style: TextStyle(fontSize: 16),
                    ),
                  ],
                ),
              ),
              Spacer(),
              ElevatedButton(
                child: Text(
                  '카카오 간편 로그인 하기',
                  style: TextStyle(
                    .....
                  ),
                ),
                ,....
            ],
          ),
        ),
      ),
    );
  }
}

Expended에서 주의해야 할 점은 바로 이점이다.
적용할 영역에 컬럼을 하나 생성하고(필요에 따라 다른 위젯 사용 가능), 거기에만 적용되도록 하는 것이다.

즉, 부모 column영역에 expended를 적용하면 안 된다.(당연한 얘기지만, 이렇게 하면 간격을 띄우는 spacer가 안먹힌다.)

그림으로 정리해보면 다음과 같다.