[flutter] 플러터 Stepper를 사용하여 사용자의 나이를 선택하는 나이 인식 애플리케이션을 만들어보자.

07 Dec 2023

flutter

플러터(Flutter)의 Stepper를 사용하여 사용자의 나이를 선택하는 나이 인식 애플리케이션을 만들어보겠습니다.

준비하기

먼저, Flutter SDK가 설치되어 있어야 합니다. 만약 설치하지 않았다면, Flutter 공식 사이트에서 설치할 수 있습니다.

프로젝트 설정

프로젝트를 생성하고, 필요한 디펜던시(dependency)를 추가합니다. pubspec.yaml 파일을 열고 아래의 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter

이후 터미널에서 flutter packages get 명령어를 실행하여 디펜던시를 설치합니다.

애플리케이션 코드 작성

이제 애플리케이션 코드를 작성해보겠습니다. main.dart 파일을 열고 아래 코드를 추가해주세요.

import 'package:flutter/material.dart';

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

class AgeRecognitionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Age Recognition App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AgePickerPage(),
    );
  }
}

class AgePickerPage extends StatefulWidget {
  @override
  _AgePickerPageState createState() => _AgePickerPageState();
}

class _AgePickerPageState extends State<AgePickerPage> {
  int selectedAge = 18;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('나이 선택'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              '나이 선택:',
              style: TextStyle(fontSize: 18.0),
            ),
            Stepper(
              value: selectedAge.toDouble(),
              min: 1,
              max: 100,
              onChanged: (double value) {
                setState(() {
                  selectedAge = value.toInt();
                });
              },
            ),
            SizedBox(height: 16.0),
            Text(
              '선택된 나이: $selectedAge',
              style: TextStyle(fontSize: 16.0),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 AgePickerPage라는 StatefulWidget을 만들고, Stepper 위젯을 사용하여 나이 선택 기능을 구현했습니다.

Stepper 위젯은 현재 값을 표시하기 위한 value 속성과 최소값(min), 최대값(max)을 설정할 수 있습니다. 사용자가 나이를 선택하면 onChanged 콜백 함수가 호출되어 setState를 사용해 상태를 업데이트합니다.

애플리케이션 실행

프로젝트 폴더에서 터미널을 열고 flutter run 명령어를 실행하여 애플리케이션을 실행시킬 수 있습니다.

애플리케이션이 실행되면 나이를 선택하는 스테퍼가 화면에 나타납니다. 사용자는 스테퍼를 조작하여 원하는 나이를 선택할 수 있습니다.

결론

이번 튜토리얼에서는 Flutter의 Stepper를 사용하여 나이 인식 애플리케이션을 만들어보았습니다. Stepper는 여러 가지 상황에서 사용자 입력을 받는 데 유용한 위젯입니다. 본 예제를 기반으로 다양한 기능을 추가해보세요.

더 많은 Flutter 튜토리얼과 정보는 Flutter 공식 문서를 참고하세요. 좋은 결과물을 얻기를 바랍니다!