[flutter] Card 위젯을 이용한 실시간 경매 앱 화면 구성하기

12 Dec 2023

flutter

실시간 경매를 보여주는 앱을 개발하려고 합니다. 사용자에게 경매 상품 이미지, 가격, 남은 시간 등의 정보를 제공하기 위해 Flutter의 Card 위젯을 사용하려고 합니다.

1. Card 위젯

Card 위젯은 재료 디자인 스타일의 그림자가 있는 표면을 표현하는 데 사용됩니다. 일반적으로 정보를 표시하거나 상호 작용할 수 있는 UI를 만들 때 많이 사용됩니다.

다음과 같이 Card 위젯을 사용하여 실시간 경매 상품을 나타내는 Card UI를 만들 수 있습니다.

Card(
  child: Column(
    children: <Widget>[
      Image.network('https://example.com/product-image.jpg'),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          '상품명 및 설명',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('현재 경매가: \$100'),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('남은 시간: 2시간 30분'),
      ),
    ],
  ),
);

2. 사용자 경험 향상을 위한 추가 기능

경매 앱의 사용자 경험을 향상시키기 위해, Card 위젯 내부에 사용자가 빠르게 상호 작용할 수 있도록 GestureDetector를 추가할 수 있습니다. 또한, 실시간 경매 정보를 반영하기 위해 상태 관리를 위한 StreamBuilder를 이용하여 경매 상품 정보를 업데이트할 수 있습니다.

Card(
  child: GestureDetector(
    onTap: () {
      // 상품 상세 화면으로 이동하는 코드 추가
    },
    child: Column(
      children: <Widget>[
        Image.network('https://example.com/product-image.jpg'),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            '상품명 및 설명',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('현재 경매가: \$100'),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: StreamBuilder(
            stream: auctionTimerStream,
            initialData: '남은 시간: 계산 중...',
            builder: (context, snapshot) {
              return Text(snapshot.data);
            },
          ),
        ),
      ],
    ),
  ),
);

마치며

Flutter의 Card 위젯을 사용하여 실시간 경매 앱의 UI를 구성하는 방법에 대해 알아보았습니다. Card 위젯을 활용하면 간편하면서도 멋진 모양의 UI를 만들 수 있으며, 추가 기능을 추가하여 사용자 경험을 향상시킬 수 있습니다.