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

08 Dec 2023

flutter

먼저, Slider를 생성하고 값이 변경될 때 Navigator를 호출하는 메서드를 작성해야 합니다.

아래는 간단한 예제 코드입니다.

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;

  void _navigateToNewPage() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NewPage(value: _currentSliderValue)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Slider(
              value: _currentSliderValue,
              min: 0,
              max: 100,
              divisions: 100,
              label: _currentSliderValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            ),
            RaisedButton(
              onPressed: _navigateToNewPage,
              child: Text('Go to New Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  final double value;

  NewPage({Key key, @required this.value}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Slider value: $value'),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 Slider와 RaisedButton을 사용하여 값이 변경될 때 새로운 페이지로 이동하는 방법을 보여줍니다. Slider의 값이 변경될 때마다 _currentSliderValue가 업데이트되어 Navigator를 호출하여 새로운 페이지로 값을 전달합니다.

이 예제를 통해 Slider를 사용하여 다른 페이지로 이동하는 방법을 이해할 수 있습니다.