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.ui; using Unity.UIWidgets.widgets; using Color = Unity.UIWidgets.ui.Color; using Image = Unity.UIWidgets.widgets.Image; using Random = System.Random; using TextStyle = Unity.UIWidgets.painting.TextStyle; using ui_ = Unity.UIWidgets.widgets.ui_; 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 Card( child: new ImageFlow(), color: new Color(0xAF000000) ) ); } } public static class Utils { public static List colors = new List() { Colors.red, Colors.amber, Colors.cyan, Colors.brown, Colors.purpleAccent, Colors.blue }; public static List lotties = new List() { "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", }; public static List localImages = new List() { "heroSample/cube2.jpeg", "heroSample/sphere2.jpeg", "heroSample/capture2.jpeg", "heroSample/cylinder2.jpeg", }; public static List imageUrls = new List() { "https://cdn.pixabay.com/photo/2016/10/21/14/50/plouzane-1758197_960_720.jpg", "https://cdn.pixabay.com/photo/2016/11/16/10/59/mountains-1828596_960_720.jpg", "https://cdn.pixabay.com/photo/2017/08/24/22/37/gyrfalcon-2678684_960_720.jpg", "https://cdn.pixabay.com/photo/2013/01/17/08/25/sunset-75159_960_720.jpg", "https://cdn.pixabay.com/photo/2021/04/06/21/08/crown-anemone-6157488_960_720.jpg", "https://cdn.pixabay.com/photo/2021/05/10/10/46/yellow-wall-6243164_960_720.jpg", }; internal static Random random = new Random(); public static bool UseImage = true; public static bool UseLocalImage = false; public static bool UseAmountSlider = false; public static T RandomSelect(this List 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 { public ImageFlowState() { UpdateTiles(); } private readonly List _staggeredTiles = new List(); private readonly List _tiles = new List(); private int count = 4; private int tileCount = 30; public void UpdateTiles() { while (_tiles.Count < tileCount) { if (Utils.UseImage) { if (Utils.UseLocalImage) { _tiles.Add( new ImageTile( Utils.colors.RandomSelect(), Utils.localImages.RandomSelect(), true ) ); } else { _tiles.Add( new ImageTile( Utils.colors.RandomSelect(), Utils.imageUrls.RandomSelect() ) ); } } else { _tiles.Add( new LottieTile( Utils.colors.RandomSelect(), Utils.lotties.RandomSelect() ) ); } _staggeredTiles.Add( StaggeredTile.count( Utils.random.Next(2) + 1, Utils.random.Next(2) + 1) ); } while (_tiles.Count > tileCount) { _tiles.RemoveAt(0); _staggeredTiles.RemoveAt(0); } } public override Widget build(BuildContext context) { var result = new List() { new Expanded(child: new Container( child: StaggeredGridView.count( crossAxisCount: count, staggeredTiles: _staggeredTiles, mainAxisSpacing: 3, crossAxisSpacing: 3, padding: EdgeInsets.all(4), children: _tiles ) )), new Slider( activeColor: Colors.blue, inactiveColor: Colors.white, value: count, min: 2, max: 8, divisions: 6, label: count.ToString(), onChanged: v => { int newCount = (int) v; if (newCount != count) { setState(() => { count = newCount; }); } } ), }; if (Utils.UseAmountSlider) { result.Add( new Slider( activeColor: Colors.blue, inactiveColor: Colors.white, value: tileCount, min: 0, max: 20, divisions: 20, label: tileCount.ToString(), onChanged: v => { int newCount = (int) v; if (newCount != tileCount) { setState(() => { tileCount = newCount; UpdateTiles(); }); } } ) ); } return new Column(children: result); } } internal class ImageTile : StatefulWidget { internal ImageTile(Color backgroundColor, string path, bool local = false) { this.backgroundColor = backgroundColor; this.path = path; this.local = local; } public readonly Color backgroundColor; public readonly string path; public readonly bool local; public override State createState() { return new ImageTileState(); } } internal class ImageTileState : State { public override Widget build(BuildContext context) { if (widget.local) { return new Container( color: widget.backgroundColor, child: Image.file( widget.path, fit: BoxFit.cover ) ); } return new Card( color: widget.backgroundColor, child: Image.network( widget.path, fit: BoxFit.cover ) ); } } 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 { 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)) ) ) ) ); } } }