[flutter] 플러터 스택드 위젯에서 쇼핑 목록 앱 개발하는 방법

15 Dec 2023

flutter

플러터는 구글에서 제공하는 크로스 플랫폼 앱 개발 도구로, 다양한 디바이스에서 동일한 코드베이스를 사용하여 앱을 개발할 수 있습니다. 이번 글에서는 플러터의 스택드 위젯을 활용하여 간단한 쇼핑 목록 앱을 개발하는 방법에 대해 알아보겠습니다.

스택드 위젯이란?

스택드 위젯(Stacked Widget)은 여러 위젯을 겹쳐서 쌓을 수 있는 유용한 위젯입니다. 스택드 위젯은 화면을 여러 레이어로 구성할 수 있어, 복잡한 사용자 인터페이스를 만들 때 효과적으로 활용할 수 있습니다.

앱 개발하기

먼저, 플러터 프로젝트를 생성하고 pubspec.yaml 파일에 다음과 같이 http 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

다음으로, 쇼핑 목록을 표시할 페이지를 만들고 스택드 위젯을 활용하여 상품 이미지와 정보를 겹쳐서 표시할 수 있습니다.

import 'package:flutter/material.dart';

class ShoppingListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping List'),
      ),
      body: Stack(
        children: <Widget>[
          // 배경 이미지 또는 색상
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/background.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 상품 정보
          Positioned(
            top: 20.0,
            left: 20.0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image.asset('assets/product.jpg', width: 100, height: 100),
                SizedBox(height: 10),
                Text('Product Name', style: TextStyle(fontSize: 20)),
                Text('Price: \$10', style: TextStyle(fontSize: 16)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 배경 이미지와 상품 정보를 겹쳐서 표시하고 있습니다.

마치며

이렇게 플러터의 스택드 위젯을 활용하여 쇼핑 목록 앱의 기본적인 디자인을 구성할 수 있습니다. 위젯들을 조합하여 다양한 레이아웃을 구성할 수 있으니, 창의적으로 활용해보세요.