A Flutter Card Widget with multiple elements

A Flutter Card Widget with multiple elements

GFCard is a GetWidget Flutter Card Widget component that allows you to use multiple elements inside one component (GFCard) to build Flutter Card Widgets. GFCard is designed and developed in such way that allow you to use this component to build multiple Flutter Card design layouts for your flutter mobile and/or web app. It has a broad range of pre-built designs used for user’s profile, cart items, news, blogs, social media & many more.

Being a flutter developer it is very much time consuming to write each & every properties of an element & so GetWidget comes  here with a number of pre-designed UI components that helps us to create a complex design just in a piece of time.

Information about flutter card:

GFCard Banner

Here are some categories of GFCard  :

These are the following Flutter Card widgets of of GetWidget card component.

  • Basic GFCard
  • Avatar GFCard
  • Full Image GFCard
  • Flutter Card with Image and Text

Using GFCard in app is pretty easy & simple. Below is the getting started steps to use GFCard:

Getting Start

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project  & start building the app:

Install Package from pub.dev :

https://pub.dev/packages/GetWidget

Note: dependencies: getwidget: ^ 2.0.3

Import full package:

import 'package:getwidget/getwidget.dart';

Call the name of component with its properties:

Keep playing with the pre-built UI components.
GFCard(
    boxFit: BoxFit.cover,
    imageOverlay: AssetImage('your asset image'),
    title: GFListTile(
       avatar: GFAvatar(),
       title: Text('Card Title'),
       subTitle: Text('subtitle'),
     ),
     content: Text("GFCards has three types of cards i.e, basic, with avataras and with overlay image")
     buttonBar: GFButtonBar(
     alignment: MainAxisAlignment.center,
     children: <Widget>[
     GFButton(
       onPressed: () {},
       text: 'View',
       )
      ],
     ),
   ), 

The output will be like this:

GFCard

Cards are the most commonly used component for mobile apps. GetWidget gives you a variety of ready to use cards, just a little modification you have to do if needed otherwise the cards are created for multiple purposes & are ready to use.

Let's connect together and build your idea into a real time app with GetWidget UI Library. Now you could start with our documentation from how to getting start and go with each component.

GFCard

Properties of Card Widget:

titlePositionhelps to set the title at top of the card
colorsets the background color of the card
elevationcontrols the size of the shadow below the card
shapeshape of the card
borderOnForegroundwhether to paint the shape of the border in front of the child, defaults to true
clipBehaviourdefines the clipping of the child
margindefines the card's outer container margin
paddingdefines the card's outer container padding
semanticContainerrepresents a single semantic container, if false a collection of semantic nodes
borderto draw border above the card
borderRadiusrepresents the rounded corners of the card
colorFilterapplies to the image before painting it
boxFithow the image should be inscribed into the box
imageOverlaydisplay images as background with shaded overlay

Example Flutter Crad Widget implementation:

import 'package:getwidget/getwidget.dart';

 GFCard(
   boxFit: BoxFit.cover,
   titlePosition: GFPosition.start,
   image: Image.asset('your asset image'),
   title: GFListTile(
     avatar: GFAvatar(
       backgroundImage: AssetImage('your asset image'),
     ),
     titleText: 'Game Controllers',
     subtitleText: 'PlayStation 4',
    ),
    content: Text( "Some quick example text to build on the card"),
    buttonBar: GFButtonBar(
      children: <Widget>[
        GFAvatar(
          backgroundColor: GFColors.PRIMARY,
          child: Icon(Icons.share, color: Colors.white,),
        ),
        GFAvatar(
          backgroundColor: GFColors.SECONDARY,
          child: Icon(Icons.search, color: Colors.white,),
        ),
        GFAvatar(
           backgroundColor: GFColors.SUCCESS,
           child: Icon(Icons.phone, color: Colors.white,),
        ),
    ],
  ),
),

Flutter Card with image

This feature allow to use of getwidget component to use image as a card with overlays feature. This also known as flutter card with image and text. Check out the our custom propertise Card with overlayimages.

About Our team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundred and hundreds of hour to experiment and implementation of Flutter. AS well as After successful deliver enterprise and SAAS application that been using by more than 500+ business around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the Flutter Dev Community.

Resources:

Docs: https://docs.getwidget.dev

Forum : https://forum.getwidget.dev

GitHub Repository: https://github.com/ionicfirebaseapp/getwidget

FAQs

Q. 1. What is card in flutter?

Ans: It is a panel with slightly rounded corners and an elevation shadow that provide an additional look for user to get focus on that and even it is used for call to action properties. It used to represent some related information, for example an album, a geographical location, a meal, contact details, etc

Q. 2. How do you make cards in flutter?

Ans: You can make cards using the Class Card in Dart package. You can call Cart Class and start building. Or you can import our getwidget package in your code and start calling component and building the card in your flutter app.

Q. 3. How do you make a card with an image on flutter?

Ans: You can build card with an image on flutter through with our package. Just import import 'package:getwidget/getwidget.dart'; and call this imageOverlay: AssetImage('your asset image'), and make your own flutter card. Read more.

Q. How to Build Flutter card with image and text?

Ans: In order to build Flutter card with image and text you can use Overlays Image class. Or you can you our OverlayImage component.

Flutter card design with image and text example

Flutter card Design with image and text example
Flutter card Design with image and text example

Source code:

import 'package:getwidget/getwidget.dart';

GFCard(
boxFit: BoxFit.cover,
imageOverlay: AssetImage('your asset image'),
title: GFListTile(
title: Text('Card Title'),
),
content: Text("GFCards has three types of cards i.e, basic, with avataras and with overlay image")
buttonBar: GFButtonBar(
alignment: MainAxisAlignment.center,
children: [
GFButton(
onPressed: () {},
text: 'View',
)
],
),
),