[flutter] 스택드 위젯을 사용하여 출석체크 앱 구성하기

15 Dec 2023

flutter

스태드(Stacked) 위젯은 Flutter에서 여러 위젯을 겹쳐서 표시하는 기능을 제공합니다. 이를 이용하면 앱 화면을 구성할 때 여러 위젯을 겹쳐서 표시함으로써 다양한 디자인을 구현할 수 있습니다. 출석체크 앱을 만들기 위해 스택드 위젯을 활용하여 실시간 데이터 입력 폼과 앱 로고를 겹쳐서 화면을 구성하는 예제를 살펴보겠습니다.

스택드 위젯 구성

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('출석체크 앱'),
        ),
        body: Stack(
          children: <Widget>[
            // 배경 이미지 또는 컨테이너
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/background.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 실시간 데이터 입력 폼
            Positioned(
              top: 100,
              child: Container(
                width: 200,
                height: 100,
                color: Colors.white,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: '이름을 입력하세요',
                  ),
                ),
              ),
            ),
            // 앱 로고
            Positioned(
              bottom: 50,
              left: 50,
              child: Image.asset('assets/logo.png'),
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 Stack 위젯을 사용하여 배경 이미지, 실시간 데이터 입력 폼, 앱 로고를 겹쳐서 화면을 구성하였습니다. Positioned 위젯을 사용하여 각 위젯의 위치를 지정하고, 크기를 조절할 수 있습니다.

이렇게 스택드 위젯을 활용하여 출석체크 앱의 화면을 구성하면 사용자가 쉽게 입력 폼을 찾을 수 있고, 동시에 앱의 브랜딩을 강화할 수 있습니다.

출처: Flutter - Stacked Class