forked from Norbert515/flutter_ide
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
1 lines (1 loc) · 20.3 KB
/
Copy pathdocs.html
File metadata and controls
1 lines (1 loc) · 20.3 KB
1
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">.lst-kix_6pez2mrsmpke-8>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-8,lower-roman) ". "}.lst-kix_6pez2mrsmpke-7>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-7,lower-latin) ". "}.lst-kix_tkvuoa3u51vt-0>li:before{content:"- "}.lst-kix_6pez2mrsmpke-6>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-6,decimal) ". "}ol.lst-kix_6pez2mrsmpke-3.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-3 0}.lst-kix_6pez2mrsmpke-5>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-5}.lst-kix_6pez2mrsmpke-4>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-4,lower-latin) ") "}.lst-kix_6pez2mrsmpke-3>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-3,decimal) ") "}.lst-kix_6pez2mrsmpke-5>li:before{content:"" counter(lst-ctn-kix_6pez2mrsmpke-5,lower-roman) ") "}.lst-kix_tkvuoa3u51vt-2>li:before{content:"- "}ol.lst-kix_6pez2mrsmpke-6.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-6 0}.lst-kix_tkvuoa3u51vt-1>li:before{content:"- "}.lst-kix_6pez2mrsmpke-0>li:before{content:"(" counter(lst-ctn-kix_6pez2mrsmpke-0,decimal) ") "}.lst-kix_6pez2mrsmpke-0>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-0}.lst-kix_6pez2mrsmpke-1>li:before{content:"(" counter(lst-ctn-kix_6pez2mrsmpke-1,lower-latin) ") "}.lst-kix_6pez2mrsmpke-2>li:before{content:"(" counter(lst-ctn-kix_6pez2mrsmpke-2,lower-roman) ") "}.lst-kix_6pez2mrsmpke-4>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-4}ol.lst-kix_6pez2mrsmpke-2.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-2 0}ul.lst-kix_pa9w41pppx9-2{list-style-type:none}ul.lst-kix_pa9w41pppx9-3{list-style-type:none}ul.lst-kix_pa9w41pppx9-0{list-style-type:none}ul.lst-kix_pa9w41pppx9-1{list-style-type:none}ol.lst-kix_6pez2mrsmpke-5.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-5 0}ul.lst-kix_pa9w41pppx9-8{list-style-type:none}ul.lst-kix_pa9w41pppx9-6{list-style-type:none}ul.lst-kix_pa9w41pppx9-7{list-style-type:none}ul.lst-kix_pa9w41pppx9-4{list-style-type:none}ul.lst-kix_pa9w41pppx9-5{list-style-type:none}.lst-kix_5jrr22tff16x-0>li:before{content:"- "}.lst-kix_5jrr22tff16x-1>li:before{content:"- "}ul.lst-kix_5jrr22tff16x-0{list-style-type:none}.lst-kix_5jrr22tff16x-4>li:before{content:"- "}ol.lst-kix_6pez2mrsmpke-8.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-8 0}ul.lst-kix_tkvuoa3u51vt-0{list-style-type:none}.lst-kix_5jrr22tff16x-3>li:before{content:"- "}.lst-kix_5jrr22tff16x-5>li:before{content:"- "}ul.lst-kix_tkvuoa3u51vt-2{list-style-type:none}.lst-kix_5jrr22tff16x-2>li:before{content:"- "}ul.lst-kix_5jrr22tff16x-4{list-style-type:none}.lst-kix_5jrr22tff16x-6>li:before{content:"- "}ul.lst-kix_tkvuoa3u51vt-1{list-style-type:none}ul.lst-kix_5jrr22tff16x-3{list-style-type:none}.lst-kix_6pez2mrsmpke-2>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-2}ul.lst-kix_tkvuoa3u51vt-4{list-style-type:none}ul.lst-kix_5jrr22tff16x-2{list-style-type:none}ul.lst-kix_tkvuoa3u51vt-3{list-style-type:none}ul.lst-kix_5jrr22tff16x-1{list-style-type:none}ol.lst-kix_6pez2mrsmpke-1.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-1 0}ul.lst-kix_tkvuoa3u51vt-6{list-style-type:none}ul.lst-kix_5jrr22tff16x-8{list-style-type:none}.lst-kix_pa9w41pppx9-1>li:before{content:"- "}ul.lst-kix_tkvuoa3u51vt-5{list-style-type:none}ul.lst-kix_5jrr22tff16x-7{list-style-type:none}ul.lst-kix_tkvuoa3u51vt-8{list-style-type:none}ul.lst-kix_5jrr22tff16x-6{list-style-type:none}.lst-kix_pa9w41pppx9-2>li:before{content:"- "}ul.lst-kix_tkvuoa3u51vt-7{list-style-type:none}ul.lst-kix_5jrr22tff16x-5{list-style-type:none}.lst-kix_pa9w41pppx9-3>li:before{content:"- "}.lst-kix_6pez2mrsmpke-8>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-8}ol.lst-kix_6pez2mrsmpke-6{list-style-type:none}ol.lst-kix_6pez2mrsmpke-5{list-style-type:none}ol.lst-kix_6pez2mrsmpke-4{list-style-type:none}ol.lst-kix_6pez2mrsmpke-3{list-style-type:none}ol.lst-kix_6pez2mrsmpke-2{list-style-type:none}ol.lst-kix_6pez2mrsmpke-1{list-style-type:none}ol.lst-kix_6pez2mrsmpke-0{list-style-type:none}.lst-kix_5jrr22tff16x-8>li:before{content:"- "}.lst-kix_6pez2mrsmpke-7>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-7}.lst-kix_5jrr22tff16x-7>li:before{content:"- "}ol.lst-kix_6pez2mrsmpke-4.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-4 0}.lst-kix_pa9w41pppx9-0>li:before{content:"- "}ol.lst-kix_6pez2mrsmpke-8{list-style-type:none}ol.lst-kix_6pez2mrsmpke-7{list-style-type:none}.lst-kix_6pez2mrsmpke-1>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-1}ol.lst-kix_6pez2mrsmpke-7.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-7 0}.lst-kix_pa9w41pppx9-5>li:before{content:"- "}.lst-kix_6pez2mrsmpke-3>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-3}.lst-kix_pa9w41pppx9-4>li:before{content:"- "}.lst-kix_pa9w41pppx9-6>li:before{content:"- "}.lst-kix_tkvuoa3u51vt-6>li:before{content:"- "}.lst-kix_tkvuoa3u51vt-8>li:before{content:"- "}.lst-kix_6pez2mrsmpke-6>li{counter-increment:lst-ctn-kix_6pez2mrsmpke-6}.lst-kix_tkvuoa3u51vt-3>li:before{content:"- "}.lst-kix_tkvuoa3u51vt-7>li:before{content:"- "}.lst-kix_pa9w41pppx9-8>li:before{content:"- "}.lst-kix_tkvuoa3u51vt-4>li:before{content:"- "}.lst-kix_pa9w41pppx9-7>li:before{content:"- "}.lst-kix_tkvuoa3u51vt-5>li:before{content:"- "}ol.lst-kix_6pez2mrsmpke-0.start{counter-reset:lst-ctn-kix_6pez2mrsmpke-0 0}ol{margin:0;padding:0}table td,table th{padding:0}.c11{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c14{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:8pt;font-family:"Arial";font-style:normal}.c18{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c8{color:#434343;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Arial";font-style:normal}.c12{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Arial";font-style:normal}.c7{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:italic}.c5{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c15{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Arial";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:8pt;font-family:"Arial";font-style:italic}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c16{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c2{margin-left:36pt;padding-left:0pt}.c13{padding:0;margin:0}.c3{height:11pt}.c10{font-style:italic}.c17{font-weight:700}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c16"><p class="c18 title" id="h.3pbqeb42frhh"><span class="c15">Widget Maker (Alpha) - Introduction</span></p><p class="c0"><span class="c1">This short document will cover the basics of the Widget Maker.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">When first opening the program you are presented with the project screen. Here you can choose if you’d like to start from a template or start from scratch with specific canvas dimensions (You can always change the canvas size later on).</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c7">Let’s start with the “Hello World” template</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 602.00px; height: 309.33px;"><img alt="" src="images/image4.png" style="width: 602.00px; height: 309.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">When selected, the dialog will vanish and the canvas with a simple app consisting of a few widgets will appear.</span></p><p class="c0 c3"><span class="c1"></span></p><h3 class="c12" id="h.n6mv6e1r8sur"><span class="c8">How does the widget-maker work in terms of layouting?</span></h3><p class="c0"><span class="c1">Building layouts in the widget-makes is pretty much the same as writing the equivalent Flutter code. Widgets have properties e.g. “color”, “width”, and they also have widgets which are their children.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">Consider the “Hello World” App we just opened:</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 673.34px; height: 344.50px;"><img alt="" src="images/image2.png" style="width: 673.34px; height: 344.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">The App you see on the left side corresponds exactly to the code written in the red box.</span></p><p class="c0 c3"><span class="c1"></span></p><h2 class="c5" id="h.3ygj6jho506t"><span class="c4">What can we do with this template?</span></h2><p class="c0"><span>Before taking a look at what we </span><span class="c10 c17">can </span><span>do let’s take a quick look at what we can </span><span class="c10 c17">not </span><span class="c1">do.</span></p><p class="c0"><span class="c1">If we’d try to put a widget somewhere you’d get a little text saying “Not accepted”</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 192.43px; height: 330.50px;"><img alt="" src="images/image1.png" style="width: 192.43px; height: 330.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c9"><span class="c1">This is because there are no slots to put that widget!</span></p><p class="c9 c3"><span class="c1"></span></p><p class="c0"><span class="c1">The Scaffold already has a widget living in the AppBar, Body, and FloatingActionButton slot.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">Remember, layouting works exactly the same as in code, therefore every widget needs to be placed inside another widget.</span></p><p class="c0 c3"><span class="c1"></span></p><h2 class="c5" id="h.cd1tmx5x6yic"><span class="c4">What we can do:</span></h2><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 602.00px; height: 306.67px;"><img alt="" src="images/image6.png" style="width: 602.00px; height: 306.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">We can first remove the text by pressing “Remove” (1) or by pressing the delete key. <br>After that, we can select a widget to be placed in that slot, this can be achieved by pressing the “New Widget” (2) button, or the shortcut “Ctrl + Space”.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0 c3"><span class="c11"></span></p><p class="c0"><span class="c11">Let’s place an image there!</span></p><p class="c0"><span class="c1">First search for the image widget in the dialog which is opened by pressing the “New Widget” button or the Ctrl + Space shortcut.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">You will notice the name of the widget and a “+” symbol following your mouse, now it’s time to decide where to place it.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">Placeholders indicate the different positions the widget can be dropped in. When hovering over a placeholder it changes its color from green to blue to indicate that by clicking now, this placeholder will accept the new widget.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 602.00px; height: 308.00px;"><img alt="" src="images/image8.png" style="width: 602.00px; height: 308.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><ol class="c13 lst-kix_6pez2mrsmpke-0 start" start="1"><li class="c0 c2"><span class="c1">and (2) are placeholders. (2) will accept the image if it is to be dropped at that moment.</span></li></ol><p class="c0"><span class="c1">If we take a look at the widget tree on the left, we will see that (2) is actually a “Center” widget in a “Scaffold”. Therefore, by placing the widget there it will show an image that is centered on the body of the scaffold!</span></p><p class="c0 c3"><span class="c14"></span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 533.50px; height: 272.78px;"><img alt="" src="images/image7.png" style="width: 533.50px; height: 272.78px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c9"><span class="c6">Neat - This is the result!</span></p><h2 class="c5" id="h.rouhua79rjfy"><span class="c4">Properties</span></h2><p class="c0"><span class="c1">The right bar is the property bar. It lets you manipulate the properties of the currently selected widget.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 602.00px; height: 309.33px;"><img alt="" src="images/image5.png" style="width: 602.00px; height: 309.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c1">Play around and see how different properties affect the rendering (in realtime!).</span></p><p class="c0 c3"><span class="c1"></span></p><h2 class="c5" id="h.sgj2be22b7qd"><span class="c4">Columns and rows</span></h2><p class="c0"><span class="c7">Sidenote: Working with lists is in a very early stage and the UX will change drastically over time.</span></p><p class="c0 c3"><span class="c7"></span></p><p class="c0"><span class="c1">Adding a widget to a list is done by dropping the new widget at an edge of another widget. The edge depends on the desired side you’d like to place the new widget relative to the existing widget.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 602.00px; height: 308.00px;"><img alt="" src="images/image3.png" style="width: 602.00px; height: 339.00px; margin-left: 0.00px; margin-top: -12.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c7">This marks the end of the short walkthrough. </span></p><h2 class="c5" id="h.ap08prqgxtvm"><span class="c4">Other features</span></h2><p class="c0"><span class="c1">Here is a quick list of some other features which should be pretty straight forward:</span></p><ul class="c13 lst-kix_pa9w41pppx9-0 start"><li class="c0 c2"><span class="c1">Take a look and export code over at the code workspace (button located at the top)</span></li><li class="c0 c2"><span class="c1">Dragging a number text field up/down changes the value</span></li><li class="c0 c2"><span class="c1">Start a new workspace without leaving the application by pressing the button at the top left.</span></li><li class="c0 c2"><span>Navigating lists of items work with arrow keys for </span><span class="c10">most </span><span class="c1">menus.</span></li><li class="c0 c2"><span class="c1">Selecting the canvas in the widget tree allows changing the dimensions of the canvas to common sizes (phones/ desktop) or to custom ones.</span></li></ul><p class="c0 c3"><span class="c1"></span></p><h2 class="c5" id="h.ernjhrmsybij"><span class="c4">Considerations</span></h2><p class="c0"><span class="c1">This is a very early build and there are obvious limitations, for example:</span></p><ul class="c13 lst-kix_tkvuoa3u51vt-0 start"><li class="c0 c2"><span class="c1">The cursor will not adapt to different situations (beam, move …), this will be implemented once Flutter supports it.</span></li><li class="c0 c2"><span class="c1">Mac is very limited as keycodes are not being sent by the Mac embedder for control keys.</span></li><li class="c0 c2"><span class="c1">Widgets are missing</span></li><li class="c0 c2"><span class="c1">Properties are missing</span></li><li class="c0 c2"><span class="c1">No way to save the project to be reopened as of now</span></li></ul><p class="c0 c3"><span class="c1"></span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">All these things are being worked on and will eventually work!</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">Last but not least, thanks for trying out the widget-maker! I’m super happy that people show interest in this project. </span></p><p class="c0"><span class="c1">I truly believe there is the potential for tremendous value to be created.</span></p><p class="c0 c3"><span class="c1"></span></p><p class="c0"><span class="c1">Feedback is highly appreciated as I’m still trying to figure out the best way to approach this field</span></p></body></html>