awesome-uiwidgets/AwesomeUIWidgets/Assets/Scripts/ImageFlowDemo.cs

using System.Collections.Generic;
using uiwidgets;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.rendering;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using Color = Unity.UIWidgets.ui.Color;
using FontStyle = Unity.UIWidgets.ui.FontStyle;
using Random = System.Random;
using Text = Unity.UIWidgets.widgets.Text;
using ui_ = Unity.UIWidgets.widgets.ui_;
using TextStyle = Unity.UIWidgets.painting.TextStyle;

namespace UIWidgetsSample
{
    public class ImageFlowDemo : UIWidgetsPanel
    {
        protected void OnEnable()
        {
            base.OnEnable();
        }

        protected override void main()
        {
            ui_.runApp(new ImageFlowApp());
        }
    }

    class ImageFlowApp : StatelessWidget
    {
        public override Widget build(BuildContext context)
        {
            return new MaterialApp(
                theme: new ThemeData(
                    brightness: Brightness.dark,
                    accentColor: Colors.cyan[600],
                    textTheme: new TextTheme(
                        headline1: new TextStyle(fontSize: 72.0f, fontWeight: FontWeight.bold),
                        headline6: new TextStyle(fontSize: 36.0f, fontStyle: FontStyle.italic),
                        bodyText2: new TextStyle(fontSize: 14.0f)
                    )
                ),
                home: new ImageFlow()
            );
        }
    }


    public static class Utils
    {
        public static List<Color> colors = new List<Color>()
        {
            Colors.red,
            Colors.amber,
            Colors.cyan,
            Colors.brown,
            Colors.purpleAccent,
            Colors.blue
        };

        public static List<string> lotties = new List<string>()
        {
            "1055-world-locations.json",
            "1370-confetti.json",
            "1798-check-animation.json",
            "226-splashy-loader.json",
            "66992-the-flying-rocket.json",
            "77-im-thirsty.json",
            "782-check-mark-success.json",
            "91-mailsent.json",
            "lottieflow-checkbox-06-000000-easey.json",
            "lottieflow-cta-04-000000-easey.json",
            "lottieflow-radio-07-000000-easey.json",
            "lottieflow-social-networks-16-12-000000-easey.json",
            "lottieflow-social-networks-16-7-000000-easey.json",
        };

        internal static Random random = new Random();

        public static T RandomSelect<T>(this List<T> a)
        {
            if (a.isEmpty())
            {
                return default;
            }

            return a[random.Next(a.Count)];
        }
    }

    class ImageFlow : StatefulWidget
    {
        public override State createState()
        {
            return new ImageFlowState();
        }
    }

    class ImageFlowState : State<ImageFlow>
    {
        readonly List<StaggeredTile> _staggeredTiles = new List<StaggeredTile>
        {
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 1),
        };

        readonly List<Widget> _tiles = new List<Widget>
        {
            new LottieTile(Colors.green, "1055-world-locations.json"),
            new LottieTile(Colors.lightBlue, "1370-confetti.json"),
        };

        private int count = 4;

        public override Widget build(BuildContext context)
        {
            return new Scaffold(
                appBar: new AppBar(
                    title: new Text("Flow")
                ),
                body:
                new Column(
                    children: new List<Widget>()
                    {
                        new Expanded(child:
                            new Container(
                                child:
                                StaggeredGridView.count(
                                    crossAxisCount: count,
                                    staggeredTiles: _staggeredTiles,
                                    mainAxisSpacing: 3,
                                    crossAxisSpacing: 3,
                                    padding: EdgeInsets.all(4),
                                    children: _tiles
                                )
                            )),
                        new Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: new List<Widget>()
                            {
                                new Expanded(
                                    child:
                                    new MaterialButton(
                                        color: Colors.amber,
                                        child: new Text("Expand Column", style: new TextStyle(fontSize: 10)),
                                        onPressed: () => { setState(() => { count++; }); })
                                ),
                                new Expanded(child:
                                    new MaterialButton(
                                        color: Colors.blue,
                                        child: new Text("Shrink Column", style: new TextStyle(fontSize: 10)),
                                        onPressed: () => { setState(() => { count--; }); })
                                ),
                                new Expanded(child:
                                    new MaterialButton(
                                        color: Colors.green,
                                        child: new Text("Remove Tile", style: new TextStyle(fontSize: 10)),
                                        onPressed: () =>
                                        {
                                            if (!_tiles.isEmpty())
                                            {
                                                setState(() =>
                                                {
                                                    _tiles.RemoveAt(0);
                                                    _staggeredTiles.RemoveAt(0);
                                                });
                                            }
                                        })
                                ),
                                new Expanded(child:
                                    new MaterialButton(
                                        color: Colors.pink,
                                        child: new Text("Add Tile", style: new TextStyle(fontSize: 10)),
                                        onPressed: () =>
                                        {
                                            setState(() =>
                                            {
                                                _tiles.Add(
                                                    new LottieTile(
                                                        Utils.colors.RandomSelect(),
                                                        Utils.lotties.RandomSelect()
                                                    )
                                                );
                                                _staggeredTiles.Add(
                                                    StaggeredTile.count(
                                                        Utils.random.Next(2) + 1,
                                                        Utils.random.Next(2) + 1)
                                                );
                                            });
                                        })
                                ),
                            }
                        )
                    }
                )
            );
        }
    }

    internal class LottieTile : StatefulWidget
    {
        internal LottieTile(Color backgroundColor, string path)
        {
            this.backgroundColor = backgroundColor;
            this.path = path;
        }

        public readonly Color backgroundColor;
        public readonly string path;


        public override State createState()
        {
            return new LottieTileState();
        }
    }

    internal class LottieTileState : State<LottieTile>
    {
        public override Widget build(BuildContext context)
        {
            return new Card(
                color: widget.backgroundColor,
                child: new InkWell(
                    onTap: () => { },
                    child: new Center(
                        child: new Padding(
                            padding: EdgeInsets.all(4),
                            child: new Lottie(widget.path, size: new Size(100, 100))
                        )
                    )
                )
            );
        }
    }
}