목차
- Slider 위젯 사용설명
- onChanged 와 같은 parameter가 있는 callback 함수의 타입
Slider 위젯 사용설명
Slider(
min: 0.1, // 최솟값: double
max: 10.0, // 최댓값: double
divisions: 99, // 구간 갯수 (탁탁 걸리는 구간): int
value: threshold, // 현재 값(최솟값, 최댓값 사이): double
onChanged: (double value) { // 값이 바뀔 때 실행되는 콜백함수
print(value);
},
label: threshold.toStringAsFixed(2), // 선택 했을때 나오는 Label,
// 소수점 2째자리까지 표현
),
onChanged 와 같은 parameter가 있는 callback 함수의 타입
이전까지 콜백함수의 signature(반환형과 파라미터의 형태) 는 void Function() 입니다.
그럼 특정 값을 받는 파라미터의 콜백함수는 어떤 타입을 가질며 어떻게 사용해야 할까요?
바로 ValueChanged<Type> 를 사용합니다.
GestureTapCallback? onThreshold_1;
ValueChanged<double>? onThreshold_2;
Example code
import 'package:flutter/material.dart';
import 'package:p10_4_random_dice/const/colors.dart';
class SettingsScreen extends StatelessWidget {
final double threshold;
final ValueChanged<double> onThresholdChange;
const SettingsScreen({
super.key,
required this.threshold,
required this.onThresholdChange,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Text(
'민감도',
style: TextStyle(
color: secondaryColor,
fontSize: 20.0,
fontWeight: FontWeight.w700,
),
),
],
),
),
Slider(
min: 0.1,
max: 10.0,
divisions: 99,
value: threshold,
onChanged: onThresholdChange,
label: threshold.toStringAsFixed(2),
),
],
);
}
}
class TestScreen extends StatelessWidget {
// ... 생략
List<Widget> renderChildren() {
return [
RandomDiceScreen(
number: number,
),
SettingsScreen(
threshold: threshold,
onThresholdChange: onThresholdChange,
),
];
}
void onThresholdChange(double value) {
setState(() {
threshold = value;
});
}
}
Reference
https://api.flutter.dev/flutter/material/Slider-class.html
Slider class - material library - Dart API
A Material Design slider. Used to select from a range of values. The Sliders value is part of the Stateful widget subclass to change the value setState was called. link To create a local project with this code sample, run: flutter create --sample=material.
api.flutter.dev
https://link.coupang.com/a/UB3Sk
Must Have 코드팩토리의 플러터 프로그래밍:Dart & Flutter 입문부터 실전에 유용한 10가지 앱 개발과
COUPANG
www.coupang.com
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
'Flutter > UI Widget' 카테고리의 다른 글
| [Flutter] BottomNavigationBar & TabBarView (+ TickerProviderStateMixin) (0) | 2023.04.10 |
|---|---|
| [Flutter][Cupertino Widget] DatePicker (기본설명포함) (0) | 2023.04.07 |
| [Flutter] PageView class (scrollable page list) (0) | 2023.04.06 |
| [Flutter] SystemChrome class (SystemUI Control) (0) | 2023.04.06 |
| [Flutter] BoxFit enum (0) | 2023.04.06 |