[flutter] 플러터 Stepper를 사용하여 사용자의 개인 목표를 입력하는 목표 관리 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 튜토리얼에서는 플러터(Flutter)의 Stepper 위젯을 사용하여 사용자의 개인 목표를 입력하는 목표 관리 애플리케이션을 만들어보겠습니다.

Stepper란?

Stepper는 플러터의 매터리얼 디자인 스타일을 가진 스텝 바(Step Bar)를 만들어주는 위젯입니다. 사용자는 스텝 바를 따라서 단계적으로 정보를 입력하거나 작업을 완료할 수 있습니다. 각 스텝은 이전 스텝의 완료 여부와 현재 스텝의 활성 상태를 시각적으로 나타내 줍니다.

저희는 이러한 Stepper 위젯을 사용하여 목표 입력 단계를 구성하고, 사용자가 각 단계를 완료할 수 있도록 만들어볼 예정입니다.

애플리케이션 개요

저희가 만들 목표 관리 애플리케이션은 다음과 같은 단계들로 구성될 것입니다.

목표 이름 입력
목표 기간 설정
목표 설명 입력
목표 확인

사용자는 스텝 바를 따라 이러한 단계를 완료하며, 각 단계에서 필요한 정보를 입력하게 됩니다.

Stepper 설치 및 사용 방법

플러터에서 Stepper 위젯을 사용하기 위해선 material 패키지를 프로젝트에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  material: ^1.0.0

위의 예시처럼 material 패키지를 pubspec.yaml 파일에 추가한 뒤, flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

사용 방법은 간단합니다. Stepper를 사용할 화면에 위젯을 추가하고, 각 스텝에 해당하는 위젯을 steps 속성으로 설정해주면 됩니다.

Stepper(
  steps: [
    Step(title: Text('Step 1'), content: Text('First step content')),
    Step(title: Text('Step 2'), content: Text('Second step content')),
    Step(title: Text('Step 3'), content: Text('Third step content')),
  ],
)

각 스텝은 Step 위젯으로 정의되며, title 속성을 통해 스텝의 제목을 설정할 수 있고, content 속성을 통해 스텝 내용을 설정할 수 있습니다.

목표 관리 애플리케이션 개발

이제 위에서 설명한 Stepper 위젯과 애플리케이션 개요를 활용하여 목표 관리 애플리케이션을 개발해보겠습니다.

먼저, 필요한 패키지들을 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  material: ^1.0.0
  intl: ^0.17.0

그리고 다음과 같이 main.dart 파일을 작성합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Goal Tracker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GoalForm(),
    );
  }
}

class GoalForm extends StatefulWidget {
  @override
  _GoalFormState createState() => _GoalFormState();
}

class _GoalFormState extends State<GoalForm> {
  int _currentStep = 0;
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Goal Tracker'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Stepper(
            currentStep: _currentStep,
            onStepContinue: () {
              setState(() {
                if (_currentStep < 3) {
                  _currentStep += 1;
                }
              });
            },
            onStepCancel: () {
              setState(() {
                if (_currentStep > 0) {
                  _currentStep -= 1;
                }
              });
            },
            steps: [
              Step(
                title: Text('Step 1'),
                content: TextFormField(
                  decoration: InputDecoration(labelText: 'Goal Name'),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter a goal name';
                    }
                    return null;
                  },
                ),
              ),
              Step(
                title: Text('Step 2'),
                content: TextFormField(
                  decoration: InputDecoration(labelText: 'Goal Duration'),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter a goal duration';
                    }
                    return null;
                  },
                ),
              ),
              Step(
                title: Text('Step 3'),
                content: TextFormField(
                  decoration: InputDecoration(labelText: 'Goal Description'),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter a goal description';
                    }
                    return null;
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 GoalForm 클래스를 정의하고, Stepper를 사용하여 목표를 입력하는 폼을 구성합니다. 각 스텝에서는 TextFormField를 사용하여 필요한 정보를 입력받도록 설정하였습니다.

애플리케이션을 실행하면 스텝 바와 각 스텝에 해당하는 입력 폼이 표시됩니다. 사용자는 스텝을 따라 이동하면서 정보를 입력할 수 있으며, 각 스텝에서는 입력한 내용의 유효성을 검사합니다.

마무리

이번 튜토리얼에서는 플러터의 Stepper 위젯을 사용하여 목표를 입력하는 애플리케이션을 만드는 방법을 알아보았습니다. Stepper를 사용하면 사용자에게 진행 상황을 시각적으로 나타내고 단계별로 정보를 입력할 수 있는 환경을 제공할 수 있습니다.

더 많은 플러터 관련 자료와 예제를 찾으려면 플러터 공식 문서를 참고하시기 바랍니다.

참고 자료:

플러터 공식 문서 - Stepper