MUIPrimary Card

A primary card by ModularUI with an image, title, description, and optional buttons.

Properties

• title: The title of the card.

• titleStyle: Text style of the title, default: TextStyle(fontSize: 24, fontWeight: FontWeight.bold).

• description: The description of the card.

• descriptionStyle: Text style of the description, default: TextStyle(fontSize: 16, color: Colors.grey).

• image: Image widget to display in the card.

• bgColor: The background color of the card, default: Colors.white.

• borderRadius: The border radius of the card, default: 8.

• imageRadius: Border radius of the image, default: 8.

• horizontalMargin: Outer horizontal margin for the card, default: 0.

• verticalMargin: Outer vertical margin for the card, default: 0.

• aspectRatio: Aspect ratio of the image to be shown, default: 16/9.

• buttons: List of Flutter Widgets or ModularUI Widgets used as buttons for MUIPrimaryCard, default: [].

• maxWidth: Maximum width of the card, default: 430. If the screen width is less than maxWidth, the widget will be responsive; otherwise, it will be equal to maxWidth.

Example Usage

modularuiwidgets

Primary Card

MUIPrimaryCard(
            title: 'This is MUIPrimaryCard Title',
            description: 'This is MUIPrimaryCardTitle',
            image: Image.network(
              'https://images.unsplash.com/photo-1706527048236-c5e9183b9e8d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8fA%3D%3D',
              fit: BoxFit.cover,
            ),
            buttons: [MUIPrimaryButton(text: 'Button', onPressed: () {})],
          ),

Notes

• The card adjusts its width based on the screen size but won't exceed maxWidth.

• You can customize the appearance and layout of the card using various properties.

• Buttons can be added to the card for interactive actions.

• The card provides an elegant way to display information with an image and optional buttons.