using System.Collections.Generic; 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 Image = Unity.UIWidgets.widgets.Image; using TextStyle = Unity.UIWidgets.painting.TextStyle; namespace UIWidgetsSample { public class AsScreenSample : UIWidgetsSamplePanel { protected override Widget createWidget() { return new WidgetsApp( home: new AsScreenWidget(), pageRouteBuilder: this.pageRouteBuilder); } public class AsScreenWidget : StatefulWidget { public AsScreenWidget(Key key = null) : base(key) { } public override State createState() { return new _AsScreenState(); } } class _AsScreenState : State { const float headerHeight = 50.0f; Widget _buildHeader(BuildContext context) { return new Container( padding: EdgeInsets.only(left: 16.0f, right: 8.0f), height: headerHeight, color: CLColors.header, child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: new List { new Container( child: new Text( "All Assets", style: new TextStyle( fontSize: 16, color: Color.fromARGB(100, 255, 255, 0) ) ) ), new CustomButton( padding: EdgeInsets.only(0.0f, 0.0f, 16.0f, 0.0f), child: new Icon( Icons.keyboard_arrow_down, size: 18.0f, color: CLColors.icon2 ) ), new Container( decoration: new BoxDecoration( color: CLColors.white, borderRadius: BorderRadius.all(3) ), width: 320, height: 36, padding: EdgeInsets.all(10.0f), margin: EdgeInsets.only(right: 4), child: new EditableText( maxLines: 1, selectionControls: MaterialUtils.materialTextSelectionControls, controller: new TextEditingController("Type here to search assets"), focusNode: new FocusNode(), style: new TextStyle( fontSize: 16 ), selectionColor: Color.fromARGB(255, 255, 0, 0), cursorColor: Color.fromARGB(255, 0, 0, 0) ) ), new Container( decoration: new BoxDecoration( color: CLColors.background4, borderRadius: BorderRadius.all(2) ), width: 36, height: 36, child: new Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: new List { new CustomButton( padding: EdgeInsets.only(8.0f, 0.0f, 8.0f, 0.0f), child: new Icon( Icons.search, size: 18.0f, color: CLColors.white ) ) } ) ), new Container( margin: EdgeInsets.only(left: 16, right: 16), child: new Text( "Learn Game Development", style: new TextStyle( fontSize: 12, color: CLColors.white ) ) ), new Container( decoration: new BoxDecoration( border: Border.all( color: CLColors.white ) ), margin: EdgeInsets.only(right: 16), padding: EdgeInsets.all(4), child: new Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: new List { new Text( "Plus/Pro", style: new TextStyle( fontSize: 11, color: CLColors.white ) ) } ) ), new Container( margin: EdgeInsets.only(right: 16), child: new Text( "Impressive New Assets", style: new TextStyle( fontSize: 12, color: CLColors.white ) ) ), new Container( child: new Text( "Shop On Old Store", style: new TextStyle( fontSize: 12, color: CLColors.white ) ) ), } ) ); } Widget _buildFooter(BuildContext context) { return new Container( color: CLColors.header, margin: EdgeInsets.only(top: 50), height: 90, child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: new List { new Container( margin: EdgeInsets.only(right: 10), child: new Text( "Copyright © 2018 Unity Technologies", style: new TextStyle( fontSize: 12, color: CLColors.text9 ) ) ), new Container( margin: EdgeInsets.only(right: 10), child: new Text( "All prices are exclusive of tax", style: new TextStyle( fontSize: 12, color: CLColors.text9 ) ) ), new Container( margin: EdgeInsets.only(right: 10), child: new Text( "Terms of Service and EULA", style: new TextStyle( fontSize: 12, color: CLColors.text10 ) ) ), new Container( child: new Text( "Cookies", style: new TextStyle( fontSize: 12, color: CLColors.text10 ) ) ), } ) ); } Widget _buildBanner(BuildContext context) { return new Container( height: 450, color: CLColors.white, child: Image.network( "https://d2ujflorbtfzji.cloudfront.net/banner/5c57178c-4be6-4903-953b-85125bfb7154.jpg", fit: BoxFit.cover ) ); } Widget _buildTopAssetsRow(BuildContext context, string title) { var testCard = new AssetCard( "AI Template", "INVECTOR", 45.0f, 36.0f, true, "https://d2ujflorbtfzji.cloudfront.net/key-image/46dc65c1-f605-4ccb-97e0-3d60b28cfdfe.jpg" ); return new Container( margin: EdgeInsets.only(left: 98), child: new Column( children: new List { new Container( child: new Container( margin: EdgeInsets.only(top: 50, bottom: 20), child: new Row( crossAxisAlignment: CrossAxisAlignment.baseline, children: new List { new Container( child: new Text( title, style: new TextStyle( fontSize: 24, color: CLColors.black ) ) ), new Container( margin: EdgeInsets.only(left: 15), child: new Text( "See More", style: new TextStyle( fontSize: 16, color: CLColors.text4 ) ) ) }) ) ), new Row( children: new List { testCard, testCard, testCard, testCard, testCard, testCard } ) } )); } bool _onNotification(ScrollNotification notification, BuildContext context) { return true; } Widget _buildContentList(BuildContext context) { return new NotificationListener( onNotification: (ScrollNotification notification) => { this._onNotification(notification, context); return true; }, child: new Flexible( child: new ListView( physics: new AlwaysScrollableScrollPhysics(), children: new List { this._buildBanner(context), this._buildTopAssetsRow(context, "Recommanded For You"), this._buildTopAssetsRow(context, "Beach Day"), this._buildTopAssetsRow(context, "Top Free Packages"), this._buildTopAssetsRow(context, "Top Paid Packages"), this._buildFooter(context) } ) ) ); } public override Widget build(BuildContext context) { var container = new Container( color: CLColors.background3, child: new Container( color: CLColors.background3, child: new Column( children: new List { this._buildHeader(context), this._buildContentList(context), } ) ) ); return container; } } public class AssetCard : StatelessWidget { public AssetCard( string name, string category, float price, float priceDiscount, bool showBadge, string imageSrc ) { this.name = name; this.category = category; this.price = price; this.priceDiscount = priceDiscount; this.showBadge = showBadge; this.imageSrc = imageSrc; } public string name; public string category; public float price; public float priceDiscount; public bool showBadge; public string imageSrc; public override Widget build(BuildContext context) { var card = new Container( margin: EdgeInsets.only(right: 45), child: new Container( child: new Column( children: new List { new Container( decoration: new BoxDecoration( color: CLColors.white, borderRadius: BorderRadius.only(topLeft: 3, topRight: 3) ), width: 200, height: 124, child: Image.network( this.imageSrc, fit: BoxFit.fill ) ), new Container( color: CLColors.white, width: 200, height: 86, padding: EdgeInsets.fromLTRB(14, 12, 14, 8), child: new Column( crossAxisAlignment: CrossAxisAlignment.baseline, children: new List { new Container( height: 18, padding: EdgeInsets.only(top: 3), child: new Text(this.category, style: new TextStyle( fontSize: 11, color: CLColors.text5 ) ) ), new Container( height: 20, padding: EdgeInsets.only(top: 2), child: new Text(this.name, style: new TextStyle( fontSize: 14, color: CLColors.text6 ) ) ), new Container( height: 22, padding: EdgeInsets.only(top: 4), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: new List { new Container( child: new Row( children: new List { new Container( margin: EdgeInsets.only(right: 10), child: new Text( "$" + this.price, style: new TextStyle( fontSize: 14, color: CLColors.text7, decoration: TextDecoration.lineThrough ) ) ), new Container( child: new Text( "$" + this.priceDiscount, style: new TextStyle( fontSize: 14, color: CLColors.text8 ) ) ) }) ), this.showBadge ? new Container( width: 80, height: 18, color: CLColors.black, child: new Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: new List { new Text( "Plus/Pro", style: new TextStyle( fontSize: 11, color: CLColors.white ) ) } ) ) : new Container() } ) ) } ) ) } ) ) ); return card; } } public class EventsWaterfallScreen : StatefulWidget { public EventsWaterfallScreen(Key key = null) : base(key: key) { } public override State createState() { return new _EventsWaterfallScreenState(); } } class _EventsWaterfallScreenState : State { const float headerHeight = 80.0f; float _offsetY = 0.0f; Widget _buildHeader(BuildContext context) { return new Container( padding: EdgeInsets.only(left: 16.0f, right: 8.0f), // color: CLColors.blue, height: headerHeight - this._offsetY, child: new Row( children: new List { new Flexible( flex: 1, fit: FlexFit.tight, child: new Text( "Today", style: new TextStyle( fontSize: (34.0f / headerHeight) * (headerHeight - this._offsetY), color: CLColors.white ) )), new CustomButton( padding: EdgeInsets.only(8.0f, 0.0f, 8.0f, 0.0f), child: new Icon( Icons.notifications, size: 18.0f, color: CLColors.icon2 ) ), new CustomButton( padding: EdgeInsets.only(8.0f, 0.0f, 16.0f, 0.0f), child: new Icon( Icons.account_circle, size: 18.0f, color: CLColors.icon2 ) ) } ) ); } bool _onNotification(ScrollNotification notification, BuildContext context) { float pixels = notification.metrics.pixels; if (pixels >= 0.0) { if (pixels <= headerHeight) { this.setState(() => { this._offsetY = pixels / 2.0f; }); } } else { if (this._offsetY != 0.0) { this.setState(() => { this._offsetY = 0.0f; }); } } return true; } Widget _buildContentList(BuildContext context) { return new NotificationListener( onNotification: (ScrollNotification notification) => { this._onNotification(notification, context); return true; }, child: new Flexible( child: new Container( // color: CLColors.green, child: ListView.builder( itemCount: 20, itemExtent: 100, physics: new AlwaysScrollableScrollPhysics(), itemBuilder: (BuildContext context1, int index) => { return new Container( color: Color.fromARGB(255, (index * 10) % 256, (index * 20) % 256, (index * 30) % 256) ); } ) ) ) ); } public override Widget build(BuildContext context) { var container = new Container( // color: CLColors.background1, child: new Container( // color: CLColors.background1, child: new Column( children: new List { this._buildHeader(context), this._buildContentList(context) } ) ) ); return container; } } } }