[flutter] 플러터(expandable)을 이용한 쇼핑 및 전자상거래 앱 개발 방법

04 Dec 2023

flutter

소개

플러터는 구글이 개발한 사용자 인터페이스(UI)를 빠르게 개발할 수 있도록 도와주는 오픈 소스 프레임워크입니다. 이번 블로그 포스트에서는 플러터의 확장 가능한(expandable) 기능을 활용하여 쇼핑 및 전자상거래 앱을 개발하는 방법에 대해 알아보도록 하겠습니다.

필요한 도구

Flutter SDK: 플러터 앱 개발을 위한 SDK
코드 편집기: Visual Studio Code, Android Studio 또는 IntelliJ를 사용할 수 있습니다.
에뮬레이터 또는 기기: 개발 중인 앱을 실행하기 위한 에뮬레이터나 실제 기기

앱 개발 단계

1. 프로젝트 초기화

플러터 SDK를 설치하고, 프로젝트를 생성합니다.

flutter create shopping_app

2. 화면 디자인

lib 폴더 내에 있는 main.dart 파일을 열고 앱의 화면 디자인을 구성합니다. 필요한 위젯들을 추가하고 화면 레이아웃을 구성합니다.

import 'package:flutter/material.dart';

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

class ShoppingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Shopping App"),
        ),
        body: Center(
          child: Text("Welcome to Shopping App"),
        ),
      ),
    );
  }
}

3. 제품 목록 추가

상단 앱 바에 카테고리 및 검색 기능을 추가하고, 제품 목록을 화면에 표시합니다. 이때 확장 가능한(expandable) 위젯을 사용하여 사용자가 필요한 정보를 더 자세히 볼 수 있도록 합니다.

import 'package:flutter/material.dart';

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

class ShoppingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Shopping App"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // 검색 기능 추가
              },
            ),
          ],
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: Container(
              // 카테고리 추가
            ),
          ),
        ),
        body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ExpansionTile(
              title: Text(products[index].name),
              children: <Widget>[
                ListTile(
                  title: Text("Price: \$${products[index].price}"),
                  subtitle: Text("Description: ${products[index].description}"),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

class Product {
  String name;
  double price;
  String description;

  Product({this.name, this.price, this.description});
}

List<Product> products = [
  Product(
    name: "Product 1",
    price: 19.99,
    description: "This is product 1",
  ),
  Product(
    name: "Product 2",
    price: 29.99,
    description: "This is product 2",
  ),
  // 제품 목록 추가
];

4. 상세 정보 표시

제품 목록에서 특정 제품을 터치하면 해당 제품의 상세 정보가 확장되어 표시되도록 합니다. 확장 가능한(expandable) 위젯을 사용하여 적절한 UI를 만들어줍니다.

import 'package:flutter/material.dart';

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

class ShoppingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Shopping App"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // 검색 기능 추가
              },
            ),
          ],
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: Container(
              // 카테고리 추가
            ),
          ),
        ),
        body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ExpansionTile(
              title: Text(products[index].name),
              children: <Widget>[
                ListTile(
                  title: Text("Price: \$${products[index].price}"),
                  subtitle: Text("Description: ${products[index].description}"),
                ),
                // 상세 정보 표시 추가
              ],
            );
          },
        ),
      ),
    );
  }
}

class Product {
  String name;
  double price;
  String description;

  Product({this.name, this.price, this.description});
}

List<Product> products = [
  Product(
    name: "Product 1",
    price: 19.99,
    description: "This is product 1",
  ),
  Product(
    name: "Product 2",
    price: 29.99,
    description: "This is product 2",
  ),
  // 제품 목록 추가
];

결론

이제 플러터의 확장 가능한(expandable) 위젯을 활용하여 쇼핑 및 전자상거래 앱을 개발하는 방법에 대해 알아보았습니다. 플러터를 사용하면 간단하고 직관적인 UI를 빠르게 개발할 수 있으며, 확장 가능한(expandable) 위젯을 활용하여 사용자에게 더 나은 경험을 제공할 수 있습니다.

소개