Flutter – Widget ListTile

El widget ListTile se usa para completar un ListView en Flutter. Contiene títulos , así como iconos iniciales o finales . Entendamos esto con la ayuda de un ejemplo.

Constructor de la clase ListTile

ListTile({Key key, 
        Widget leading, 
        Widget title, 
        Widget subtitle, 
        Widget trailing, 
        
bool isThreeLine: false, 
bool dense, 
VisualDensity visualDensity, 
ShapeBorder shape, 
EdgeInsetsGeometry contentPadding, 

bool enabled: true, 
GestureTapCallback onTap, 
GestureLongPressCallback onLongPress, 
MouseCursor mouseCursor, 

bool selected: false, 
Color focusColor, 
Color hoverColor, 
FocusNode focusNode, 
bool autofocus: false})

Propiedades

• enfoque automático: esta propiedad toma un valor booleano como objeto para decidir si este widget se seleccionará en el enfoque inicial o no.
• contentPadding: al tomar EdgeInsetsGeometry como el objeto, esta propiedad controla el relleno.
• denso: esta propiedad decide si ListTile formará parte de una lista densa verticalmente o no tomando un valor booleano como objeto.
• enable: esta propiedad controla si ListTile será interactivo o no tomando un booleano como objeto.
• focusColor: esta propiedad contiene la clase Color como el objeto para controlar el color del widget en el momento del enfoque de entrada.
• focusNode:  esta propiedad proporciona un Node adicional.
• hoverColor: esta propiedad toma la clase Color como el objeto para decidir el color del mosaico en el momento del desplazamiento.
• isThreeLine: si este elemento de la lista debe mostrar tres líneas de texto o no.
• líder: widget líder de ListTile.
• mouseCursor: la propiedad mouseCursor contiene la clase MouseCursor como el objeto para decidir el cursor para el puntero del mouse en el momento del evento del puntero.
• onLongPress: Esto mantiene GestureLongPressCallback typedef como el objeto
• onTap: función que se llamará cuando se presione el mosaico de la lista.
• seleccionado: esta propiedad contiene un valor booleano como objeto. Si se establece en verdadero, el texto y el icono se pintarán con el mismo color.
• selectedTileColor: esta propiedad controla el color de fondo de ListTile cuando se selecciona.
• forma: la forma del InkWell del título.
• subtítulo: contenido adicional que se muestra debajo del título.
• titleColor: esta propiedad define el color de fondo del ListTile cuando no está seleccionado, tomando la clase Color como objeto.
• mosaico: título que se le dará al widget ListTile .
• trailing: widget de seguimiento de ListTile .
• densidad visual. Esta propiedad toma la clase VisualDensity como objeto. Define la compacidad en el diseño del ListTile.

Ejemplo:

El archivo main.dart .

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
// Class
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
// This widget is
//the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListTile',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
// Class
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  String txt = '';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.grey[100],
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              color: Colors.blue[50],
              child: ListTile(
                leading: const Icon(Icons.add),
                title: const Text(
                  'GFG title',
                  textScaleFactor: 1.5,
                ),
                trailing: const Icon(Icons.done),
                subtitle: const Text('This is subtitle'),
                selected: true,
                onTap: () {
                  setState(() {
                    txt = 'List Tile pressed';
                  });
                },
              ),
            ),
          ),
          Text(
            txt,
            textScaleFactor: 2,
          )
        ],
      ),
    );
  }
}

Producción:

Si las propiedades se definen de la siguiente manera:

const ListTile(
                leading: Icon(Icons.add),
                title: Text(
                  'GFG title',
                  textScaleFactor: 1.5,
                ),
                trailing: Icon(Icons.done),
              ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

const ListTile(
                leading: Icon(Icons.add),
                title: Text(
                  'GFG title',
                  textScaleFactor: 1.5,
                ),
                trailing: Icon(Icons.done),
                subtitle: Text('This is subtitle'),
                selected: true,
              ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

ListTile(
                leading: const Icon(Icons.add),
                title: const Text(
                  'GFG title',
                  textScaleFactor: 1.5,
                ),
                trailing: const Icon(Icons.done),
                subtitle: const Text('This is subtitle'),
                selected: true,
                onTap: () {
                  setState(() {
                    txt = 'List Tile pressed';
                  });
                },
              ),
              // when user tap the list tile then below output will be shown.

Se pueden observar los siguientes cambios de diseño:

Explicación de salida:

• Cree un widget ListTile y envuélvalo con el widget Container .
• Después de eso, dale a ListTile un título , inicial , final , onTap , etc.
• Agregue otros widgets también como subtítulos , seleccionados , etc.