### Flutter Onboarding Screen with Stacked Card Carousel

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Implements a full onboarding screen using StackedCardCarousel. This example handles page transitions, custom card designs, and navigation buttons ('Next', 'Skip'). It depends on the 'stacked_card_carousel' Flutter package.

```dart
import 'package:flutter/material.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';

class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final PageController _controller = PageController();
  int _currentIndex = 0;
  final int _totalPages = 4;

  void _onPageChanged(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  void _nextPage() {
    if (_currentIndex < _totalPages - 1) {
      _controller.animateToPage(
        _currentIndex + 1,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    } else {
      // Navigate to main app
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    }
  }

  void _skip() {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) => HomeScreen()),
    );
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> onboardingCards = [
      _buildOnboardingCard(
        icon: Icons.wb_sunny,
        title: 'Welcome',
        description: 'Start your journey with our amazing app',
        color: Colors.orange,
      ),
      _buildOnboardingCard(
        icon: Icons.favorite,
        title: 'Save Favorites',
        description: 'Keep track of everything you love',
        color: Colors.red,
      ),
      _buildOnboardingCard(
        icon: Icons.share,
        title: 'Share Content',
        description: 'Connect with friends and family',
        color: Colors.blue,
      ),
      _buildOnboardingCard(
        icon: Icons.check_circle,
        title: 'Get Started',
        description: 'Everything is ready for you',
        color: Colors.green,
      ),
    ];

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Step ${_currentIndex + 1} of $_totalPages',
                    style: TextStyle(fontSize: 16, color: Colors.grey),
                  ),
                  TextButton(
                    onPressed: _skip,
                    child: Text('Skip'),
                  ),
                ],
              ),
            ),
            Expanded(
              child: StackedCardCarousel(
                items: onboardingCards,
                type: StackedCardCarouselType.fadeOutStack,
                pageController: _controller,
                onPageChanged: _onPageChanged,
                initialOffset: 40.0,
                spaceBetweenItems: MediaQuery.of(context).size.height * 0.6,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(24.0),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(
                      _totalPages,
                      (index) => Container(
                        margin: EdgeInsets.symmetric(horizontal: 4),
                        width: _currentIndex == index ? 12 : 8,
                        height: 8,
                        decoration: BoxDecoration(
                          color: _currentIndex == index
                              ? Colors.blue
                              : Colors.grey[300],
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 24),
                  SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton(
                      onPressed: _nextPage,
                      child: Text(
                        _currentIndex == _totalPages - 1
                            ? 'Get Started'
                            : 'Next',
                        style: TextStyle(fontSize: 18),
                      ),
                      style: ElevatedButton.styleFrom(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildOnboardingCard({
    required IconData icon,
    required String title,
    required String description,
    required Color color,
  }) {
    return Card(
      elevation: 8.0,
      shape: RoundedRectangleBorder(

```

--------------------------------

### StackedCardCarouselType Enum and Example Usage in Flutter

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Defines the StackedCardCarouselType enum for animation effects and demonstrates its usage within a StatefulWidget to toggle between 'cardsStack' and 'fadeOutStack' animations. This snippet requires the 'stacked_card_carousel' package.

