플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱을 손쉽게 개발할 수 있도록 도와줍니다. 이번 블로그에서는 플러터 앱에서 sticky 헤더를 사용한 사진 필터 앱 디자인하는 방법에 대해 알아보겠습니다.
Table of Contents
소개
사진 필터 앱은 사용자가 사진을 선택하고 원하는 필터를 적용할 수 있는 기능을 제공하는 앱입니다. 일반적으로 앱의 상단에는 사진 라이브러리에서 사진을 선택할 수 있는 버튼과 현재 선택한 사진을 미리 볼 수 있는 공간을 제공합니다. 그리고 하단에는 다양한 필터 옵션을 제공하여 사용자가 선택한 필터를 사진에 적용할 수 있도록 합니다.
프로젝트 설정
먼저, Flutter 프로젝트를 생성합니다. 이를 위해 Flutter SDK를 설치하고, IDE에 플러그인을 설치합니다. 그리고 다음 명령어로 새로운 Flutter 프로젝트를 생성합니다.
flutter create photo_filter_app
프로젝트가 생성되면 main.dart 파일을 열고 필요한 패키지를 임포트합니다. 사진 필터 앱을 디자인하기 위해 다음 패키지를 사용합니다.
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
사진 필터 앱 디자인
Sticky 헤더 추가하기
사진 필터 앱에서는 상단에 sticky 헤더를 추가하여 기능을 제공합니다. 이 헤더는 사용자가 사진을 선택하고 필터를 적용할 수 있는 기능을 포함합니다.
다음은 헤더를 추가하는 코드입니다.
class FilterHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 80,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.photo_library),
onPressed: () {
// 사진 라이브러리에서 사진을 선택하는 기능 구현
},
),
Text(
'사진 필터 앱',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
IconButton(
icon: Icon(Icons.check),
onPressed: () {
// 선택한 필터를 적용하는 기능 구현
},
),
],
),
),
);
}
}
사진 선택 기능 추가하기
사용자가 헤더에 있는 사진 라이브러리 버튼을 클릭하면, 사진을 선택할 수 있는 기능을 구현해야 합니다. 이를 위해 다음 코드를 추가합니다.
class MyApp extends StatelessWidget {
final ImagePicker _picker = ImagePicker();
Future<void> _selectPhoto() async {
final image = await _picker.getImage(source: ImageSource.gallery);
// 선택한 사진을 처리하는 로직 구현
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('플러터 앱'),
),
body: Column(
children: [
FilterHeader(),
// 사진 선택 버튼 추가
ElevatedButton(
child: Text('사진 선택'),
onPressed: _selectPhoto,
),
],
),
);
}
}
필터 옵션 추가하기
하단에는 다양한 필터 옵션을 추가하여 사용자가 선택한 필터를 적용할 수 있도록 합니다. 다음은 필터 옵션을 추가하는 코드입니다.
class MyApp extends StatelessWidget {
final ImagePicker _picker = ImagePicker();
Future<void> _selectPhoto() async {
final image = await _picker.getImage(source: ImageSource.gallery);
// 선택한 사진을 처리하는 로직 구현
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('플러터 앱'),
),
body: Column(
children: [
FilterHeader(),
// 필터 옵션 추가
ListTile(
leading: Icon(Icons.adjust),
title: Text('밝기 조절'),
onTap: () {
// 밝기 조절 필터를 적용하는 로직 구현
},
),
ListTile(
leading: Icon(Icons.color_lens),
title: Text('컬러 필터'),
onTap: () {
// 컬러 필터를 적용하는 로직 구현
},
),
// 이하 필터 옵션 추가
],
),
);
}
}
결론
위의 예시 코드를 참고하여 플러터 앱에서 sticky 헤더를 사용한 사진 필터 앱을 디자인할 수 있습니다. 플러터의 다양한 기능과 위젯들을 활용하여 사용자에게 편리한 UI를 제공할 수 있습니다. 이러한 방법을 응용하여 원하는 디자인을 구현해보세요!