[flutter] 플러터 스택드 위젯에서 캐시백 앱 개발하는 방법

15 Dec 2023

flutter

플러터를 사용하여 간편하게 애플리케이션을 개발하고자 합니다. 여기에서는 스택드 위젯을 사용하여 캐시백 앱을 개발하는 방법에 대해 다루겠습니다.

캐시백 앱 디자인

우리는 캐시백 앱의 메인 화면을 개발해보려고 합니다. 이 앱은 상단에는 사용자 정보 및 적립된 캐시백을 보여주고, 중앙에는 가게 목록 및 상품 정보를 제공하며, 하단에는 메뉴 및 앱의 기능을 제공합니다.

플러터에서 스택드 위젯 사용하기

아래는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyCashbackApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 100,
                color: Colors.blue,
                child: Text('사용자 정보 & 캐시백'),
              ),
            ),
            Positioned(
              top: 100,
              left: 0,
              right: 0,
              bottom: 50,
              child: Container(
                color: Colors.green,
                child: Text('가게 목록 & 상품 정보'),
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                height: 50,
                color: Colors.grey,
                child: Text('앱 메뉴'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

결론

스택드 위젯을 사용하면 쉽게 복잡한 레이아웃을 구현할 수 있습니다. 플러터에서는 이를 활용하여 다양한 애플리케이션을 개발할 수 있습니다.

이렇듯, 스택드 위젯은 플러터에서 효율적인 유저 인터페이스 개발을 위한 강력한 도구로 활용될 수 있습니다.

목차

Staked Widget이란?

캐시백 앱 디자인

플러터에서 스택드 위젯 사용하기

결론