April 22, 2020

Learn how to design a simple card and list widgets in flutter.

By Mohit Agrawal

Using card widget in list view flutter.

flutter card view

Introduction

Let’s get ready to design a very simple flutter card and list widgets to display the details of a person. We will go step by step. We will start with basic UI then we will learn how to use map() function to read all the list items one by one. In this small tutorial you will get to learn the following concepts:

  • Custom widgets
  • Custom dart class
  • Card view
  • Create a list of widgets using the map() function.
https://www.youtube.com/watch?v=xFipZ8DBsks
Check out the demo video here https://www.youtube.com/watch?v=xFipZ8DBsks

Person class

As you know, our card will display the details of a person. So we need a variable to store such type of details like nameprofileImage, bio.

Create a new dart file and name it Person and write the code shown below.

class Person {
  String name;
  String profileImg;
  String bio;

  Person({this.name,this.profileImg,this.bio});
}

We will use this Person class to store his name, profileImage and small bio.

Main file

In main.dart file we will be designing our custom card widget. The list of Person’s objects will be mapped one by one and the number of cards will be created automatically based on numbers of items in the person’s list. I hope card and list widgets are clear to you. Check out the source code given below:

import 'package:flutter/material.dart';
import 'package:custom_list_flutter_app/Person.dart';

void main() => runApp(MaterialApp(
  home: MyHome(),
));


class MyHome extends StatefulWidget {
  
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

   List<Person> persons = [
     Person(name: 'Bill Will', profileImg: 'img/pic-1.png', bio: "Software Developer"),
     Person(name: 'Andy Smith', profileImg: 'img/pic-2.png', bio: "UI Designer"),
     Person(name: 'Creepy Story', profileImg: 'img/pic-3.png', bio: "Software Tester")
  ];

   Widget personDetailCard(Person) {
     return Padding(
       padding: const EdgeInsets.all(10.0),
       child: Card(
         color: Colors.grey[800],
         child: Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Container(
                     width: 50.0,
                     height: 50.0,
                     decoration: new BoxDecoration(
                         shape: BoxShape.circle,
                         image: new DecorationImage(
                             fit: BoxFit.cover,
                             image: AssetImage(Person.profileImg)
                         )
                     )),
               ),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   Text(Person.name,
                     style: TextStyle (
                         color: Colors.white,
                         fontSize: 18
                     ),
                   ),
                   Text(Person.bio,
                     style: TextStyle (
                         color: Colors.white,
                         fontSize: 12
                     ),
                   )
                 ],
               )
             ],
           ),
         ),
       ),
     );
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      body: Padding(
        padding: const EdgeInsets.fromLTRB(10, 50, 10, 10),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(Icons.menu, size: 35, color: Colors.white),
                Text('Notifications',
                  style: TextStyle (
                    color: Colors.white,
                    fontSize: 25
                  ),
                ),
                Icon(Icons.notifications_none, size: 35, color: Colors.white)
              ],
            ),
            Column(
              children: persons.map((p) {
                return personDetailCard(p);
              }).toList()
            )
          ],
        ),
      ),
    );
  }
}

Download the complete source code and assets from here

Should I learn flutter or kotlin/swift?

It all depends on the project requirements. Suppose the requirement is to develop the same app for both iOS and android then definitely I will recommend you to learn flutter. You just need to write single code base and app will be ready for both

Is flutter only for UI?

No, using flutter you can develop the whole app. It uses dart language which is used for the logical part. But yes, using flutter anyone design very complex UI in magic.