```dart
import 'package:stacked_card_carousel/stacked_card_carousel.dart';
import 'package:flutter/material.dart';

// Enum defining animation types
// StackedCardCarouselType.cardsStack: Default type with scaling stacking effect
// StackedCardCarouselType.fadeOutStack: Cards fade out and scale as they stack

class AnimationTypeToggle extends StatefulWidget {
  @override
  _AnimationTypeToggleState createState() => _AnimationTypeToggleState();
}

class _AnimationTypeToggleState extends State<AnimationTypeToggle> {
  StackedCardCarouselType _currentType = StackedCardCarouselType.cardsStack;

  void _toggleType() {
    setState(() {
      _currentType = _currentType == StackedCardCarouselType.cardsStack
          ? StackedCardCarouselType.fadeOutStack
          : StackedCardCarouselType.cardsStack;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Type Toggle'),
        actions: [
          IconButton(
            icon: Icon(Icons.swap_horiz),
            onPressed: _toggleType,
          ),
        ],
      ),
      body: StackedCardCarousel(
        items: [
          _buildDemoCard('Card 1', Colors.red),
          _buildDemoCard('Card 2', Colors.green),
          _buildDemoCard('Card 3', Colors.blue),
          _buildDemoCard('Card 4', Colors.yellow),
        ],
        type: _currentType,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _toggleType,
        label: Text(
          _currentType == StackedCardCarouselType.cardsStack
              ? 'Switch to Fade Out'
              : 'Switch to Stack',
        ),
        icon: Icon(Icons.animation),
      ),
    );
  }

  Widget _buildDemoCard(String text, Color color) {
    return Card(
      elevation: 4.0,
      child: Container(
        width: 300,
        height: 350,
        color: color,
        child: Center(
          child: Text(
            text,
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### StackedCardCarousel Fade Out Animation (Dart)

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Configures the StackedCardCarousel widget to use a fade-out animation effect instead of the default stacking animation. This requires setting the 'type' property to StackedCardCarouselType.fadeOutStack. The example generates a list of styled cards for demonstration.

```dart
import 'package:flutter/material.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';

class FadeOutCarouselExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Widget> cards = List.generate(
      5,
      (index) => Card(
        elevation: 8.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16.0),
        ),
        child: Container(
          width: 320,
          height: 400,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.purple],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: Center(
            child: Text(
              'Card ${index + 1}',
              style: TextStyle(fontSize: 32, color: Colors.white),
            ),
          ),
        ),
      ),
    );

    return Scaffold(
      body: StackedCardCarousel(
        items: cards,
        type: StackedCardCarouselType.fadeOutStack,
      ),
    );
  }
}
```

--------------------------------

### Import StackedCardCarousel Package in Dart

Source: https://github.com/grihlo/stacked_card_carousel/blob/master/README.md

This snippet shows how to import the stacked_card_carousel package into your Dart file. Ensure the package is added as a dependency in your pubspec.yaml.

```dart
import 'package:stacked_card_carousel/stacked_card_carousel.dart';
```

--------------------------------

### Use StackedCardCarousel Widget in Flutter

Source: https://github.com/grihlo/stacked_card_carousel/blob/master/README.md

This snippet demonstrates the basic usage of the StackedCardCarousel widget within a Flutter application. It requires a list of widgets to display as cards.

```dart
StackedCardCarousel(
    items: cards,
);
```

--------------------------------

### Flutter: Custom Page Controller and Callbacks

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Implement a custom PageController to programmatically navigate between carousel pages and handle page change events. This allows for advanced control over the carousel's state and user interaction.

```dart
import 'package:flutter/material.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';

class CustomControllerExample extends StatefulWidget {
  @override
  _CustomControllerExampleState createState() =>
      _CustomControllerExampleState();
}

