flutter_chain_scroll 0.0.1

flutter_chain_scroll: ^0.0.1 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_chain_scroll/flutter_chain_scroll.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chain Scroll Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const ChainScrollDemo(),
    );
  }
}

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

  final List<Map<String, dynamic>> items = const [
    {'name': 'Item 1', 'height': 120.0},
    {'name': 'Item 2', 'height': 160.0},
    {'name': 'Item 3', 'height': 140.0},
    {'name': 'Item 4', 'height': 110.0},
    {'name': 'Item 5', 'height': 130.0},
    {'name': 'Item 6', 'height': 100.0},
    {'name': 'Item 7', 'height': 150.0},
    {'name': 'Item 8', 'height': 100.0},
  ];

  Widget _buildCard(Map<String, dynamic> item, int index) {
    final itemHeight = item['height'] as double;
    return Container(
      height: itemHeight,
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length].shade400,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.2),
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.layers,
              size: 32,
              color: Colors.white,
            ),
            const SizedBox(height: 8),
            Text(
              item['name'] as String,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 4),
            Text(
              '${itemHeight.toInt()}px',
              style: const TextStyle(
                fontSize: 14,
                color: Colors.white70,
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chain Scroll Demo'),
        backgroundColor: Colors.blue.shade700,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 200,
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.blue.shade300,
                    Colors.purple.shade300,
                    Colors.pink.shade300,
                  ],
                ),
              ),
              child: const Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.link,
                      size: 80,
                      color: Colors.white,
                    ),
                    SizedBox(height: 20),
                    Text(
                      'More content above the chain list',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 20),
            ChainScrollView<Map<String, dynamic>>(
              items: items,
              itemBuilder: (context, index, [item]) {
                return _buildCard(item!, index);
              },
              gap: 1.0,
            ),
            Container(
              height: 200,
              width: double.infinity,
              color: Colors.grey.shade100,
              child: const Center(
                child: Text(
                  'More content under the chain list',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.grey,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}