[flutter] Card 위젯을 이용한 게임 랭킹 앱 화면 구성하기

12 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 Card 위젯을 이용하여 게임 랭킹을 보여주는 화면을 구성하는 방법에 대해 알아보겠습니다.

게임 랭킹 앱 화면 디자인하기

게임 랭킹 앱은 보통 유저들이 순위를 볼 수 있는 화면이 필요합니다. 이 화면은 Card 위젯을 이용하여 각 유저의 랭킹을 보여줄 수 있습니다.

아래는 간단한 예시 코드로 게임 랭킹을 보여주는 화면을 구성하는 방법입니다.

import 'package:flutter/material.dart';

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

class GameRankingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('게임 랭킹'),
        ),
        body: ListView(
          children: [
            Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('유저 1'),
                subtitle: Text('랭킹: 1'),
              ),
            ),
            Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('유저 2'),
                subtitle: Text('랭킹: 2'),
              ),
            ),
            Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('유저 3'),
                subtitle: Text('랭킹: 3'),
              ),
            ),
            // 추가적인 유저 Card들을 원하는 만큼 추가할 수 있습니다
          ],
        ),
      ),
    );
  }
}

위 코드에서는 ListView와 Card 위젯을 이용하여 게임 랭킹을 보여주는 화면을 만들었습니다.

위 코드를 실행하면 앱의 화면 상단에 “게임 랭킹”이라는 제목이 달린 앱 바와 유저의 랭킹이 Card 형태로 나열되는 화면이 생성됩니다.

결론

Flutter의 Card 위젯을 이용하면 간편하게 각각의 아이템을 독립적으로 나타낼 수 있어 게임 랭킹과 같은 목록을 보여주는 화면을 구성할 수 있습니다. Card 위젯은 UI를 보기 좋게 만들어주고, 사용자가 터치할 수 있도록 제스처를 지원하여 인터랙티브한 화면을 만들 수 있도록 도와줍니다.

이렇듯, Flutter의 Card 위젯은 게임 랭킹 앱을 비롯한 다양한 목록을 보여주는 화면을 구성하는데 활용될 수 있습니다.