class _CustomControllerExampleState extends State<CustomControllerExample> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _onPageChanged(int pageIndex) {
    setState(() {
      _currentPage = pageIndex;
    });
    print('Current page: $pageIndex');
  }

  void _goToPage(int page) {
    _pageController.animateToPage(
      page,
      duration: Duration(milliseconds: 400),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> cards = List.generate(
      4,
      (index) => Card(
        elevation: 4.0,
        child: Container(
          width: 300,
          height: 350,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.star, size: 80, color: Colors.white),
              SizedBox(height: 16),
              Text(
                'Page ${index + 1}',
                style: TextStyle(fontSize: 28, color: Colors.white),
              ),
            ],
          ),
        ),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Page: ${_currentPage + 1}/${cards.length}'),
      ),
      body: StackedCardCarousel(
        items: cards,
        pageController: _pageController,
        onPageChanged: _onPageChanged,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: List.generate(
            cards.length,
            (index) => ElevatedButton(
              onPressed: () => _goToPage(index),
              child: Text('${index + 1}'),
            ),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### HomeScreen Widget Structure in Flutter

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Represents the main screen of the application. It uses a Scaffold widget with an AppBar and a simple body displaying a welcome message. This serves as a basic layout for a Flutter application that might integrate the carousel.

```dart
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Welcome to the app!')),
    );
  }
}
```

--------------------------------

### Flutter: Customized Spacing and Offset

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Configure the spacing between cards and the initial offset for the stacked card carousel to customize its visual appearance. This is useful for adapting the carousel to different screen sizes and content.

```dart
import 'package:flutter/material.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';

class CustomSpacingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    final List<Widget> largeCards = [
      _buildCustomCard('Explore', Icons.explore, Colors.teal),
      _buildCustomCard('Discover', Icons.tour, Colors.orange),
      _buildCustomCard('Travel', Icons.flight, Colors.indigo),
      _buildCustomCard('Adventure', Icons.landscape, Colors.green),
    ];

    return Scaffold(
      appBar: AppBar(title: Text('Custom Spacing Demo')),
      body: StackedCardCarousel(
        items: largeCards,
        type: StackedCardCarouselType.cardsStack,
        initialOffset: 60.0, // Larger top offset
        spaceBetweenItems: screenHeight * 0.5, // 50% of screen height
        applyTextScaleFactor: true, // Scale with accessibility settings
      ),
    );
  }

  Widget _buildCustomCard(String title, IconData icon, Color color) {
    return Card(
      elevation: 8.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      child: Container(
        width: 340,
        height: 450,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 100, color: Colors.white),
            SizedBox(height: 24),
            Text(
              title,
              style: TextStyle(
                fontSize: 36,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```

--------------------------------

### Flutter Interactive Cards in Stacked Carousel

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

This Dart code defines a Flutter widget that displays a carousel of interactive cards. Each card includes a profile picture, user details, a 'Message' button, and a favorite icon. The favorite icon's state is managed using StatefulWidget. Dependencies include the flutter/material.dart and stacked_card_carousel packages.

```dart
import 'package:flutter/material.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';

class InteractiveCardsExample extends StatefulWidget {
  @override
  _InteractiveCardsExampleState createState() =>
      _InteractiveCardsExampleState();
}

class _InteractiveCardsExampleState extends State<InteractiveCardsExample> {
  final List<bool> _favorites = List.generate(6, (_) => false);

  @override
  Widget build(BuildContext context) {
    final List<Widget> interactiveCards = List.generate(
      6,
      (index) => Card(
        elevation: 6.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        child: Container(
          width: 320,
          height: 380,
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50,
                backgroundColor: Colors.blue[100],
                child: Icon(Icons.person, size: 60, color: Colors.blue),
              ),
              SizedBox(height: 20),
              Text(
                'User ${index + 1}',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 12),
              Text(
                'Description for user profile card ${index + 1}',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16, color: Colors.grey[600]),
              ),
              SizedBox(height: 24),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton.icon(
                    icon: Icon(Icons.message),
                    label: Text('Message'),
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Messaging User ${index + 1}')),
                      );
                    },
                  ),
                  IconButton(
                    icon: Icon(
                      _favorites[index] ? Icons.favorite : Icons.favorite_border,
                      color: _favorites[index] ? Colors.red : Colors.grey,
                      size: 32,
                    ),
                    onPressed: () {
                      setState(() {
                        _favorites[index] = !_favorites[index];
                      });
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

    return Scaffold(
      appBar: AppBar(title: Text('Interactive Cards')),
      body: StackedCardCarousel(
        items: interactiveCards,
        type: StackedCardCarouselType.fadeOutStack,
      ),
    );
  }
}

```

--------------------------------

### Stacked Card Carousel Widget Definition in Flutter

Source: https://context7.com/grihlo/stacked_card_carousel/llms.txt

Defines the visual structure and content of a single card within the carousel. It includes styling for the card's background, padding, gradient, and layout for an icon, title, and description. This widget is typically used to represent individual items in the carousel.

```dart
borderRadius: BorderRadius.circular(24),
      ),
      child: Container(
        width: 340,
        height: 440,
        padding: EdgeInsets.all(32),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [color, color.withOpacity(0.7)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(24),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 120, color: Colors.white),
            SizedBox(height: 32),
            Text(
              title,
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            SizedBox(height: 16),
            Text(
              description,
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                color: Colors.white.withOpacity(0.9),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.