실전예제1 - Store 앱 만들기

Flutter

실전예제1 - Store 앱 만들기

hamiric 2024. 11. 11. 13:04

< store 앱 구성도 >

1. 위젯 구조화 해보기

구현화면 ( 디자인 명세 ) 를 보며, 레이아웃 및 필요한 위젯을 구조화 해보자!

Column
	// padding 값 all 25
    Row
        // 간격 균일
        Text
        Text
        Text
        Text
    // 나머지 화면 다 채우기, 이미지 사이 2dp 정도 띄워놓기
    Image
    Image

2. 구현하기

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
                  // Spacer(),
                  Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
                  // Spacer(),
                  Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
                  // Spacer(),
                  Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            ),
            Expanded(child: Image.asset("assets/images/bag.jpg", fit: BoxFit.cover)),
            SizedBox(height: 2),
            Expanded(child: Image.asset("assets/images/shoes.jpg", fit: BoxFit.cover)),
          ],
        ),
      ),
    );
  }
}

< Spacer vs Expended >

Spacer 위젯, Expended위젯 모두 남은 공간을 차지하거나, 위젯 사이에 간격을 만들어 주기 위해 사용되는 위젯이다.

두 위젯은 쓰임새는 비슷하지만, 하위 위젯의 존재유무에 대한 큰 차이점이 존재한다.

Spacer

단순히 위젯 사이에 간격을 만들어 주기 위해 사용되는 위젯

flex 속성으로 간격의 비율을 조정할 수 있으며, 하위 위젯이 존재하지 않기 때문에 해당 위젯은 렌더링 되지 않는다.

Expended

남은 공간을 차지하여 생성되는 위젯으로, 하위 위젯이 해당 공간을 최대한 활용할 수 있도록 확장시킨다.

< MainAxisAlignment 방식 vs Spacer 방식 >

두 방식은, 일단 위의 실전예제에서 구현해 보았을때, 화면 구성이 비슷해 보였다.

다만, 찾아본 결과, 두 방식에 대한 차이점이 존재했고, 이에 더 좋은 선택을 하는데 도움이 되고자 서술한다.

결론부터 말하자면, 간단하게 (자식위젯이 없는) 배치하고자 할 때는, Alignment 방식이 유용하나, 보다 복잡한 레이아웃을 짜게 될 경우에는 Spacer 방식이 더 좋은 선택이라고 할 수 있다.

MainAxisAlignment.spaceBetween

해당 방식은 양쪽 끝에 첫 위젯과 끝 위젯을 미리 배치해 둔 다음, 간격을 연산하여 균등하게 간격을 설정하는 작동방식을 가지고 있다. 코드 간결성에 있어서는 단연 장점이라고 할 수 있다. 다만, 아무래도 플러터 내에서 자동적으로 연산되어 사용되는 방식이다 보니, 자식 위젯이 있을 경우 전체적인 균형이 이상해질 수 있는 위험요소가 존재한다.

Spacer

반면, Spacer 방식은 코드 간결성에 있어서는, 계속해서 Spacer를 사용해야 하기 때문에 코드가 길어질 수 는 있지만, 보다 고른 레이아웃을 설정하는데 보다 좋은 방식이라고 할 수 있다.

< Flutter DevTools 사용하기 >

DevTools란, 개발자가 앱의 UI 레이아웃을 검사 및 모니터링 할 수 있는 개발 도구라고 할 수 있다.

>> DevTools 화면 여는 방법

또는

< 사용 화면 >

좌 상단의 버튼을 누른 후, 위젯을 클릭하면, 실제 에뮬레이터에서 해당 위젯이 차지하는 공간을 직접 확인 할 수 있다!!