How To Create Flutter Card With Example Code

This is a collection of Cards written in Flutter. A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc.

Here are some cards that you can use for reference if you are just getting started in flutter but you don't know how to create a flutter card. Just copy paste the code and modify based on your need.

1. A simple flutter card example

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Future<Widget> getImage() async {
    final Completer<Widget> completer = Completer();
    final url = 'https://picsum.photos/900/600';
    final image = NetworkImage(url);
    // final config = await image.obtainKey();
    final load = image.resolve(const ImageConfiguration());

    final listener = new ImageStreamListener((ImageInfo info, isSync) async {
      print(info.image.width);
      print(info.image.height);

      if (info.image.width == 80 && info.image.height == 160) {
        completer.complete(Container(child: Text('AZAZA')));
      } else {
        completer.complete(Container(child: Image(image: image)));
      }
    });

    load.addListener(listener);
    return completer.future;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: EdgeInsets.all(10) ,
        child: Column(
          children: <Widget>[
            Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Flutter Card Image Example'),
                    subtitle: Text('An example flutter card with image'),
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: FutureBuilder<Widget>(
                      future: getImage(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return snapshot.data;
                        } else {
                          return Text('LOADING...');
                        }
                      },
                    ),
                  )
                  ,
                  ButtonTheme.bar( // make buttons use the appropriate styles for cards
                    child: ButtonBar(
                      children: <Widget>[
                        FlatButton(
                          child: const Text('Flutter'),
                          onPressed: () { /* ... */ },
                        ),
                        FlatButton(
                          child: const Text('Show More'),
                          onPressed: () { /* ... */ },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Good thing about flutter is they support component based user interface, where UI is divided into small chunks of many components. For example you can create a very cool button with nice looks and variety of functions and then reuse it for the entire project.

Writing code in flutter is a very convenient way to create a native app, With flutter mobile framework, you can write one single code base for cross platform or OS, you can compile the code into Android and IOS, and even for the web, with native performance and look at your app results.

Building a mobile app using flutter is very easy, it is because flutter is relatively new technology so they adopt syntax and paradigm from older programming language that’s been years and years in development. Flutter took only the best approach from those languages, and invented new stuff.