[flutter] 스택드 위젯을 사용하여 타이머 앱 화면 구성하기

15 Dec 2023

flutter

이번에는 Flutter를 사용하여 간단한 타이머 앱의 화면을 구성하는 방법을 알아보겠습니다.

1. 화면의 기본 레이아웃 설정

가장 먼저, 타이머의 숫자와 버튼을 표시할 화면의 기본적인 레이아웃을 설정합니다. 여기서는 Stack 위젯을 사용하여 숫자와 버튼을 겹쳐서 배치하겠습니다.

Stack(
  alignment: Alignment.center,
  children: [
    // 여기에 시간을 표시하는 위젯을 추가합니다
    // 여기에 버튼을 표시하는 위젯을 추가합니다
  ],
)

2. 숫자 표시 위젯 추가하기

타이머에 남은 시간을 표시할 숫자 위젯을 추가합니다. 이때, Text 위젯을 사용하여 숫자를 표시하고, TextStyle을 통해 글꼴과 크기를 설정할 수 있습니다.

Positioned(
  top: 50.0,
  child: Text(
    '00:00',
    style: TextStyle(
      fontSize: 80.0,
      fontWeight: FontWeight.bold,
    ),
  ),
),

3. 버튼 표시 위젯 추가하기

시작, 일시정지, 초기화 기능을 가진 버튼을 추가합니다. RaisedButton 위젯을 사용하여 버튼을 생성하고 클릭 이벤트를 처리합니다.

Positioned(
  bottom: 50.0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      RaisedButton(
        onPressed: () {
          // 시작 기능을 수행하는 코드를 추가합니다
        },
        child: Text('Start'),
      ),
      RaisedButton(
        onPressed: () {
          // 일시정지 기능을 수행하는 코드를 추가합니다
        },
        child: Text('Pause'),
      ),
      RaisedButton(
        onPressed: () {
          // 초기화 기능을 수행하는 코드를 추가합니다
        },
        child: Text('Reset'),
      ),
    ],
  ),
),

이렇게 하여 타이머 앱의 화면을 구성할 수 있습니다. Stack 위젯을 사용하여 여러 개의 위젯을 겹쳐서 화면을 구성하는 방법과 Positioned 위젯을 사용하여 각 위젯의 위치를 지정하는 방법을 학습했습니다.

더 다양한 기능을 추가하고 싶다면, Flutter 공식 문서에서 더 많은 정보를 찾을 수 있습니다.