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

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

Last updated