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

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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(),
        ),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

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

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.