[flutter] 스택드 위젯을 사용하여 소비 카테고리 통계 앱 만들기

15 Dec 2023

flutter

스택드 위젯은 플러터(Flutter)의 중요한 레이아웃 위젯 중 하나입니다. 스택드 위젯은 여러 위젯을 겹쳐서 표시할 때 유용하며, 위치, 크기 및 순서를 조절할 수 있습니다.

이 블로그 포스트에서는 플러터를 사용하여 소비 카테고리 통계 앱의 UI를 구성하는 데 스택드 위젯을 어떻게 활용하는지 알아보겠습니다.

스택드 위젯 소개

스택드 위젯은 여러 위젯을 겹쳐서 표시할 때 사용되며, 기본적으로 겹쳐진 순서대로 화면에 표시됩니다. 스택드 위젯의 자식 위젯들은 Positioned 위젯을 통해 위치를 지정할 수 있습니다.

카테고리 통계 앱 UI 구성

카테고리 통계 앱의 UI를 구성하기 위해 스택드 위젯을 사용하여 다음과 같은 구성 요소를 만들어 볼 수 있습니다.

배경 이미지

앱의 배경으로 사용할 이미지 위젯을 스택의 맨 아래에 위치시킵니다.

통계 데이터

카테고리별 지출 통계를 나타내는 차트나 그래프를 스택에 추가하여 화면에 표시합니다.

카테고리 선택

사용자가 카테고리를 선택할 수 있는 드롭다운 버튼이나 세그먼트 컨트롤을 스택에 추가하여 화면에 표시합니다.

기타 UI 요소

기타 UI 요소들을 스택에 추가하여 화면에 표시합니다. 예를 들어, 제목, 버튼, 아이콘 등이 될 수 있습니다.

코드 예시

다음은 스택드 위젯을 사용하여 간단한 카테고리 통계 앱의 UI를 구성하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 배경 이미지
            Positioned.fill(
              child: Image.network(
                'https://example.com/background_image.jpg',
                fit: BoxFit.cover,
              ),
            ),
            // 통계 데이터
            Positioned(
              top: 20,
              left: 20,
              child: Container(
                width: 200,
                height: 200,
                child: // 통계 차트 or 그래프
              ),
            ),
            // 카테고리 선택
            Positioned(
              bottom: 20,
              left: 20,
              child: DropdownButton<String>(
                // 카테고리 항목들
                items: // ...
                onChanged: // ...
              ),
            ),
            // 기타 UI 요소
            // ...
          ],
        ),
      ),
    );
  }
}

마치며

위 예시 코드와 설명을 참고하여 플러터의 스택드 위젯을 활용하여 소비 카테고리 통계 앱의 UI를 구성해 보세요. 스택드 위젯을 잘 활용하면 다채로운 UI를 구성할 수 있습니다.