[flutter] 플러터 Stepper를 사용하여 패스워드 자릿수 선택 기능이 있는 비밀번호 생성 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번에는 플러터(Flutter)의 Stepper를 활용하여 패스워드 자릿수 선택 기능이 있는 비밀번호 생성 애플리케이션을 만들어보겠습니다.

Stepper란?

Stepper는 플러터에서 제공하는 위젯으로, 단계별로 작업을 진행할 수 있는 인터페이스를 제공합니다. 각 단계별로 이전 단계와 다음 단계로 이동할 수 있으며, 사용자 정의 위젯을 포함시킬 수 있습니다.

비밀번호 생성 애플리케이션 디자인

비밀번호 생성 애플리케이션은 다음과 같이 동작하도록 디자인할 것입니다.

첫 번째 단계에서 사용자는 패스워드 자릿수를 선택합니다.
두 번째 단계에서 사용자는 패스워드 생성 버튼을 클릭하여 랜덤한 패스워드를 생성합니다.

코드 작성하기

먼저, main.dart 파일을 열고 다음 코드를 작성해봅시다.

import 'package:flutter/material.dart';

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

class PasswordGeneratorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Password Generator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PasswordGeneratorPage(),
    );
  }
}

class PasswordGeneratorPage extends StatefulWidget {
  @override
  _PasswordGeneratorPageState createState() => _PasswordGeneratorPageState();
}

class _PasswordGeneratorPageState extends State<PasswordGeneratorPage> {
  int _currentStep = 0;
  int _passwordLength = 8;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Password Generator'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep == 0) {
            setState(() {
              _currentStep = 1;
            });
          } else {
            // Generate password logic
            String password = generatePassword(_passwordLength);
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Generated Password'),
                  content: Text(password),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('Ok'),
                      onPressed: () {
                        Navigator.of(context).pop();
                        setState(() {
                          _currentStep = 0;
                        });
                      },
                    ),
                  ],
                );
              },
            );
          }
        },
        onStepCancel: () {
          setState(() {
            _currentStep = _currentStep - 1;
          });
        },
        steps: [
          Step(
            title: Text('Password Length'),
            content: Column(
              children: <Widget>[
                Text('Select the length of the password:'),
                SizedBox(height: 10),
                DropdownButton<int>(
                  value: _passwordLength,
                  onChanged: (int newValue) {
                    setState(() {
                      _passwordLength = newValue;
                    });
                  },
                  items: <int>[8, 12, 16].map((int value) {
                    return DropdownMenuItem<int>(
                      value: value,
                      child: Text('$value'),
                    );
                  }).toList(),
                ),
              ],
            ),
            isActive: _currentStep == 0,
          ),
          Step(
            title: Text('Generate Password'),
            content: Column(
              children: <Widget>[
                Text('Click the button to generate a password:'),
                RaisedButton(
                  child: Text('Generate'),
                  onPressed: () {},
                ),
              ],
            ),
            isActive: _currentStep == 1,
          ),
        ],
      ),
    );
  }

  String generatePassword(int length) {
    // Password generation logic here
    // ...
  }
}

위 코드에서는 Stepper 위젯을 사용하여 단계별로 작업을 진행합니다. 각 단계는 Step 위젯으로 표현되며, 첫 번째 단계는 _passwordLength 변수를 업데이트하는 드롭다운 버튼이 포함되어 있습니다. 두 번째 단계에는 패스워드 생성 버튼이 있으며, onStepContinue 함수에서 패스워드를 생성하고 다이얼로그로 표시합니다.

결과 확인하기

애플리케이션을 실행해보면, 패스워드 자릿수를 선택한 후 “Continue” 버튼을 클릭하면 패스워드가 생성되고 다이얼로그로 표시됩니다.

이것으로 플러터 Stepper를 사용하여 패스워드 자릿수 선택 기능이 있는 비밀번호 생성 애플리케이션을 만드는 방법을 알아보았습니다.

Stepper란?

비밀번호 생성 애플리케이션 디자인

코드 작성하기

결과 확인하기

참고 자료