[flutter] Card 위젯을 이용한 상품 카탈로그 화면 구성하기

12 Dec 2023

flutter

상품 카탈로그 화면을 구성하는 것은 앱의 사용자 경험에 매우 중요합니다. 기본적으로 상품의 이미지, 제목, 설명 및 가격을 표시하는 것이 필요합니다. Flutter에서 이러한 UI를 구현하는 방법에 대해 알아봅시다.

1. ‘Card’ 위젯을 활용

‘Card’ 위젯은 정보를 표시하고 관련 작업을 제공하기 위한 컨테이너입니다. 각 상품을 포함하는 카탈로그 항목에 ‘Card’ 위젯을 사용하여 각각의 아이템을 표현할 수 있습니다.

import 'package:flutter/material.dart';

class ProductCatalogScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Catalog'),
      ),
      body: ListView(
        children: [
          Card(
            child: ListTile(
              leading: Image.asset('assets/product1.png'),
              title: Text('Product 1'),
              subtitle: Text('Description of Product 1'),
              trailing: Text('\$10.00'),
            ),
          ),
          Card(
            child: ListTile(
              leading: Image.asset('assets/product2.png'),
              title: Text('Product 2'),
              subtitle: Text('Description of Product 2'),
              trailing: Text('\$20.00'),
            ),
          ),
          // Add more Card widgets for other products
        ],
      ),
    );
  }
}

위 코드에서는 ListView의 자식으로 각 상품을 나타내는 Card 위젯을 사용하고 있습니다.

2. 이미지 및 상품 정보 표시

‘Card’ 위젯 내부에는 ‘ListTile’ 위젯을 사용하여 이미지, 제목, 설명 및 가격을 표시했습니다. ‘ListTile’ 위젯의 ‘leading’ 속성을 사용하여 상품 이미지를 설정하고, ‘title’ 및 ‘subtitle’을 사용하여 상품의 제목과 설명을 표시합니다.

3. 추가 기능

위 코드 예제에는 상품을 터치했을 때의 동작은 포함되어 있지 않습니다. 실제 애플리케이션에서는 각 상품을 선택했을 때의 동작을 추가할 수 있습니다.

이제 ‘Card’ 위젯을 사용하여 Flutter 앱에서 상품 카탈로그 화면을 구성하는 방법에 대해 알아보았습니다. 이러한 디자인을 활용하여 상품 카탈로그 화면을 더욱 다채롭고 사용자 친화적으로 구현할 수 있을 것입니다.