[ Flutter ] Slider 사용하기

안녕하세요 이번 글에서는 slider를 사용해 보겠습니다.

 

폴더와 파일을 만들어 줍시다.

 

 

 

main.dart

import 'package:flutter/material.dart';
import 'package:slider/screen/home_screen.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

 

home_screen.dart

 

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // slider 의 값을 받아줄 변수
   double number = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('slider'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 변화되는 숫자를 text 로 표시
            Text('selectedNumber  : ${number.toInt()}'),
            // Slider 를 만들어줄 위젯
            _Slider(onSliderChanged: onSliderChanged, number: number,)
          ],
        ),
      ),
    );
  }

  // slider 의 change 이벤트
  void onSliderChanged(double number){
    // change 이벤트 발생시 변화되는 값을 적용후 setState 를 이용하여 다시 Build
          setState(() {
            this.number = number;
          });
  }
}

class _Slider extends StatelessWidget {
  final ValueChanged<double> onSliderChanged;
  final double number;
  const _Slider({Key? key, required this.onSliderChanged, required this.number}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return
      Slider(
        min: 100, // 최소값
        max: 10000, //최대값
        value: number, // 현재값
        onChanged: onSliderChanged, // change 이벤트
      );
  }
}

 

실행시켜 보면 

 

 

slider 변화에 따라 숫자가 변경되는 것을 확인할 수 있습니다.