import 'package:dynamic_layouts/dynamic_layouts.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';

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

/// A staggered layout example. Clicking the upper-right button will change
/// between a grid with a fixed cross axis count and one with a main axis
/// extent.
class StaggeredExample extends StatefulWidget {
  /// Creates a [StaggeredExample].
  const StaggeredExample({super.key});

  @override
  State<StaggeredExample> createState() => _StaggeredExampleState();
}

class _StaggeredExampleState extends State<StaggeredExample> {
  final List<Widget> children = List<Widget>.generate(
    50,
    (int index) => _DynamicSizedTile(index: index),
  );

  bool fixedCrossAxisCount = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Staggered Layout Example'),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 50.0),
            child: TextButton(
              onPressed: () {
                setState(() {
                  fixedCrossAxisCount = !fixedCrossAxisCount;
                });
              },
              child: Text(
                fixedCrossAxisCount ? 'FIXED' : 'MAX',
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            children.add(_DynamicSizedTile(index: children.length));
          });
        },
        child: const Icon(Icons.plus_one),
      ),
      body: _buildGridView(),
    );
  }

  Widget _buildGridView() {
    Widget resultWidget = CustomScrollView(
      slivers: [
        DynamicSliverGrid(
          gridDelegate: DynamicSliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 20,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return _DynamicSizedTile(index: index);
            },
            childCount: 100,
          ),
        ),
        SliverList(
            delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Container(
              width: double.infinity,
              height: 60,
              color: Colors.red,
            );
          },
          childCount: 10,
        )),
        DynamicSliverGrid(
          gridDelegate: DynamicSliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 20,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return _DynamicSizedTile(index: index);
            },
            childCount: 100,
          ),
        ),
      ],
    );
    return resultWidget;
  }
}

class _DynamicSizedTile extends StatelessWidget {
  const _DynamicSizedTile({required this.index});

  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: index % 3 * 50 + 20,
      color: Colors.amber[(index % 8 + 1) * 100],
      child: Text('Index $index'),
    );
  }
}