Card

A versatile container component for grouping related content.

When to use this

Content grouping: Organize related information in a contained unit
Product cards: Display product information in e-commerce interfaces
Profile cards: Show user profiles or contact information
Dashboard panels: Create panels for dashboard widgets

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class CardExample extends StatelessWidget {
  const CardExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return RemixCard(
      style: style,
    );
  }
 
  RemixCardStyle get style {
    return RemixCardStyle()
        .size(300, 200)
        .textColor(Colors.white)
        .borderRadiusAll(const Radius.circular(4))
        .borderAll(color: Colors.grey.shade300);
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalCardExample extends StatelessWidget {
  const FortalCardExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        RemixCard(
          style: FortalCardStyle.elevated(),
        ),
        RemixCard(
          style: FortalCardStyle.outlined(),
        ),
      ],
    );
  }
}

See the FortalCardStyle source code for all available options.

Constructor


const RemixCard({
  Key? key,
  Widget? child,
  RemixCardStyle style = const RemixCardStyle.create(),
  RemixCardSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixCardStyle`	Optional. The style configuration for the card. Customize colors, sizing, borders, and state-based styling.
`styleSpec`	`RemixCardSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`child`	`Widget?`	Optional. The widget below this widget in the tree. This widget can only have one child. To lay out multiple children, let this widget’s child be a widget such as [RowBox], [ColumnBox], or [StackBox], which have a children property, and then provide the children to that widget.

Style Methods

Method	Description
`padding(EdgeInsetsGeometryMix value)`	Sets container padding
`textColor(Color value)`	Sets text color
`borderRadius(BorderRadiusGeometryMix radius)`	Sets container border radius
`margin(EdgeInsetsGeometryMix value)`	Sets container margin
`alignment(Alignment value)`	Sets container alignment
`decoration(DecorationMix value)`	Sets container decoration
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`animate(AnimationConfig config)`	Configures implicit animation for style transitions.
`constraints(BoxConstraintsMix value)`	Sets size constraints on the component.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.