소개
이번 블로그에서는 플러터와 expandable 패키지를 이용하여 사진 편집 앱을 개발하는 방법에 대해 알아보겠습니다. expandable 패키지는 플러터에서 위젯의 크기를 동적으로 확장 및 축소할 수 있도록 도와주는 매우 유용한 패키지입니다. 편집을 위한 다양한 기능을 제공하며, 간단하게 구현할 수 있어 많은 개발자들에게 인기가 있는 패키지입니다.
expandable 패키지 설치
플러터 프로젝트에 expandable 패키지를 설치하기 위해, pubspec.yaml 파일에 다음과 같이 패키지를 추가해 주세요:
dependencies:
expandable: ^5.0.1
그리고 터미널에서 아래 명령어를 실행하여 패키지를 가져옵니다:
flutter pub get
사진 편집 앱 개발하기
- 프로젝트에 expandable 패키지를 추가한 이후에는,
main.dart파일을 열고expandable패키지를 import 해주세요:import 'package:flutter/material.dart'; import 'package:expandable/expandable.dart'; - Scaffold 위젯 안에 사진 편집 화면을 구현하기 위한 레이아웃을 작성합니다. expandable 위젯을 사용하여 사진 편집 요소를 감싸주시면 됩니다. 예를 들어, 다음과 같이 이미지를 표시하고 확대/축소 기능을 구현할 수 있습니다: ```dart class PhotoEditorScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Photo Editor’), ), body: ExpandableNotifier( child: Expandable( collapsed: _buildThumbnail(context), expanded: _buildFullImage(context), ), ), ); }
Widget _buildThumbnail(BuildContext context) { return InkWell( onTap: () { ExpandableController.of(context).expanded = true; }, child: Container( child: Image.asset(‘assets/photo_thumbnail.jpg’), ), ); }
Widget _buildFullImage(BuildContext context) { return InkWell( onTap: () { ExpandableController.of(context).expanded = false; }, child: Container( child: Image.asset(‘assets/photo_full.jpg’), ), ); } }
3. 위에서 작성한 코드는 썸네일 이미지를 탭하면 전체 이미지로 확대되며, 다시 탭하면 썸네일 이미지로 축소되는 동작을 수행합니다. 본인의 앱에 맞게 편집 기능을 추가하거나 레이아웃을 변경할 수 있습니다.
4. 이제 위젯을 빌드하는 코드를 작성합니다. 메인 함수에서 `runApp()` 함수를 통해 `PhotoEditorScreen` 위젯을 실행하도록 코드를 작성합니다:
```dart
void main() {
runApp(MaterialApp(
home: PhotoEditorScreen(),
));
}
결론
플러터와 expandable 패키지를 이용하여 사진 편집 앱을 개발하는 방법에 대해 알아보았습니다. expandable 패키지를 활용하면 플러터 앱에서 동적으로 위젯 크기를 조절하는 것이 매우 간편해지며, 다양한 기능을 구현할 수 있습니다. 개발을 시작해보고 여러분만의 사진 편집 앱을 만들어보세요!