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,
      child: const Text(
        'Card content',
        style: TextStyle(color: Colors.white),
      ),
    );
  }

  CardStyler get style {
    return CardStyler()
        .size(300, 200)
        .color(const Color(0xFF111827))
        .padding(EdgeInsetsGeometryMix.all(24))
        .borderRadius(.all(const Radius.circular(4)))
        .border(.color(Colors.grey.shade300));
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

import 'package:flutter/material.dart';
import 'ui/ui.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

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixCard remixCardConstructor({
  Key? key,
  Widget? child,
  CardStyler style = const CardStyler.create(),
  CardSpec? styleSpec,
}) => throw UnimplementedError();

Properties

Widget Properties

style → CardStyler

Optional. The style configuration for the card. Customize colors, sizing, borders, and state-based styling.

styleSpec → CardSpec?

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

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

Applies a matrix transformation to the component.

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

Creates a RemixCard widget with this style applied.