A versatile container component for grouping related content.

Interactive preview

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,
      child: const Text('Card content', style: TextStyle(color: Colors.white)),
    );
  }
 
  RemixCardStyler get style {
    return RemixCardStyler()
        .size(300, 200)
        .backgroundColor(const Color(0xFF111827))
        .padding(.all(24))
        .borderRadius(.circular(4))
        .border(.all(.color(Colors.grey.shade300)));
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget 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: [
        FortalCard.classic(),
        FortalCard.surface(),
        FortalCard.ghost(),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

style → RemixCardStyler

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

backgroundColor(Color value)

Sets card background 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 value)

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, {Alignment alignment = .center})

Applies a matrix transformation to the component.

call({Key? key, Widget? child})

Creates a RemixCard widget with this style applied.