Home Mobile Membuat Slider pada Flutter

Membuat Slider pada Flutter

0

Pada kali ini kita akan membuat sebuah widget pada flutter yaitu slider. Slider adalah kontrol yang memungkinkan pengguna memilih dari rentang nilai dengan memindahkan kontrol jempol di sepanjang trek. berikut ini kita akan membuat sebuah slider pada flutter, yaitu :

  • Buatlah sebuah project baru pada flutter
  • buatlah sebuah function pada state project
double drag = 1.0;

void methodSlider(value){
setState(() {
drag = value;
});
}
  • Buatlah sebuah slider
Slider(
value: drag,
min: 1.0,
max: 20.0,
onChanged: (double val){
methodSlider(val);
}
),
Text("value : $drag"),
  • Full Source Code
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: SliderPage(),
debugShowCheckedModeBanner: false,
);
}
}

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

@override
State<SliderPage> createState() => _SliderPageState();
}

class _SliderPageState extends State<SliderPage> {

double drag = 1.0;

void methodSlider(value){
setState(() {
drag = value;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Slider Page"),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Slider(
value: drag,
min: 1.0,
max: 20.0,
onChanged: (double val){
methodSlider(val);
}
),
Text("value : $drag"),
],
),
),
);
}
}