CheckboxListTile es un widget incorporado en flutter. Podemos decir que es una combinación de CheckBox con ListTile . Sus propiedades como value , activeColor y checkColor son similares al widget CheckBox , y title , subtitle , contentPadding , etc. son similares al widget ListTile . Podemos tocar en cualquier lugar de CheckBoxListTile para buscar en Google la casilla de verificación. A continuación veremos todas las propiedades de este widget junto con un ejemplo.
Constructor de la clase CheckboxListTile:
const CheckboxListTile(
{Key key,
@required bool value,
@required ValueChanged<bool> onChanged,
Color activeColor,
Color checkColor,
Widget title,
Widget subtitle,
bool isThreeLine: false,
bool dense,
Widget secondary,
bool selected: false,
ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform,
bool autofocus: false,
EdgeInsetsGeometry contentPadding,
bool tristate: false}
)
Propiedades del widget CheckboxListTile:
- activeColor: este widget toma la clase Color como el objeto para asignar un color a la casilla de verificación cuando está marcada.
- enfoque automático: esta propiedad toma un booleano como el valor para dividir si el widget se seleccionará en el enfoque inicial o no.
- checkColor: esta propiedad asigna un color al icono de verificación tomando la clase Color como objeto.
- contentPadding: esta propiedad es responsable de asignar un espacio vacío dentro del widget tomando la clase EdgeIsetsGeometry como el objeto.
- controlAffinity: la propiedad controlAffinity contiene la clase ListTileControlAffinity como el objeto para decidir la ubicación de la acción con respecto al texto dentro del widget.
- dense: La propiedad dense toma un booleano como objeto si está asociado con la lista densa vertical.
- isThreeLine: esta propiedad también toma un booleano como objeto para decidir si el texto en el widget se imprimirá hasta la tercera línea.
- onChanged: esta propiedad toma Valuechanged<bool> como el objeto. Esta propiedad es responsable del cambio en la casilla de verificación.
- secundario: la propiedad secundaria contiene un widget como el objeto que se mostrará en el lado opuesto de la casilla de verificación.
- seleccionado: esta propiedad toma un valor booleano como objeto para decidir si la casilla de verificación ya estará seleccionada o no.
- subtítulo: la propiedad de subtítulo contiene un widget como el objeto que se mostrará debajo del título. Por lo general, este widget es Texto .
- title: esta propiedad también toma un widget como el objeto que se mostrará como el título de CheckBoxListTle, por lo general, es un widget de texto .
- tristate: esta propiedad contiene un valor booleano como objeto. Si se establece en verdadero, los valores en la casilla de verificación pueden ser verdadero , falso o nulo .
- valor: esta propiedad también toma un booleano como objeto para controlar si la casilla de verificación está seleccionada o no.
Ejemplo 1:
Dart
import 'package:flutter/material.dart';
// importing material design library
void main() {
runApp(MaterialApp(
// runApp method
home: HomePage(),
)); //MaterialApp
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// value set to false
bool _value = false;
// App widget tree
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {},
), //IconButton
), //AppBar
body: SizedBox(
width: 400,
height: 400,
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.greenAccent),
borderRadius: BorderRadius.circular(20),
), //BoxDecoration
/** CheckboxListTile Widget **/
child: CheckboxListTile(
title: const Text('GeeksforGeeks'),
subtitle: const Text('A computer science portal for geeks.'),
secondary: const Icon(Icons.code),
autofocus: false,
activeColor: Colors.green,
checkColor: Colors.white,
selected: _value,
value: _value,
onChanged: (bool value) {
setState(() {
_value = value;
});
},
), //CheckboxListTile
), //Container
), //Padding
), //Center
), //SizedBox
), //Scaffold
); //MaterialApp
}
}
Producción:
Explicación: en el cuerpo de esta aplicación flutter, la jerarquía hasta CheckBoxListTile es SizedBox > Center > Padding > Container > CheckBoxListTile . Todo el widget sobre CheckBoxListTile es principalmente para colocarlo en el centro de la pantalla. En el widget o título CheckBoxListTile , la propiedad contiene Text(‘GeeksforGeeks’) y el subtítulo también es un widget de texto . En el extremo izquierdo, tenemos la casilla de verificación y en el extremo derecho, tenemos un icono de código de diseño de materiales. El color activoen el widget es verde y el color del icono de verificación es blanco. El control del estado de este widget lo toma la propiedad value . Y el borde de color verde está pintado por el widget BoxDecoration con una curva de 20 px en los bordes. El resultado combinado de todo esto es un mosaico de casilla de verificación de aspecto agradable, que se puede usar en muchas aplicaciones, como la lista de tareas pendientes o la aplicación de programación.
Ejemplo 2:
Dart
import 'package:flutter/material.dart';
// importing material design library
void main() {
runApp(MaterialApp(
// runApp method
home: HomePage(),
)); //MaterialApp
}
// Creating a stateful widget to manage
// the state of the app
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// value set to false
bool _value = false;
bool _valu = false;
// App widget tree
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {},
), //IconButton
), //AppBar
body: Center(
child: SizedBox(
width: 400,
height: 400,
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.greenAccent),
borderRadius: BorderRadius.circular(20),
), //BoxDecoration
/** CheckboxListTile Widget **/
child: CheckboxListTile(
title: const Text('GeeksforGeeks'),
subtitle:
const Text('A computer science portal for geeks. '),
secondary: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
radius: 20,
),
autofocus: false,
activeColor: Colors.green,
checkColor: Colors.white,
selected: _value,
dense: true,
value: _value,
onChanged: (bool value) {
setState(() {
_value = value;
});
},
), //CheckboxListTile
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: const Offset(
3.0,
3.0,
), //Offset
blurRadius: 10.0,
spreadRadius: 2.0,
), //BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
), //BoxShadow
],
), //BoxDecoration
/** CheckboxListTile Widget **/
child: CheckboxListTile(
title: const Text('GeeksforGeeks'),
subtitle: const Text(
'A computer science portal for geeks. Here you will find articles on all the technologies.'),
secondary: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
radius: 20,
),
autofocus: false,
isThreeLine: true,
activeColor: Colors.green,
checkColor: Colors.white,
selected: _valu,
value: _valu,
onChanged: (bool value) {
setState(() {
_valu = value;
});
},
), //CheckboxListTile
),
],
), //Container
), //Padding
), //Center
),
), //SizedBox
),
debugShowCheckedModeBanner: false, //Scaffold
); //MaterialApp
}
}
Producción:
Explicación: En este ejemplo que muestra el uso del widget CheckBoxTile , hemos modificado el aspecto del CheckBoxTile empleando sus diferentes parámetros junto con el widget BoxDecoration . Al echar un vistazo a la aplicación, podemos notar que una imagen ha reemplazado ese ícono de código. En ambos CheckBoxTiles , el parámetro secundario toma el widget CircleAvatar como el objeto que toma NetworkImage. El tamaño de la imagen es de 20 px. En el primer mosaico , la propiedad densa también se establece en verdadero, lo que hace que el mosaico sea un poco más pequeño en comparación con el tamaño original. Ambos azulejos ,separados por un widget SizedBox de altura 30 px. En el segundo mosaico, el parámetro de borde se eliminó de BoxDecoration y se agregó boxShadow , que brinda una bonita sombra negra alrededor de los bordes. Además, la propiedad isThreeLine también se establece en true, lo que implica una altura adicional para el mosaico , para acomodar más texto en el parámetro de subtítulo .
Publicación traducida automáticamente
Artículo escrito por ankit_kumar_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA