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

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.

Last updated