Skip to Content
ExamplesBasic Usage

Basic Usage

Learn the fundamental patterns for using Primitive UI components effectively.

Simple Card

The most basic use of PrimitiveCard is to wrap content:

Simple Card DemoOpen in new tab ↗
PrimitiveCard(
  child: Text('Hello, Primitive UI!'),
)

This creates a white card with default elevation (2.0), border radius (8.0), and padding (16.0).

Card with Custom Styling

Customize the card’s appearance:

Custom Styled Card DemoOpen in new tab ↗
PrimitiveCard(
  color: Color(0xFFF5F5F5), // Light grey
  borderRadius: 12.0,
  elevation: 4.0,
  padding: EdgeInsets.all(20.0),
  child: Text(
    'Custom Styled Card',
    style: TextStyle(fontSize: 18),
  ),
)

Basic Toggle Switch

Create an interactive toggle:

Basic Toggle DemoOpen in new tab ↗
class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}
 
class _MyWidgetState extends State<MyWidget> {
  bool _isEnabled = false;
 
  @override
  Widget build(BuildContext context) {
    return PrimitiveToggleSwitch(
      value: _isEnabled,
      onChanged: (newValue) {
        setState(() {
          _isEnabled = newValue;
        });
      },
    );
  }
}

Vertical Layout

Arrange widgets vertically with spacing:

Vertical Layout DemoOpen in new tab ↗
VStack(
  spacing: 16.0,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Aligned Vertical Layout

Control horizontal alignment:

Aligned Layout DemoOpen in new tab ↗
VStack(
  spacing: 12.0,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Centered'),
    Container(width: 100, height: 50, color: Colors.blue),
    Text('All Centered'),
  ],
)

Layered Widgets

Stack widgets on top of each other:

Layered Widgets DemoOpen in new tab ↗
ZStack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Icon(Icons.star, size: 100, color: Colors.yellow),
  ],
)

Combining Components

Card with Toggle

Card with Toggle DemoOpen in new tab ↗
class SettingCard extends StatefulWidget {
  @override
  State<SettingCard> createState() => _SettingCardState();
}
 
class _SettingCardState extends State<SettingCard> {
  bool _enabled = false;
 
  @override
  Widget build(BuildContext context) {
    return PrimitiveCard(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Enable Feature'),
          PrimitiveToggleSwitch(
            value: _enabled,
            onChanged: (value) {
              setState(() => _enabled = value);
            },
          ),
        ],
      ),
    );
  }
}

VStack with Cards

VStack with Cards DemoOpen in new tab ↗
VStack(
  spacing: 16.0,
  children: [
    PrimitiveCard(child: Text('Card 1')),
    PrimitiveCard(child: Text('Card 2')),
    PrimitiveCard(child: Text('Card 3')),
  ],
)

Card with VStack Content

Card with VStack DemoOpen in new tab ↗
PrimitiveCard(
  elevation: 4.0,
  child: VStack(
    spacing: 12.0,
    children: [
      Text(
        'Title',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      Text('Subtitle'),
      Text('Content goes here...'),
    ],
  ),
)

Common Patterns

Settings List

Settings List DemoOpen in new tab ↗
class SettingsList extends StatefulWidget {
  @override
  State<SettingsList> createState() => _SettingsListState();
}
 
class _SettingsListState extends State<SettingsList> {
  bool _notifications = true;
  bool _darkMode = false;
  bool _autoSave = true;
 
  @override
  Widget build(BuildContext context) {
    return VStack(
      spacing: 12.0,
      children: [
        _buildSettingItem('Notifications', _notifications, (v) {
          setState(() => _notifications = v);
        }),
        _buildSettingItem('Dark Mode', _darkMode, (v) {
          setState(() => _darkMode = v);
        }),
        _buildSettingItem('Auto-save', _autoSave, (v) {
          setState(() => _autoSave = v);
        }),
      ],
    );
  }
 
  Widget _buildSettingItem(
    String label,
    bool value,
    ValueChanged<bool> onChanged,
  ) {
    return PrimitiveCard(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label, style: TextStyle(fontSize: 16)),
          PrimitiveToggleSwitch(value: value, onChanged: onChanged),
        ],
      ),
    );
  }
}

Info Card

