Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
El cursor horitzontal és un element que simula un potenciòmetre lliscant. Permet introduir valors sense escriure, d'una forma còmoda. Treballa amb valors reals i, per defecte, el seu rang és entre zero i u; però es pot posar qualsevol altre rang.
Un cursor senzill podia ser:
import 'package:flutter/material.dart';
class CursorHor extends StatefulWidget {
const CursorHor({super.key});
@override
State<CursorHor> createState() => _CursorHorState();
}
class _CursorHorState extends State<CursorHor> {
double valor = 0.5;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 50),
Text("Valor: $valor", style: TextStyle(color: Colors.white)),
SizedBox(height: 20),
Slider(
value: valor,
onChanged: (valorNou) {
setState(() {
valor = valorNou;
});
},
),
],
);
}
}
Dins de la classe, s'ha creat una variable valor que contindrà el valor seleccionat per l'usuari; ha de ser real, ja que el cursor treballa amb aquest tipus de dada. El contingut d'aquesta variable el mostrem en un camp de text. En la definició del cursor li diem que la posició inicial serà la que tingui la variable valor (0.5, en el nostre cas). També indiquem que, quan l'usuari desplaci el cursor, es guardi el valor corresponent a la nova posició en la variable valorNou (que queda automàticament definida en posar-la en el parèntesi després de la indicació onChanged i definim què cal fer quan canviï; en aquest cas, guardar el nou valor a la variable valor. Això ho hem de posar dins d'un setState, per tal que s'actualitzi cada cop que hi hagi un canvi.
El cursor té moltes opcions; en l'exemple següent en veiem algunes. Primer hem canviat els límits mínim (0) i màxim (255), de manera que ara el cursor ja no anirà entre 0 i 1. Li hem posat el nombre de divisions de l'escala a 255; atès que el valor pot anar de 0 a 255, això farà que només es pugui aturar en les posicions que corresponguin a valors enters. També hem canviat els colors, el botó del cursor i la part esquerra del mateix (la que correspon al valor) serà de color ambre i la resta del recorregut (el no utilitzat) serà marró. El cursor pot tenir una mena d'etiqueta (label) que es mostra sobre el cursor mentres es mou. S'hi podria posar un text fix però hi hem posat el valor (convertit a text) entre claudàtors. Atès que hem posat un nombre de divisiona que no permet valors amb decimals, hem fet que el valor es mostri sense decimals en els dos llocs on s'escriu.
...
class _CursorHorState extends State<CursorHor> {
double valor = 127;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: 50),
Text("Valor: ${valor.toStringAsFixed(0)}", style: TextStyle(color: Colors.white)),
SizedBox(height: 20),
Slider(
value: valor,
min: 0,
max: 255,
divisions: 255,
activeColor: Colors.amber,
inactiveColor: Colors.brown,
label: "[${valor.toStringAsFixed(0)}]",
onChanged: (valorNou) {
setState(() {
valor = valorNou;
});
},
),
],
);
}
}
El cursor incorpora uns marges per defecte però té un paràmetre que permet modificar-los.
...
Slider(
value: valor,
min: 0,
max: 255,
divisions: 255,
padding: const EdgeInsets.only(left: 4, right: 4, top: 12, bottom: 12),
onChanged: (valorNou) {
setState(() {
valor = valorNou;
});
},
),
...
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.