Card

برای تعریف ویجت Card میتوان گفت که برگه ای است که برای نشان دادن اطلاعات مربوط به هم مانند اطلاعات تماس، موقعیت جغرافیایی و مواردی از این قبیل استفاده می‌شود.

این ویجت فضایی با گوشه های گرد و یک افکت سایه در اختیار کاربران قرار می‌دهد که در ظاهر به گونه ای است که اندکی بالاتر از Background می‌باشد و از آن جدا می‌باشد.

این ویجت قابلیت شخصی سازی هایی از قبیل Color , shape , shadow  و همچنین property  های دیگر را در اختیار کاربر قرار می‌دهد

در ادامه این property ها را مورد بررسی قرار می‌دهیم.

borderOnForeground (bool)

این property که مقدار boolean را به عنوان ورودی قبول میکند مشخص می‌کند که برای ویجت border رسم کند یا خیر.

child (Widget)

در این Property ویجت هایی را که نیاز دارید در Card نمایش دهید را می‌توانید قرار دهید.

color (Color)

در این property رنگ background ویجت Card مشخص می‌شود.

Elevation (double)

این property مقدار فاصله ویجت را از صفحه مشخص می‌کند. در واقع هر چه مقدار این proprty را بیشتر بدهید فاصله بیشتر و در نتیجه سایه بیشتر می‌شود.

margin (EdgeInsetsGeometry)

در این property مشخص می‌کنید که چه مقدار فضای خالی اطراف ویجت باشد.

shadowColor (Color)

این property که به عنوان ورودی مقدار Color را می‌گیرد رنگ سایه Card را مشخص می‌کند.

shape (ShapeBorder)

این property مربوط به تنظیمات شکل ظاهری ویجت Card می‌باشد.

نمونه کد

در ادامه برای درک بهتر این ویجت یک نمونه کد قرار داده ایم.

Scaffold(
      appBar: AppBar(
        title: Text("Card Widget"),
        centerTitle:true,
      ),
      body: Center(
        /** Card Widget **/
        child: Card(
          elevation: 50,
          shadowColor: Colors.black,
          color: Colors.blueAccent[100],
          child: SizedBox(
            width: 250,
            height: 400,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.blueAccent,
                    radius: 108,
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Container(
                          child: Image.network("https://myflutter.ir/wp-content/uploads/2021/05/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png"),
                        ),
                      ),
                      radius: 100,
                    ), //CircleAvatar
                  ), //CircleAvatar
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'MyFlutter.ir',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.blueAccent[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  const SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 100,

                    child: ElevatedButton(
                      onPressed: () => 'Null',
                      style: ButtonStyle(
                          backgroundColor:
                          MaterialStateProperty.all(Colors.blueAccent)),
                      child: Padding(
                        padding: const EdgeInsets.all(4),
                        child: Row(
                          children: const [
                            Icon(Icons.touch_app),
                            Text('Visit')
                          ],
                        ),
                      ),
                    ),
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    );

جمع بندی

به صورت کلی زمانی از ویجت Card استفاده می‌کنیم که نیاز داریم اطلاعاتی از یک نوع به کاربران نمایش دهیم.