Info Card DemoOpen in new tab ↗
Widget buildInfoCard({
  required String title,
  required String description,
  required IconData icon,
}) {
  return PrimitiveCard(
    elevation: 2.0,
    borderRadius: 12.0,
    child: VStack(
      spacing: 8.0,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(icon, size: 40, color: Colors.blue),
        Text(
          title,
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          description,
          style: TextStyle(color: Colors.grey[600]),
        ),
      ],
    ),
  );
}

Badge Overlay

Badge Overlay DemoOpen in new tab ↗
ZStack(
  alignment: Alignment.topRight,
  children: [
    PrimitiveCard(
      child: Container(
        width: 100,
        height: 100,
        child: Center(child: Text('Content')),
      ),
    ),
    Container(
      margin: EdgeInsets.all(8),
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Text(
        'NEW',
        style: TextStyle(
          color: Colors.white,
          fontSize: 10,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

Layout Examples

Grid of Cards

Grid DemoOpen in new tab ↗
GridView.count(
  crossAxisCount: 2,
  padding: EdgeInsets.all(16),
  mainAxisSpacing: 16,
  crossAxisSpacing: 16,
  children: [
    PrimitiveCard(child: Center(child: Text('Card 1'))),
    PrimitiveCard(child: Center(child: Text('Card 2'))),
    PrimitiveCard(child: Center(child: Text('Card 3'))),
    PrimitiveCard(child: Center(child: Text('Card 4'))),
  ],
)

Scrollable List

Scrollable List DemoOpen in new tab ↗
SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: VStack(
      spacing: 16.0,
      children: List.generate(
        20,
        (index) => PrimitiveCard(
          child: Text('Item ${index + 1}'),
        ),
      ),
    ),
  ),
)

Stretched Layout

Stretched Layout DemoOpen in new tab ↗
VStack(
  spacing: 16.0,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    PrimitiveCard(
      child: Container(height: 100, child: Center(child: Text('Full Width'))),
    ),
    PrimitiveCard(
      child: Container(height: 100, child: Center(child: Text('Full Width'))),
    ),
  ],
)

Interactive Examples

Counter with Card

Counter DemoOpen in new tab ↗
class CounterCard extends StatefulWidget {
  @override
  State<CounterCard> createState() => _CounterCardState();
}
 
class _CounterCardState extends State<CounterCard> {
  int _count = 0;
 
  @override
  Widget build(BuildContext context) {
    return PrimitiveCard(
      elevation: 4.0,
      child: VStack(
        spacing: 16.0,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'Counter',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          Text(
            '$_count',
            style: TextStyle(fontSize: 48, color: Colors.blue),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => setState(() => _count--),
                child: Icon(Icons.remove),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: () => setState(() => _count++),
                child: Icon(Icons.add),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Toggle with Feedback

Toggle Feedback DemoOpen in new tab ↗
class FeedbackToggle extends StatefulWidget {
  @override
  State<FeedbackToggle> createState() => _FeedbackToggleState();
}
 
class _FeedbackToggleState extends State<FeedbackToggle> {
  bool _isEnabled = false;
 
  @override
  Widget build(BuildContext context) {
    return PrimitiveCard(
      child: VStack(
        spacing: 12.0,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Feature Status'),
              PrimitiveToggleSwitch(
                value: _isEnabled,
                onChanged: (value) {
                  setState(() => _isEnabled = value);
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        'Feature ${value ? "enabled" : "disabled"}',
                      ),
                      duration: Duration(seconds: 1),
                    ),
                  );
                },
              ),
            ],
          ),
          Text(
            'Status: ${_isEnabled ? "ON" : "OFF"}',
            style: TextStyle(
              color: _isEnabled ? Colors.green : Colors.grey,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

Best Practices

Tips for Using Primitive UI:

  1. Use const constructors where possible for better performance
  2. Keep spacing consistent across your app (e.g., always use 16.0 or 12.0)
  3. Combine with standard widgets - Primitive UI works alongside Flutter’s built-in widgets
  4. Add padding to parents when using PrimitiveCard to show shadows properly
  5. Use CrossAxisAlignment.stretch for full-width children in vertical layouts

Next Steps

Now that you understand the basics, explore more advanced patterns:

Having issues? Check the component documentation for detailed API references and troubleshooting tips.

Last updated on
Animation DemoGetting Started