[flutter] 스택드 위젯을 사용하여 은행 앱 화면 구성하기

15 Dec 2023

flutter

은행 앱 화면을 구성할 때 주로 사용되는 디자인 패턴 중 하나는 여러 개의 위젯을 겹쳐서 화면을 구성하는 것입니다. Flutter에서는 이를 위해 스택드(Stacked) 위젯을 사용합니다.

이 블로그 포스트에서는 Flutter의 스택(Stack)과 스택드(Stacked) 위젯을 사용하여 은행 앱의 화면을 구성하는 방법에 대해 알아보겠습니다. 구체적으로는 잔액, 거래 내역, 이체 버튼으로 이루어진 화면을 만들어 보겠습니다.

1. Flutter의 스택드(Stacked) 위젯

스택드(Stacked) 위젯은 여러 개의 위젯을 겹쳐서 화면을 구성하는 데 사용되는 위젯입니다. 이를 사용하여 여러 위젯을 겹쳐서 하나의 화면을 만들 수 있습니다.

2. 은행 앱의 화면 구성하기

은행 앱의 화면은 크게 3가지로 나눌 수 있습니다.

잔액 : 현재 계좌의 잔액을 표시하는 부분
거래 내역 : 최근 거래 내역을 시간순으로 표시하는 부분
이체 버튼 : 계좌 간 이체를 할 수 있는 버튼

이러한 구성을 위해 스택(Stack)과 스택드(Stacked) 위젯을 사용합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyBankApp());

class MyBankApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My Bank')),
        body: Stack(
          children: [
            // 잔액 표시 위젯
            Positioned(
              top: 20,
              left: 20,
              child: Text('Balance: \$1000'),
            ),
            // 거래 내역 표시 위젯
            Positioned(
              top: 100,
              left: 20,
              child: Container(
                width: 200,
                height: 300,
                color: Colors.grey,
                child: Text('Transaction history'),
              ),
            ),
            // 이체 버튼
            Positioned(
              bottom: 20,
              right: 20,
              child: ElevatedButton(
                onPressed: () {
                  // 이체 로직
                },
                child: Text('Transfer'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 다음과 같은 화면을 구성합니다.

상단 왼쪽에는 잔액이 표시되고
중앙 왼쪽에는 거래 내역이 표시되며
하단 오른쪽에는 이체 버튼이 위치합니다.

이제 본격적으로 이러한 은행 앱을 더 디테일하게 만들어볼 수 있습니다.

3. 더 많은 기능 추가하기

위의 예제에서는 단순하게 잔액과 거래 내역을 표시하고 이체 버튼을 만들었습니다. 실제 은행 앱에서는 로그인 기능, 계좌 선택 기능, 그래프 표시 등 다양한 기능을 추가해야 합니다.

스택드(Stacked) 위젯은 다양한 위젯을 겹쳐서 화면을 구성하는 데 유용하며, 이를 통해 다양한 기능을 가진 은행 앱을 만들 수 있습니다.

우리는 이러한 패턴을 적절히 활용하여 보다 다양하고 효과적인 은행 앱을 제작할 수 있습니다.

마치며

Flutter의 스택(Stack)과 스택드(Stacked) 위젯을 사용하면 여러 위젯을 겹쳐서 화면을 구성하는 것이 가능해집니다. 은행 앱을 예시로 들어 다양한 기능이 필요한 앱을 만들 때 유용하게 사용될 수 있습니다.

이러한 기능을 활용하여 다양한 앱을 만드는 경험을 통해 Flutter의 다양한 기능과 효율성에 대해 더 많이 이해할 수 있습니다.