Card es un widget incorporado en flutter que deriva su diseño de la Biblioteca de diseño de materiales de Google . La funcionalidad de este widget en pantalla es que es un espacio o panel anodino con esquinas redondeadas y una ligera elevación en la parte inferior. Viene con muchas propiedades como color, forma, color de sombra, etc., lo que permite a los desarrolladores personalizarlo como quieran. A continuación repasaremos todas sus propiedades y un ejemplo para ver su implementación.
Constructor de la clase de tarjeta:
const Card(
{Key key,
Color color,
Color shadowColor,
double elevation,
ShapeBorder shape,
bool borderOnForeground: true,
EdgeInsetsGeometry margin,
Clip clipBehavior,
Widget child,
bool semanticContainer: true}
)
Propiedades del widget de tarjeta:
- borderOnForeground: Esta propiedad toma un valor booleano como objeto para decidir si imprimir un borde o no.
- child: esta propiedad toma un widget como un objeto para mostrar dentro del widget de la tarjeta .
- clipBehavior: esta propiedad decide si el contenido dentro de la tarjeta se recortará o no. Toma Clip enum como un objeto.
- color: esta propiedad asigna color de fondo a la tarjeta tomando la clase Color como objeto.
- elevación: Esta propiedad toma un valor doble como objeto para decidir la coordenada z donde se debe colocar la tarjeta.
- margin: esta propiedad toma EdgeInsetsGeometry como el objeto para agregar un espacio vacío alrededor de Card .
- semanticContainer: Esta propiedad toma un booleano como objeto. Esto controla si el widget Tarjeta con todos sus widgets secundarios se verá como un solo widget o no.
- shadowColor: Esta propiedad toma como objeto la clase Color para asignar un color a la sombra que aparece debajo de la tarjeta. De forma predeterminada, el color se establece en negro.
- forma: esta propiedad toma la clase ShapeBorder como el objeto para decidir la forma del widget de tarjeta .
Ejemplo:
Dart
import 'package:flutter/material.dart';
//imported google's material design library
void main() {
runApp(
/**Our App Widget Tree Starts Here**/
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
centerTitle: true,
), //AppBar
body: Center(
/** Card Widget **/
child: Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.greenAccent[100],
child: SizedBox(
width: 300,
height: 500,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.green[500],
radius: 108,
child: const CircleAvatar(
backgroundImage: NetworkImage(
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"), //NetworkImage
radius: 100,
), //CircleAvatar
), //CircleAvatar
const SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
), //Textstyle
), //Text
const SizedBox(
height: 10,
), //SizedBox
const Text(
'GeeksforGeeks is a computer science portal for geeks at geeksforgeeks.org. It contains well written, well thought and well explained computer science and programming articles, quizzes, projects, interview experienxes and much more!!',
style: TextStyle(
fontSize: 15,
color: Colors.green,
), //Textstyle
), //Text
const SizedBox(
height: 10,
), //SizedBox
SizedBox(
width: 100,
child: ElevatedButton(
onPressed: () => 'Null',
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.green)),
child: Padding(
padding: const EdgeInsets.all(4),
child: Row(
children: const [
Icon(Icons.touch_app),
Text('Visit')
],
),
),
),
// RaisedButton is deprecated and should not be used
// Use ElevatedButton instead
// child: RaisedButton(
// onPressed: () => null,
// color: Colors.green,
// child: Padding(
// padding: const EdgeInsets.all(4.0),
// child: Row(
// children: const [
// Icon(Icons.touch_app),
// Text('Visit'),
// ],
// ), //Row
// ), //Padding
// ), //RaisedButton
) //SizedBox
],
), //Column
), //Padding
), //SizedBox
), //Card
), //Center
), //Scaffold
) //MaterialApp
);
}
Producción:
Explicación: en esta aplicación de aleteo, el Centro es el widget principal de todos, que contiene el widget de Tarjeta como hijo. Las propiedades del widget de la tarjeta que se emplean aquí son la elevación, que se establece en 50, hace que la tarjeta se vea un poco hacia arriba del fondo blanco, shadowColor , al que se le asigna el color negro (da una sombra tenue debajo de la tarjeta), y el color es asignó greenAccent[400] como objeto (es responsable del fondo verde de la tarjeta). El widget Card contiene el widget SizedBox como elemento secundario, que, a su vez, contiene Padding como elemento secundario. Hay un espacio vacío de 20 px en la tarjeta, que está asignado por el rellenopropiedad. El widget Column contiene CircleAvatar (imagen), dos widgets de texto y un RaisedButton , todos separados por el widget SizedBox. Y el resultado final de todo esto es esta hermosa tarjeta.
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