Flutter Responsive Card Game

Responsive design utilities specifically built for card-based mobile games.

Built for Sultan's Gambit - A strategic Ottoman-themed card game.

Features

  • 📱 Device-aware scaling - iPhone SE to Pro Max
  • 🎴 Standardized card dimensions - Maintains 2:3 aspect ratio
  • 📐 Grid layout helpers - Card collections and deck builders
  • 🎯 Production-tested - Powers 150+ card game
  • 🔧 Flexible baseline - iPhone 16 reference
  • ⚡ Lightweight - No external dependencies

Installation

dependencies:
  flutter_responsive_card_game: ^0.1.0

Quick Start

import 'package:flutter_responsive_card_game/flutter_responsive_card_game.dart';

// Scale dimensions
Container(
  width: ResponsiveUtils.scaleWidth(context, 100),
  height: ResponsiveUtils.scaleHeight(context, 150),
)

// Get card dimensions
final cardDims = ResponsiveUtils.getBattlefieldCardDimensions(context);
Container(
  width: cardDims.width,
  height: cardDims.height,
)

Device Categories

Category Height Devices
compact ≤750px iPhone SE, Mini
standard 751-920px iPhone 16, 11 Pro
large >920px Pro Max models

Card Collection Grids

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: ResponsiveUtils.getCollectionGridColumnCount(context),
    childAspectRatio: ResponsiveUtils.getCollectionGridAspectRatio(context),
    crossAxisSpacing: ResponsiveUtils.getCollectionGridSpacing(context),
    mainAxisSpacing: ResponsiveUtils.getCollectionGridSpacing(context),
  ),
)

Credits

Built for Sultan's Gambit and open sourced for the Flutter community.

License

MIT License

Libraries

flutter_responsive_card_game
Responsive design utilities for card-based mobile games