Clock_App / 타임 라벨 컴포넌트화 시키

일단 가장 먼저 타이머 화면을 만들기로 했다.

그 타이머 화면에서도 첫 번째로 만들어야 할 것을 뽑아 보자면 제일 만만하고 위치 상으로도 첫 번째인 시간, 분, 초 텍스특가 되겠다.

만들어주기 위해서 피그마에서 만들었던 것처럼 먼저 큰 틀을 잡고 그 안에 삽입해 주는 형식으로 해주었다.

@override
Widget build(BuildContext context) {
  return BaseScaffold(
    appBar: BaseAppBar(
      onTap: () {},
    ),
    body: , // TODO
  );
}

현재 내 Timer 스크린의 코드는 위와 같은데 여기서 스택으로 바디를 먹여주고 그 스택 안에서 박스를 배치해 주겠다.

@override
Widget build(BuildContext context) {
  final width = ScreenSize.width(context);
  return BaseScaffold(
    appBar: BaseAppBar(
      onTap: () {},
    ),
    body: Stack(
      alignment: Alignment.center,
      children: [
        Positioned(
          top: 24,
          child: SizedBox(
            width: width,
            height: width * 0.8,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Positioned(
                  top: 16,
                  child: , // TODO
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

이제 TODO 부분에 시간, 분, 초를 만들어서 배치해 주면 된다.

근데 여기서 가장 간단한 방법은 바로 Row로 감싼 후 텍스트로 각각을 박아 넣는 것이지만, 내가 지금 이 프로젝트에서 중요시하고 공부하고자 하는 것이 무엇인가? 바로 구조화다. 그러므로 바로 컴포넌트 분리해서 재활용하여 사용하는 방식으로 사용해 주겠다.

무엇을 컴포넌트로 분리할 것이냐? 하면 지금 현재 시간, 분, 초 이 세 가지는 모두 똑같은 크기, 똑같은 색상을 가지고 있다. 즉, 텍스트 자체를 컴포넌트화 시킨 후 그것을 불러오면 아주 깔끔하게 분리할 수 있다는 것이다.

클래스 이름은 TimeUnitLabel으로 해주었다.

import 'package:clock_app/constant/color.dart';
import 'package:flutter/material.dart';

class TimeUnitLabel extends StatelessWidget {
  final String label;
  const TimeUnitLabel({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 32,
      height: 22,
      child: Center(
        child: Text(
          label,
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: kGray,
          ),
        ),
      ),
    );
  }
}

현재 텍스트를 SizedBoxSizedBox로 감쌌는데 그 이유는 텍스트로 만들면 시간, 분, 초 이 세가지 텍스트의 크기가 다 달라지기 때문에 Row로 감쌌을 때 위치에 차이가 생길 수 있어서 SizedBox로 크기를 정형화 시키게 만들어 준 것

그리고 이제 이 위젯들을 감싸줄 Row도 한번 더 컴포넌트화 시켜서 Timer화면에서 한 번에 호출할 수 있도록 만들어주겠다.

이름은 TimeUnitLabelRow로 해주었다.

import 'package:clock_app/screens/components/4_timer/time_unit_label.dart';
import 'package:clock_app/utils/screen_size.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: ScreenSize.width(context),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Spacer(flex: 3,),
          TimeUnitLabel(label: '시간'),
          Spacer(flex: 4,),
          TimeUnitLabel(label: '분'),
          Spacer(flex: 4,),
          TimeUnitLabel(label: '초'),
          Spacer(flex: 3,),
        ],
      ),
    );
  }
}

 

이제 화면에서는 아까 TODO를 붙여놨던 곳에 만들어놓은 클래스를 삽입하면 끝이 난다.

Positioned(
  top: 16,
  child: TimeUnitLabelRow(),
),