[flutter] 플러터 Slider를 사용하여 다른 페이지로 데이터를 전송하는 방법은?

08 Dec 2023

flutter

먼저, Slider를 사용하여 값을 선택한 후 해당 값을 다른 페이지로 전달하기 위해 StatefulWidget을 사용할 수 있습니다. StatefulWidget을 구현하여 Slider의 값을 상태에 저장하고, 이 값을 다른 페이지로 전달할 수 있습니다.

아래는 Slider를 사용하여 값을 선택하고 선택한 값을 다른 페이지로 보내는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SliderPage(),
    );
  }
}

class SliderPage extends StatefulWidget {
  @override
  _SliderPageState createState() => _SliderPageState();
}

class _SliderPageState extends State<SliderPage> {
  double _currentSliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Slider(
              value: _currentSliderValue,
              min: 0,
              max: 100,
              onChanged: (double value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            ),
            RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(data: _currentSliderValue),
                  ),
                );
              },
              child: Text('Send Data'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final double data;

  SecondPage({this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Received data: $data'),
      ),
    );
  }
}

위의 코드에서 Slider를 사용하여 값을 선택하고 Send Data 버튼을 누르면 선택한 값이 SecondPage로 전달됩니다. SecondPage에서는 받은 값을 표시합니다.

이 예제를 통해 Slider를 사용하여 값을 선택하고 선택한 값을 다른 페이지로 전달하는 방법을 알아보았습니다.