MUIBlog Card

A blog card by ModularUI with a title, description, image, date, circular avatars, and optional "More" button.

Properties

• title: String - Title of the Blog Card.

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

• description: String - Description text of the Blog Card.

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

• onBlogCardPressed: VoidCallback - Callback function when the Blog Card is tapped.

• image: Image - Image to be displayed on the Blog Card.

• date: String - Date text of the Blog Card.

• avatarRad: double - Radius of circular avatars, default: 16.

• onMoreTap: VoidCallback - Callback function when the "More" button is tapped.

• moreButtonStyle: ButtonStyle - Style for the "More" button.

• bgColor: Color - Background color of the card, default: Colors.white.

• elevation: double - Elevation of the card.

• avatarSpacing: double - Spacing between circular avatars.

• aspectRatio: double - Aspect ratio of the image, default: 16 / 9.

• maxWidth: double - Maximum width of the card, default: 430. Responsive to screen size.

• circularAvatarImages: List - List of image links for circular avatars.

Example Usage

modularuiwidgets

Blog Card

MUIBlogCard(
          title: 'This is MUIBlogCard Title',
          description: 'This is MUIBlogCardTitle',
          onBlogCardPressed: () {},
          image: Image.network(
              'https://images.unsplash.com/photo-1682687219570-4c596363fd96?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzNnx8fGVufDB8fHx8fA%3D%3D',
              fit: BoxFit.cover),
          date: '12-Jan-2024',
          circularAvatarImages:  const [
            'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80',
            'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80',
          ],
        ),

Notes

• The card provides an elegant way to display blog information with an image, date, and circular avatars.

• Customize appearance and layout using various properties.

• "More" button can be added for additional actions