Sunday, March 26, 2023

How to use Card in Flutter

Card is a another important widget of the material design and has rounded corners and shadows. By using card we can enhance the look and feel of the user interface.similer to other widets .
we can customize card widgets by using properties like shape and margin etc.

The elevation property of a card is used to make card shadow.To customize the shape of the card You need to modify the shape property .some of the shape properties are

1.StadiumBorder
2.OutlineInputBorder
3.UnderlineInputBorder
4.BeveledRectangleBorder
5.RoundedRectangleBorder etc

Follow below sample example for Card widgets

Card(
          elevation: 5.0,//For shadow
          color: Colors.white,
          margin: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Default shape',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 50.0,
                  color: Colors.red,
                ),
              )
            ],
          ),
        )

The following are a few ways to customize the Card’s shape property


//RoundedRectangleBorder
      shape: RoundedRectangleBorder(
           side: BorderSide(color: Colors.white70, width: 1),
           borderRadius: BorderRadius.circular(10),
          )

//BeveledRectangleBorder
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          )

// UnderlineInputBorder
          shape: UnderlineInputBorder(
              borderSide:
                  BorderSide(color: Colors.deepOrange.withOpacity(0.5)))

// Create a Stadium Border
shape: StadiumBorder()

Demo