Card

In ProgressDark modeRTL

A container for grouping related content with header and footer.

7:21

Notifications

You have 3 unread messages.

Sofia Davis2m ago

Jackson Lee1h ago

Mia Kim3h ago

Installation

Copy the component into your project using the CLI:

$ronakcn add card

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/card/card.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnCard Example')),
      body: Center(
        child: RcnCard(
          // Configure props here
        ),
      ),
    );
  }
}

Source files

lib/components/ui/card.dart

import 'package:flutter/material.dart';

class RnCard extends StatelessWidget {
  const RnCard({
    super.key,
    this.child,
    this.padding,
  });

  final Widget? child;
  final EdgeInsetsGeometry? padding;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: padding ?? const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
        ),
      ),
      child: child,
    );
  }
}

Version 0.1.0 · display category