Post
Ask Question

Card Widget In Flutter

Flutter

Flutter is an open-source UI Software kit developed by Google. It is used to develop cross-platform applications for Android, Mac, IOS, Web platform, and the web from a single codebase. First described in 2015, flutter was released in May 2017.

Card Widget

The Card is a build-in widget in flutter which gets its plan from Google's Material Design Library. The usefulness of this widget on-screen is it is a tasteless space or board with round corners and a slight height on the lower side. It accompanies numerous properties like tone, shape, shadow tone, and so forth, which allows designers to modify the manner in which they like. Below, we will go through all its properties and a guide to see its execution.

Container of Card

container (
{Key key,
Color color,
Color shadowColor,
double elevation,
ShapeBorder shape,
bool borderOnForeground: true,
EdgeInsetsGeometry margin,
Clip clipBehavior,
Widget child,
bool semanticContainer: true}
)

Properties of Card Widget

  • borderOnForeground: This property accepts in a boolean worth as an item to choose whether to print a line or not.
  • youngster: This property takes in a gadget as an item to show inside the Card gadget.
  • clipBehavior: This property concludes whether or not the substance inside the Card will be cut. It takes Clip enum as an article.
  • shading: This property doles out foundation tone to the Card by taking in the Color class as the article.
  • rise: This property accepts in a twofold worth as the item to choose the z-coordinate where the Card ought to be set.
  • edge: This property takes in EdgeInsetsGeometry as the item to add void space around the Card.
  • semanticContainer: This property takes in a boolean as the article. This controls whether the Card gadget with all its kid gadget will be viewed as a solitary gadget or not.
  • shadowColor: This property takes in Color class as the item to allot a shading to the shadow, which shows up underneath the Card. Of course, the shading is set to dark.
  • shape: This property takes ShapeBorder class as the item to choose the state of the Card gadget.

Code

import 'package:flutter/material.dart';
import 'package:flutter_application/check.dart';
class aprofile extends StatefulWidget {
  const aprofile({Key? key}) : super(key: key);
  @override
  _aprofileState createState() => _aprofileState();
}
class _aprofileState extends State<aprofile> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[gr],
      ),
    );
  }
  get gr => Expanded(
      child: Container(
          padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
          child: GridView.count(
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
              crossAxisCount: 2,
              childAspectRatio: .90,
              children: <Widget>[
                GestureDetector(
                  onTap: () {},
                  child: Container(
                      child: Card(
                    elevation: 10,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8)),
                    child: Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[FlutterLogo(), Text('data')],
                      ),
                    ),
                  )),
                ),
              ])));
}

Output

 

Github

https://github.com/mmunib41/Flutter_Grid_Card/tree/main


Similar Articles