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);
  }
}

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 → Key?

Optional.

styleSpec → Key?

Optional.

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 container 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)

animate(AnimationConfig config)

constraints(BoxConstraintsMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)