[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 해상도로 이미지를 편집하는 사진 편집 애플리케이션을 만들어보자.

07 Dec 2023

flutter

개요

이번 프로젝트에서는 Flutter의 Stepper 위젯을 활용하여 사용자가 선택한 해상도로 사진을 편집하는 애플리케이션을 개발해보겠습니다. Stepper를 사용하면 여러 단계로 나누어진 작업을 사용자에게 보여줄 수 있기 때문에 사진 편집 앱에 적합한 UI를 구현할 수 있습니다.

Stepper 위젯

Stepper는 일련의 스텝으로 구성된 UI를 제공하는 위젯입니다. 사용자는 이전 단계로 돌아가거나 다음 단계로 이동할 수 있습니다.

프로젝트 구성

1. 프로젝트 생성

먼저 Flutter 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행합니다:

flutter create photo_editor_app

2. 패키지 의존성 추가

프로젝트의 pubspec.yaml 파일에서 다음과 같이 image_picker와 flutter_staggered_grid_view 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.6.2+3
  flutter_staggered_grid_view: ^0.3.0

저장 후 터미널에서 flutter pub get을 실행하여 패키지를 불러옵니다.

3. UI 디자인

이제 애플리케이션의 UI를 디자인해보겠습니다. lib 폴더에 main.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';

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

class PhotoEditorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo Editor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PhotoEditorScreen(),
    );
  }
}

class PhotoEditorScreen extends StatefulWidget {
  @override
  _PhotoEditorScreenState createState() => _PhotoEditorScreenState();
}

class _PhotoEditorScreenState extends State<PhotoEditorScreen> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Editor'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep >= 2) return;
          setState(() {
            _currentStep += 1;
          });
        },
        onStepCancel: () {
          if (_currentStep <= 0) return;
          setState(() {
            _currentStep -= 1;
          });
        },
        steps: [
          Step(
            title: Text('Step 1'),
            content: Text('Choose a resolution'),
            isActive: _currentStep == 0,
          ),
          Step(
            title: Text('Step 2'),
            content: Text('Select an image'),
            isActive: _currentStep == 1,
          ),
          Step(
            title: Text('Step 3'),
            content: Text('Edit the photo'),
            isActive: _currentStep == 2,
          ),
        ],
      ),
    );
  }
}

이 코드에서는 애플리케이션의 기본 구조를 설정하고, Stepper를 이용하여 단계별로 보여줄 UI를 구성하였습니다.

4. 해상도 선택 UI 구현

이제 각 단계에 맞는 UI를 구현해보겠습니다. 먼저 첫 번째 단계인 해상도 선택 UI를 구현해보겠습니다. lib 폴더에 resolution_screen.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';

class ResolutionScreen extends StatelessWidget {
  final List<String> resolutions = ['Low', 'Medium', 'High'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: resolutions.length,
        itemBuilder: (context, index) {
          final resolution = resolutions[index];

          return ListTile(
            title: Text(resolution),
            onTap: () {
              // 선택한 해상도로 이미지 편집 화면으로 이동
            },
          );
        },
      ),
    );
  }
}

이 코드에서는 ResolutionScreen 클래스를 정의하고, ListView.builder를 사용하여 해상도 목록을 보여줍니다. 각 해상도를 선택하면 선택한 해상도로 이미지 편집 화면으로 이동하는 코드를 작성해야 합니다.

5. 이미지 선택 UI 구현

두 번째 단계인 이미지 선택 UI를 구현해보겠습니다. lib 폴더에 image_screen.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImageScreen extends StatefulWidget {
  @override
  _ImageScreenState createState() => _ImageScreenState();
}

class _ImageScreenState extends State<ImageScreen> {
  final ImagePicker _imagePicker = ImagePicker();
  dynamic _pickedImage;

  Future<void> _pickImage() async {
    final pickedImage = await _imagePicker.getImage(source: ImageSource.gallery);
    setState(() {
      _pickedImage = pickedImage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text('Choose Image'),
              onPressed: _pickImage,
            ),
            if (_pickedImage != null)
              Image.file(
                _pickedImage,
                width: 200,
                height: 200,
              ),
          ],
        ),
      ),
    );
  }
}

이 코드에서는 ImageScreen 클래스를 정의하고, ImagePicker를 이용하여 갤러리에서 이미지를 선택하는 기능을 구현하였습니다. 선택한 이미지는 화면에 표시되도록 처리되었습니다.

6. 사진 편집 UI 구현

마지막으로 사진 편집 UI를 구현해보겠습니다. lib 폴더에 editor_screen.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';

class EditorScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Photo Editor'),
      ),
    );
  }
}

이 코드에서는 EditorScreen 클래스를 정의하고, 기본적인 사진 편집 UI를 구현하였습니다.

실행해보기

이제 애플리케이션을 실행해보겠습니다. 터미널에서 다음 명령어를 실행하여 시뮬레이터 또는 기기에 앱을 빌드하고 실행합니다:

flutter run

실행한 후 앱에서 단계별로 진행해보면 해상도 선택, 이미지 선택, 사진 편집까지의 UI를 확인할 수 있습니다.

결론

이번에는 Flutter의 Stepper를 활용하여 사용자가 선택한 해상도로 이미지를 편집할 수 있는 사진 편집 애플리케이션을 개발해보았습니다. Stepper의 기능을 활용하면 다양한 작업을 단계별로 구성할 수 있으므로, 여러분의 소프트웨어 개발에 활용해보시기 바랍니다.