[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 알파벳 개수로 이름을 생성하는 이름 생성기 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이름 생성기 애플리케이션은 사용자가 선택한 알파벳 개수로 이름을 생성하는 애플리케이션입니다. 사용자는 플러터의 Stepper 위젯을 사용하여 알파벳 개수를 조정할 수 있습니다. 선택한 알파벳 개수에 따라 이름이 동적으로 생성되며, 사용자는 생성된 이름을 바로 확인할 수 있습니다.

필요한 패키지 설치

플러터 애플리케이션을 개발하기 위해 필요한 패키지를 설치해야 합니다. 이 애플리케이션에서는 아래 패키지가 필요합니다.

dependencies:
  flutter:
    sdk: flutter
  stepper_touch:

프로젝트의 pubspec.yaml 파일에 위의 패키지를 추가하고, 패키지를 가져옵니다.

애플리케이션 개발

애플리케이션 개발을 위해 먼저 플러터 애플리케이션의 기본 코드를 작성합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '이름 생성기',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: NameGenerator(),
    );
  }
}

class NameGenerator extends StatefulWidget {
  @override
  _NameGeneratorState createState() => _NameGeneratorState();
}

class _NameGeneratorState extends State<NameGenerator> {
  int alphabetCount = 3;
  String generatedName = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이름 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StepperTouch(
              initialValue: alphabetCount.toDouble(),
              direction: Axis.horizontal,
              onChanged: (int value) {
                setState(() {
                  alphabetCount = value;
                  generatedName = generateName();
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              generatedName,
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }

  String generateName() {
    String name = '';
    for (int i = 0; i < alphabetCount; i++) {
      int asciiValue = 65 + i;
      name += String.fromCharCode(asciiValue);
    }
    return name;
  }
}

위의 코드는 플러터 기본 애플리케이션 코드를 기반으로 이름 생성기 애플리케이션을 개발하기 위한 코드입니다. 이 코드에서는 stepper_touch 패키지를 사용하여 스텝퍼 위젯을 만들고, 사용자가 선택한 알파벳 개수에 따라 이름을 동적으로 생성하는 함수 generateName()을 구현했습니다.

애플리케이션을 실행하면, 사용자는 스텝퍼 위젯을 사용하여 알파벳 개수를 조정할 수 있고, 조정된 알파벳 개수에 따라 이름이 실시간으로 생성되어 화면에 표시됩니다.

결론

플러터의 Stepper 위젯을 사용하여 이름 생성기 애플리케이션을 개발했습니다. 이 애플리케이션은 사용자가 선택한 알파벳 개수로 이름을 생성하고, 생성된 이름을 바로 확인할 수 있습니다. Stepper 위젯을 활용하여 다양한 애플리케이션을 개발할 수 있으니, 참고하여 다양한 애플리케이션을 만들어 보세요.