Colin's Blog
[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 스펙과 성능에 대한 정보를 표시하는 기기 비교 애플리케이션을 만들어보자.

안녕하세요! 이번에는 플러터의 Stepper 위젯을 활용하여 기기 비교 애플리케이션을 만들어보도록 하겠습니다. 이 애플리케이션은 사용자가 선택한 스펙과 성능에 대한 정보를 표시해줄 것입니다.

준비물

Stepper 위젯

Stepper 위젯은 단계별로 진행해야 하는 작업을 나타내기 위해 사용됩니다. 각 단계는 일반적으로 사용자에 의해 입력받는 정보에 대한 단계일 수 있습니다.

Stepper 위젯은 steps 속성을 가지고 있으며, 각 단계는 Step 위젯으로 구성됩니다. 각 Step 위젯은 title, content, isActive, state 등의 속성을 가지고 있으며, 상태에 따라 다른 스타일을 적용할 수 있습니다.

애플리케이션 구조

먼저, 애플리케이션의 구조를 설계해보겠습니다. 애플리케이션은 다음과 같이 구성될 것입니다.

  1. 기기 목록 페이지: 사용자가 비교할 기기 목록을 표시해줍니다.
  2. 기기 선택 페이지: 사용자가 원하는 기기를 선택할 수 있습니다.
  3. 스펙 입력 페이지: 선택한 기기의 스펙을 입력할 수 있습니다.
  4. 성능 입력 페이지: 선택한 기기의 성능 점수를 입력할 수 있습니다.
  5. 결과 페이지: 입력된 스펙과 성능에 따라 비교 결과를 표시합니다.

코드 작성

자, 이제 코드를 작성해보겠습니다.

  1. 기기 목록 페이지
import 'package:flutter/material.dart';

class DeviceListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('기기 목록'),
      ),
      body: ListView.builder(
        itemCount: deviceList.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(deviceList[index]),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DeviceSelectPage()),
            );
          },
        ),
      ),
    );
  }
}
  1. 기기 선택 페이지
import 'package:flutter/material.dart';

class DeviceSelectPage extends StatefulWidget {
  @override
  _DeviceSelectPageState createState() => _DeviceSelectPageState();
}

class _DeviceSelectPageState extends State<DeviceSelectPage> {
  String selectedDevice;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('기기 선택'),
      ),
      body: ListView.builder(
        itemCount: deviceList.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(deviceList[index]),
          onTap: () {
            setState(() {
              selectedDevice = deviceList[index];
            });
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
  1. 스펙 입력 페이지
import 'package:flutter/material.dart';

class SpecInputPage extends StatefulWidget {
  @override
  _SpecInputPageState createState() => _SpecInputPageState();
}

class _SpecInputPageState extends State<SpecInputPage> {
  int ram;
  int storage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('스펙 입력'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'RAM 용량'),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                setState(() {
                  ram = int.parse(value);
                });
              },
            ),
            TextField(
              decoration: InputDecoration(labelText: '저장 용량'),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                setState(() {
                  storage = int.parse(value);
                });
              },
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => PerformanceInputPage()),
                );
              },
              child: Text('다음'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. 성능 입력 페이지
import 'package:flutter/material.dart';

class PerformanceInputPage extends StatefulWidget {
  @override
  _PerformanceInputPageState createState() => _PerformanceInputPageState();
}

class _PerformanceInputPageState extends State<PerformanceInputPage> {
  int benchmarkScore;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('성능 입력'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: '벤치마크 점수'),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                setState(() {
                  benchmarkScore = int.parse(value);
                });
              },
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ResultPage()),
                );
              },
              child: Text('결과 보기'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. 결과 페이지
import 'package:flutter/material.dart';

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final specInputPageArgs = ModalRoute.of(context).settings.arguments as SpecInputPageArgs;
    final ram = specInputPageArgs.ram;
    final storage = specInputPageArgs.storage;
    final benchmarkScore = specInputPageArgs.benchmarkScore;

    // 비교 결과 계산

    return Scaffold(
      appBar: AppBar(
        title: Text('결과'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Text('비교 결과'),
      ),
    );
  }
}

class SpecInputPageArgs {
  final int ram;
  final int storage;

  SpecInputPageArgs({this.ram, this.storage});
}

마무리

이제 플러터 Stepper를 활용하여 기기 비교 애플리케이션을 만들어보았습니다. 이 예제는 간단한 구조로 설계되었으며, 실제 애플리케이션은 추가적인 기능과 화면으로 확장될 수 있습니다.

추가적인 기능을 구현하고 싶다면, 다양한 스펙과 성능 점수를 비교하여 가장 적합한 기기를 추천하는 기능을 구현해보세요. 이를 통해 사용자들이 효과적으로 기기를 선택할 수 있게 도움을 줄 수 있을 것입니다.

플러터는 많은 기능과 위젯을 제공하므로 다양한 애플리케이션을 만들 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고해보세요.

© 2018 Colin. All rights reserved.