[flutter] RaisedButton을 사용해 슬라이더 동작

07 Dec 2023

flutter

슬라이더는 사용자가 값을 선택하거나 조절할 수 있는 인터페이스 요소입니다. Flutter에서 RaisedButton을 사용하여 슬라이더와 상호 작용하는 방법을 알아보겠습니다.

1. 슬라이더 위젯 생성

먼저, 슬라이더 위젯을 생성합니다. 다음은 Flutter에서 슬라이더를 생성하는 예시 코드입니다:

double _sliderValue = 0.0;

Slider(
  value: _sliderValue,
  min: 0.0,
  max: 100.0,
  onChanged: (double value) {
    setState(() {
      _sliderValue = value;
    });
  },
)

이 코드에서는 Slider 위젯을 사용하여 슬라이더를 생성하고, value, min, max, onChanged 등의 속성을 설정합니다. value는 슬라이더의 현재 값, min과 max는 슬라이더의 범위를 나타내며, onChanged는 슬라이더 값이 변경될 때 호출되는 콜백 함수입니다.

2. RaisedButton 추가

이제 RaisedButton을 추가하여 슬라이더와 상호 작용할 수 있도록 합니다. RaisedButton 위젯을 누르면 슬라이더의 값을 50으로 설정하는 예시 코드는 다음과 같습니다:

RaisedButton(
  child: Text('Set to 50'),
  onPressed: () {
    setState(() {
      _sliderValue = 50.0;
    });
  },
)

이 코드에서는 RaisedButton 위젯을 생성하고, child 속성으로 버튼에 표시할 텍스트를 지정합니다. onPressed는 버튼을 눌렀을 때 호출되는 콜백 함수로, 여기에서 _sliderValue를 50으로 설정합니다. setState 함수를 호출하여 해당 변경사항을 반영합니다.

3. 전체 코드 예시

위에 작성한 코드를 통합하여 전체 예시 코드는 다음과 같습니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slider Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _sliderValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slider(
              value: _sliderValue,
              min: 0.0,
              max: 100.0,
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value;
                });
              },
            ),
            RaisedButton(
              child: Text('Set to 50'),
              onPressed: () {
                setState(() {
                  _sliderValue = 50.0;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

이 예시 코드를 실행하면 슬라이더 위젯이 있는 화면이 나타나고, RaisedButton을 누르면 슬라이더의 값을 50으로 변경할 수 있습니다.

결론

Flutter의 RaisedButton을 사용하여 슬라이더와 상호 작용하는 방법을 알아보았습니다. 슬라이더 위젯을 생성하고, RaisedButton을 추가하여 버튼을 누르면 슬라이더의 값을 변경할 수 있습니다. 이를 응용하여 앱의 다양한 기능을 구현할 수 있습니다.

참고: Flutter 공식 문서를 참고하여 디테일한 사용법을 확인할 수 있습니다.