[flutter] 스택드 위젯을 사용하여 영단어 학습 앱 구성하기

15 Dec 2023

flutter

이번 포스트에서는 Flutter의 스택(Stack) 위젯을 사용하여 간단한 영단어 학습 앱을 만드는 방법에 대해 알아보겠습니다.

스택(Stack) 위젯이란?

스택(Stack) 위젯은 다양한 위젯들을 쌓아놓고 겹쳐서 화면에 표시할 수 있는 위젯입니다. 스택 위젯은 가장 위에 쌓인 위젯이 화면에서 가장 앞에 보이게 됩니다.

이를 이용해 우리는 영어 단어와 해당 단어의 뜻을 겹쳐서 나타내고, 사용자가 터치하여 뜻을 확인할 수 있는 영단어 학습 앱을 만들어볼 것입니다.

필요한 패키지 설치하기

먼저, 앱에서 사용할 플러터 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 flipping_card 패키지를 추가합니다.

dependencies:
  flipping_card: ^0.1.1

그리고 다음 명령어를 사용하여 패키지를 설치합니다.

flutter pub get

스택(StacK) 위젯을 이용한 영단어 학습 앱 구현하기

스택 스택(Stack) 위젯을 사용하여 영단어 학습 앱을 만들어봅시다.

import 'package:flutter/material.dart';
import 'package:flipping_card/flipping_card.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('영단어 학습 앱'),
        ),
        body: Center(
          child: FlippingCard(
            frontWidget: Container(
              width: 300,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text('apple', style: TextStyle(fontSize: 24, color: Colors.white)),
              ),
            ),
            backWidget: Container(
              width: 300,
              height: 200,
              color: Colors.green,
              child: Center(
                child: Text('사과', style: TextStyle(fontSize: 24, color: Colors.white)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 가로로 중앙 정렬된 카드 한 장을 만드는 예시입니다. 앱을 실행하면 ‘apple’이라는 영어 단어가 보이다가 사용자가 터치하면 ‘사과’로 뒤집힙니다.

이렇게 간단한 가장 기본적인 형태의 스택 위젯을 활용하여 영단어 학습 앱을 만들어보았습니다. 다양한 디자인과 기능을 추가하여 더욱 풍부한 앱을 만들어보세요!