flutter-tutorial

Flutter Card

Card is a flutter built-in widget whose design is inspired by Google’s Material Design Library. This widget’s screen functionality is that it is a plain space or panel with round corners and a slight elevation on the lower side. It has various attributes, such as colour, form, and shadow colour, that allow developers to tailor it to their liking. We’ll go over all of its attributes as well as an example of how to use it in the future.

Properties of Card Widget

  • borderOnForeground: To determine whether or not to print a border, this property accepts a boolean value as an object.
  • child: This property accepts a widget as an object to display within the Card widget.
  • clipBehavior: This attribute determines whether or not the content within the Card is clipped. Clip enum is used as an object.
  • colour: This attribute uses the Color class as the object to set the card’s backdrop colour.
  • elevation: This attribute uses a double value as the object to determine the card’s z-coordinate.
  • margin: This feature adds empty space around the Card by using EdgeInsetsGeometry as the object.

Example:

import 'package:flutter/material.dart';

//imported google's material design library
void main() {
  runApp(
      /**Our App Widget Tree Starts Here**/
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Learn Code Zone'),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ), //AppBar
      body: Center(
        /** Card Widget **/
        child: Card(
          elevation: 50,
          shadowColor: Colors.black,
          color: Colors.blue,
          child: SizedBox(
            width: 300,
            height: 500,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 108,
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(
                         "https://learncodezone.com/wp-content/uploads/2022/04/cropped-cropped-Learn-Code-Zone-logos_transparent-1.png"), //NetworkImage
                      radius: 100,
                    ), //CircleAvatar
                  ), //CircleAvatar
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'Learn Code Zone',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.green[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'Learn Code Zone CODE WANTS TO BE SIMPLE is an initiative to help the upcoming programmers with the code. Learn Code Zone focuses on providing the most efficient code or snippets as the code wants to be simple.',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.green[900],
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 80,
                    child: RaisedButton(
                      onPressed: () => null,
                      color: Colors.red,
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Row(
                          children: [
                            Icon(Icons.touch_app),
                            Text('Visit'),
                          ],
                        ), //Row
                      ), //Padding
                    ), //RaisedButton
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    ), //Scaffold
  ) //MaterialApp
      );
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.