Card


Una tarjeta de Material Design. Una Card tiene esquinas ligeramente redondeadas y una sombra.

Una Card es una hoja de material que se utiliza para representar información relacionada, por ejemplo, un álbum, una ubicación geográfica, una comida, detalles de contacto, etc.

Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('Música de mariachi'),
              subtitle: Text('Musica regional mexicana ♫ ♪.'),
            ),
            ButtonTheme.bar( 
              child: ButtonBar(
                children: <Widget>[
                  FlatButton(
                    child: const Text('Comprar disco'),
                    onPressed: () {/* ... */},
                  ),
                  FlatButton(
                    child: const Text('Escuchar'),
                    onPressed: () {/* ... */},
                  ),
                ],
              ),
            ),
          ],
        ),
      )
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, initialIndex: 0, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ejemplo Card'),
      ),
      backgroundColor: Colors.grey,
      body: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('Música de mariachi'),
              subtitle: Text('Musica regional mexicana ♫ ♪.'),
            ),
            ButtonTheme.bar( 
              child: ButtonBar(
                children: <Widget>[
                  FlatButton(
                    child: const Text('Comprar disco'),
                    onPressed: () {/* ... */},
                  ),
                  FlatButton(
                    child: const Text('Escuchar'),
                    onPressed: () {/* ... */},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Como puedes ver, es un diseño simple pero de buen ver.

Siempre puedes utilizarlo en Listas, columnas, GridViews, etc

 

Hasta la próxima! 😀


Sobre Gustavo Zimbrón 131 Artículos
Apasionado por la programación y la tecnología, me gustan los retos y aprender siempre cosas nuevas.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*