[flutter] 플러터(expandable)를 이용한 게임 개발 방법

04 Dec 2023

flutter

도입

플러터는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. 이 프레임워크를 사용하여 게임을 개발하는 것도 가능합니다. 이번에는 플러터의 Expandable 위젯을 사용하여 게임을 개발하는 방법에 대해 알아보겠습니다.

Expandable 위젯 이란?

Expandable 위젯은 플러터의 Material Design 패턴에 따라 개발된 위젯으로, 사용자가 탭하면 내용이 확장되거나 축소되는 동작을 할 수 있습니다. 이를 활용하여 게임의 팝업 창이나 스테이지 선택 화면 등을 개발할 수 있습니다.

게임 개발 예시

가정하에 화면 상단에 타이틀이 표시되고, 하단에는 게임을 선택할 수 있는 목록이 있다고 가정합니다. 기본적으로 타이틀은 항상 표시되며, 사용자가 게임을 선택하면 해당 게임의 설명이 확장되어 보여지도록 할 것입니다.

아래는 게임 개발에 필요한 기본 코드입니다.

import 'package:flutter/material.dart';

class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Game Development'),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: [
            Text(
              '게임 목록',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20.0),
            ExpandablePanel(
              header: Text(
                '게임 1',
                style: TextStyle(fontSize: 18.0),
              ),
              expanded: Text(
                '게임 1 설명',
                style: TextStyle(fontSize: 16.0),
              ),
            ),
            SizedBox(height: 10.0),
            ExpandablePanel(
              header: Text(
                '게임 2',
                style: TextStyle(fontSize: 18.0),
              ),
              expanded: Text(
                '게임 2 설명',
                style: TextStyle(fontSize: 16.0),
              ),
            ),
            SizedBox(height: 10.0),
            ExpandablePanel(
              header: Text(
                '게임 3',
                style: TextStyle(fontSize: 18.0),
              ),
              expanded: Text(
                '게임 3 설명',
                style: TextStyle(fontSize: 16.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ExpandablePanel extends StatefulWidget {
  final Widget header;
  final Widget expanded;

  ExpandablePanel({required this.header, required this.expanded});

  @override
  _ExpandablePanelState createState() => _ExpandablePanelState();
}

class _ExpandablePanelState extends State<ExpandablePanel> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          title: widget.header,
          trailing: Icon(
            isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
          ),
        ),
        isExpanded ? widget.expanded : SizedBox.shrink(),
      ],
    );
  }
}

위 코드에서는 ExpandablePanel 위젯을 정의하고, 위젯 내에서 ListTile을 사용하여 확장/축소 동작을 구현하였습니다. 게임 목록은 Column 위젯 내에서 ExpandablePanel을 추가하여 표시됩니다.

각 ExpandablePanel은 header와 expanded 속성을 가지며, 탭 시 확장되는 내용은 expanded에 정의됩니다. 사용자의 탭에 따라 isExpanded 상태가 변경되어 확장/축소 동작을 수행합니다.

결론

위 예제를 통해 플러터의 Expandable 위젯을 사용하여 게임 개발 방법을 알아보았습니다. Expandable 위젯은 사용자 인터랙션과 함께 화면을 동적으로 조정할 수 있는 유용한 도구로써, 게임에 다양한 기능을 추가하는 데 활용할 수 있습니다.

참고 자료: