[flutter] 스택드 위젯을 사용하여 사진 편집 앱 구성하기

15 Dec 2023

flutter

이번에는 flutter의 스택드(stacked) 위젯을 사용하여 사진 편집 애플리케이션을 만들어보겠습니다. 스택드 위젯은 다른 위젯을 겹쳐서 표시할 때 유용합니다.

스택드 위젯

스택드 위젯은 여러 위젯을 겹쳐서 표시할 수 있도록 도와주는 위젯입니다. 가장 위에 있는 위젯이 화면에서 가장 앞에 표시되며, z 축을 이용하여 위치를 지정할 수 있습니다.

사진 편집 앱 구성

이제 스택드 위젯을 사용하여 간단한 사진 편집 앱을 만들어보겠습니다.

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>[
            Image.asset('assets/background.jpg'),
            Positioned(
              top: 100,
              left: 50,
              child: Text('텍스트 편집'),
            ),
            Positioned(
              bottom: 50,
              right: 20,
              child: ElevatedButton(
                onPressed: () {
                  // 버튼 동작 추가
                },
                child: Text('저장'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드에서는 스택드 위젯을 사용하여 배경 이미지 위에 텍스트와 버튼을 겹쳐서 표시하고 있습니다.

결론

flutter의 스택드 위젯을 사용하면 여러 위젯을 겹쳐서 화면에 표시할 수 있습니다. 이를 활용하여 사진 편집 앱 등 다양한 애플리케이션을 만들 수 있습니다.

내용에 대한 자세한 내용은 공식 문서를 참고해 주세요.