Flutter Profile Card

Here, we will take a look how to make a profile card in Flutter.

If you implement the code below, you will have a card like Language or Change password button below.

class ProfileCard extends StatelessWidget {
  final String title;
  final String data;
  ProfileCard({@required this.data, @required this.title});

  @override
  Widget build(BuildContext context) {
    return Expanded(child: Container(
      height: 100,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: Theme.of(context).cardColor,
        boxShadow: [BoxShadow(color: Colors.grey[Get.isDarkMode ? 800 : 200], blurRadius: 5, spreadRadius: 1)],
      ),
      child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text(data, style: TextStyle(
          fontSize: 18, color: Theme.of(context).primaryColor,
        )),
        SizedBox(height: Dimensions.10),
        Text(title, style: TextStyle(
          fontSize: 12, color: Theme.of(context).disabledColor,
        )),
      ]),
    ));
  }
}

It’s important to use a little bit of BoxDecoration for profile card. As you call this stateless class, you need to two arguments, data and title.

You may call ProfileCard class from a ListView.builder class which will run in a loop and you would be able to pass data and title from a List.