[flutter] 스택드 위젯을 사용하여 운동 트래커 앱 화면 만들기

15 Dec 2023

flutter

운동 트래킹 앱은 사용자가 운동을 기록하고 모니터링할 수 있는 기능을 제공합니다. Flutter의 Stack 위젯은 다양한 위젯을 깔끔하게 겹쳐 표시할 수 있어서 운동 트래커 앱의 다양한 화면을 구성하는 데 아주 유용합니다.

1. 기본 구조 설정

먼저, Stack 위젯을 사용하여 화면을 구성하기 전에 Scaffold 위젯을 이용하여 기본 구조를 설정합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('운동 트래커'),
        ),
        body: ExerciseTracker(),
      ),
    );
  }
}

2. Stack 위젯을 이용한 레이아웃 구성

다음으로, Stack 위젯을 사용하여 운동 트래커 앱의 화면을 구성합니다. 다음은 Stack 위젯을 이용한 예시 코드입니다.

class ExerciseTracker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // 배경 이미지
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/background.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        // 운동 기록 카드
        Positioned(
          top: 20.0,
          left: 20.0,
          child: Card(
            // 운동 기록 내용
          ),
        ),
        // 운동 시작 버튼
        Align(
          alignment: Alignment.bottomCenter,
          child: ElevatedButton(
            onPressed: () {
              // 운동 시작 동작
            },
            child: Text('운동 시작'),
          ),
        ),
      ],
    );
  }
}

위 코드에서 운동 트래킹 앱의 화면을 Stack 위젯을 사용하여 구성하였습니다. 배경 이미지를 꾸미고, 운동 기록 카드와 운동 시작 버튼을 겹쳐서 표시하였습니다.

Stack 위젯을 이용하여 운동 트래커 앱의 화면을 구성하는 예시입니다.

이제 이러한 방법으로 Stack 위젯을 활용하여 운동 트래커 앱의 다양한 화면을 만들어 갈 수 있습니다.

더 나아가기

Stack 위젯 외에도 Column, Row, Flex 등의 다양한 레이아웃 위젯을 조합하여 더 다채로운 화면을 만들어볼 수 있습니다.

Flutter 공식 문서나 다양한 커뮤니티에서 제공하는 자료들을 참고하여 더욱 다양하고 예쁜 운동 트래킹 앱 화면을 만들어보세요.