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 188 artículos
Apasionado por la programación y la tecnología, me gustan los retos y aprender siempre cosas nuevas.
Subscribe
Notify of
guest

0 Comentarios
Oldest
Newest Most Voted
Inline Feedbacks
View all comments