parabeac / parabeac_core Goto Github PK

Change Proposal

Symbols allow Overrides in Sketch. Right now the overrides are not taken into account. This should be done through parameter passing and variables inside the widget. This include TextStyle overrides, so you could have multiple styles for a button for example, clicked, not clicked hover, etc.

Module and Current Solution

Generation Service - Need to add variables & parameter passing down to symbols with override values.

Benefits of the Change

Better use of symbols is going to increase Scalability and you can pass overrides programmatically

When giving a semantic to a symbol in sketch that correlates to a PBEgg, the PBEgg is not being processed. There is no output for that specific symbol in the code generation phase.

Change Proposal

Removing the property widgetType from PBIntermediateNodes

Module and Current Solution

Right now there is no purpose of this attribute, this attribute was used in the past for identifying PBGenerators.

Benefits of the Change

It would Improve readability in the code.

Currently in both parabeac.dart and main.dart the arguments are being parsed using a for-loop and a switch statement. This can lead to many errors when parsing arguments and can be quite inefficient.

In order to improve this we can use the args package which provides elegant argument-parsing functionality, reduces the potential for errors, and will make the code more concise.

Request Type: New Feature Proposal.

Description

This is a base functionality needed to enable Windows Support for Parabeac Core as shell scripts do not run on Windows. By rewriting the shell scripts in their bash equivalent and then adding in the ability to run those scripts based on the OS that Parabeac Core is in this should allow for Parabeac Core to run on Windows.

Files Affected:

• all .sh files

Additional Notes:

Supporting Figma designs, being able to generate Flutter code that is derived from a Figma design. This requires:

• Being able to request a Figma Design's JSON from the Figma API using the credentials from the user.
• deserializing the Figma design JSON to Figma Dart classes, which are going to be mapped to Parabeac's Design Language (PBDL).
• Converting Figma vectors to images.

Request Type: New Feature Proposal.

Description

This would allow for Parabeac Core to detect the OS that it is being run in and then based on that information identify the current directory it is in as well. This would be very helpful in helping to support Parabeac Core outside of just Mac and Linux environments as well as help set the groundwork for automatic path usage within Parabeac Core.

Files Affected:

• main.dart
• parabeac.dart

Additional Notes:

This seems to be an issue relating to the post-layout rules. The attached photo shows a Stack with a background container & another container. It should've been reduced to a Background Container holding the Text Container. Another issue but unrelated is in the Login button. You can see that the alignment service did not inject a Positioned for the relationship between the Stack & its children which resulted in incorrect looking UI.

Currently, Parabeac Core does not have a way of supporting navigation between pages. For switching between pages the developer would have to manually add it in or change the first page into the page they want to render.
Parabeac Core should be able to interpret the prototype syntax from design files and derive navigation to the corresponding Artboards.

Request Type: New Feature Proposal.

Description

Currently when running npm install Parabeac Core hangs in the terminal and no output or activity is displayed. This can be confusing to users as there is no way to know if Parabeac Core is caught on something or simply taking a while. By adding in a signifier, like a progress bar or spinning circle, this will allow users to know that Parabeac Core is still running.

Files Affected:

• main.dart
• parabeac.dart

Additional Notes:

A recommendation is to use this library to add loading bars to the console.

Switching out the library that is used in Docker by our own solution that leverages the Sketch Tool

• Remove Sketch-to-SVG folder

• Add Sketch-Asset-Converter to Parabeac core

• Modify the documentation to reflect the changes in Asset converter

• Remove the script where the sketch-asset converter is instantiated.

I tried Parabeac with my windows machine. it failed this line

• Using batch file for windows. all scripts inside pb-scripts are for *nix System.

install.sh

echo "[INFO]: Installing Para-beac core and its dependencies"
dart pub get
cd SketchAssetConverter && npm i
echo "Installed Sketch Asset Converter dependencies"

to

install.bat

@echo off

echo "[INFO]: Installing Para-beac core and its dependencies"
pub get
cd SketchAssetConverter
npm i
echo "Installed Sketch Asset Converter dependencies"

Error message here.

➜ dart .\parabeac.dart -p C:\Users\development\Parabeac-Core\parabeac_demo_alt.sketch -n C:\Users\development\parabeac-flutter
Unhandled exception:
FormatException: Unexpected extension byte (at offset 10)
#0      _Utf8Decoder.convertChunked (dart:convert-patch/convert_patch.dart:1887:7)
#1      _Utf8ConversionSink.addSlice (dart:convert/string_conversion.dart:314:28)
#2      _Utf8ConversionSink.add (dart:convert/string_conversion.dart:310:5)
#3      _ConverterStreamEventSink.add (dart:convert/chunked_conversion.dart:72:18)
#4      _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:121:24)
#5      _RootZone.runUnaryGuarded (dart:async/zone.dart:1384:10)
#6      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:357:11)
#7      _BufferingStreamSubscription._add (dart:async/stream_impl.dart:285:7)
#8      _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:808:19)
#9      _StreamController._add (dart:async/stream_controller.dart:682:7)
#10     _StreamController.add (dart:async/stream_controller.dart:624:5)
#11     _Socket._onData (dart:io-patch/socket_patch.dart:2020:41)
#12     _RootZone.runUnaryGuarded (dart:async/zone.dart:1384:10)
#13     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:357:11)
#14     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:285:7)
#15     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:808:19)
#16     _StreamController._add (dart:async/stream_controller.dart:682:7)
#17     _StreamController.add (dart:async/stream_controller.dart:624:5)
#18     new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1556:33)
#19     _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1052:14)
#20     _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#21     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
#22     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
#23     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:169:5)

1. Created a simple sketch file trying to replicate how the demo sketch layer out it's components.
2. Opened the terminal to the the Parabeac-Core Directory, and entered the command to convert the Sketch file to flutter code.
3. Got the following messages on the terminal:

[INFO]: Installing Para-beac core and its dependencies

audited 525 packages in 4.62s

34 packages are looking for funding
run npm fund for details

found 1 moderate severity vulnerability
run npm audit fix to fix them, or npm audit for details

Installed Sketch Asset Converter dependencies

Error: Error when reading 'pub': No such file or directory
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

[INFO]: No URL provided

[INFO]: Processing plugins...

[INFO]: Plugin already in file. Skipping...

[ERROR]: No semantics found for Tab

[INFO]: Plugin already in file. Skipping...

[INFO]: Plugin already in file. Skipping...

[INFO]: Done processing!

Main: [INFO] - [-p, /Users/saidajo/Desktop/magic_calculator.sketch, -n, MagicTest]

Sketch: [INFO] - We encountered a page that has 0 page items.

Sketch: [INFO] - We encountered a page that has 0 page items.

Interpret: [ERROR] - NoSuchMethodError: The getter 'boundaryRectangle' was called on null.
Receiver: null
Tried calling: boundaryRectangle

PBAlignGenerationService: [WARNING] - We don't support class type Null for adding to the queue.

lib/main.dart: Warning: Interpreting this as package URI, 'package:parabeac_core/main.dart'.
Unhandled exception:
NoSuchMethodError: The getter 'name' was called on null.
Receiver: null
Tried calling: name
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 Interpret._generateGroup (package:parabeac_core/controllers/interpret.dart:85:31)

#2 Interpret.interpretAndOptimize (package:parabeac_core/controllers/interpret.dart:64:49)

#3 SketchController.convertSketchFile (package:parabeac_core/controllers/sketch_controller.dart:31:38)
#4 main (package:parabeac_core/main.dart:86:30)
#5 _RootZone.runUnary (dart:async/zone.dart:1450:54)
#6 _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
#7 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
#8 Future._propagateToListeners (dart:async/future_impl.dart:725:32)
#9 Future._completeWithValue (dart:async/future_impl.dart:529:5)
#10 Future._asyncCompleteWithValue. (dart:async/future_impl.dart:567:7)
#11 _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#12 _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
#13 _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
#14 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:169:5)

4. After Getting these messages I entered nom audit to get details from the first message saying that their was a nom vulnerability and got the following message:

npm ERR! code EAUDITNOPJSON npm ERR! audit No package.json found: Cannot audit a project without a package.json

Fix the documentation and update the file

Keeping track of the following metrics through the use of Amplitude.

• The total number of Parabeac-Core runs
• The unique number of Parabeac-Core runs

Change Proposal

The method generateNonRootItem() is duplicate code of the method _generateScreen(). Since the recent attribute refactor allows us to easily iterate through every IntermediateNode's attribute, we can use this to remove the generateNonRootItem() method.

Module and Current Solution

This change will likely affect all the Services, as they directly refer to an IntermediateNode's attribute instead of iterating through them. Currently, generateNonRootItem()'s purpose is to manually run a node through each service by iterating through its specific attributes..

Benefits of the Change

This refactor will allow Egg developers to not have to worry about running a node through our services. In addition, it will shorten the code in Parabeac-core.

Request Type: Code Refactor

Description

The method for interpret dart on Parabeac Core is currently very long and functions like a pipe filter, this proposal is to break that into separate methods based on responsibility.

Current Solution

The current structure is just a very long and difficult to read method that handles the entire process of generating screens within the Interpret.dart file

Proposed Solution

Instead of having all of the logic happen within this function in the interpret.dart file, have this function call other functions that handle the specific task being formed at that point. This would clean up the code and make it a lot easier to both read and maintain going forward.

Files Affected:

• interpret.dart

Additional Notes:

When you run parabeac to generate a new project based on a sketch a main.dart is created. PBFlutterWriter.writeMainScreenWithHome() opens a writeOnly sink which replaces the original default main.dart created by flutter create with an empty one, and then tries to write the parabeac version. But if the program is too fast the sink is closed before the buffer is emptied, resulting in an empty main.dart.

Request Type: New Feature Proposal.

Description

By adding a -h flag when running parabeac.dart users would be able to access a help menu within the terminal giving better information on how to run Parabeac Core as a whole. Also adding this as a default if parabeac.dart is run without any flags or parameters.

Files Affected:

• parabeac.dart

Additional Notes:

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for the google Map View via the google maps flutter package. This would generate the UI element for the google maps with default settings however is not responsible for generating the appropriate API keys.

Semantic Suggestion:

.*google-map or with <> <google-map>

Relevant Widgets:

• Google Map

Additional Notes:

Change Proposal

For Symbols & Miscellaneous nodes, the layout service should default to using Stack layouts. Along with the Stack we should keep track of the resizing option from the design files. Where the Symbol/Misc node is used, we should inject a transform to scale the node to the size needed.

Unclear/Experiments to be done

It is unclear if forcing a Stack is completely necessary. The first experiment should be around injecting the transform & detecting the resizing option.

Module and Current Solution

This solution will likely effect the way the layout service works down to generation.

Benefits of the Change

Better UI Scalability

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for the flutter signin button that allows for the specified sign in to an application for various social media accounts. This specific egg would generate the signin button for google specifically. Utilizing the flutter_signin_button 1.1.0 as a dependency.

Semantic Suggestion:

.*button.google-signin or with <> <button.google-signin>

Relevant Widgets:

• Any Button Widget

Additional Notes:

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for the flutter sign-in button that allows for the specified sign in to an application for various social media accounts. This specific egg would generate the sign-in button for facebook specifically. Utilizing the flutter_signin_button 1.1.0 as a dependency.

Semantic Suggestion:

.*button.facebook-signin or with <> <button.facebook-signin>

Relevant Widgets:

• Flutter Sign-in

Additional Notes:

If you create a group inside Sketch with no children, Parabeac will except out and your main.dart file will become blank.

You can regenerate it, but you lose any changes you have added.

Just trying to run Parabeac Core with the sample file provided on the README. Pub install works but when I type the command to run Parabeac Core I get the error below:

CreateProcessW failed 2
Unhandled exception:
ProcessException: The system cannot find the file specified.

Command: bash C:\Users\alexu\Parabeac-Core/pb-scripts/install.sh

I do have Flutter and the Dart SDK installed correctly.
Anybody else on Windows?

All the media queries in here should be less or equal to 1. Right now, many of the widgets have a constant bigger than 1.

Took me a while to figure out why my text wasn't centered in the container.

It turns out that Parabeac isn't supporting this in the Paragraph/Text Style.

which tightly wraps text by adjusting the baseline from the center vertically in the Fixed Size in Sketch.

If you select Alignment Auto Height . it increases the size of the bounding box, which you can then move up and in sketch you get a bounding box that accounts for ascent and descent in the font with characters, i.e. lower case 'y' and line spacing.

Not sure how to solve this yet, but I think StrutStyle is going to be the answer.

This setting is what is happening in Parabeac which isn't taking into account the fixed size align vertical setting. When set to top, you get what you do in Sketch.

When you set to vertically center align, you still get the same screenshot above.

In the input phase of the system, there are classes that are only for Sketch Files (e.g., SketchNode and Artboard). These classes are highly coupled with some of the services in the optimization phase.

There should be a higher level of abstraction for the design files, instead of what there is right now. This ease the process for supporting other design files and not just Sketch. This set of classes are called PBDL. They are a set of classes the puts together the similarities of design files, enabling the intake of multiple design files into Parabeac Core.

Change Proposal

I think using SketchAssetConverter as a web server is an awesome solution, but It has a little problem. When Parabeac users already running a webserver on a their local machine, Parabeac is not working. furthermore, I did not meet the error with the converter server has done. Next time I could not be using Parabeac. it because using a web server way.

Benefits of the Change

I suggest SketchAssetConverter as an executable. It can be a solution from already running webserver PORT. CLI way can detach the converter from Parabeac-Core. It is made easier to maintain. When Parabeac running on the cloud, maybe it is future :), Every single time users request sketch to flutter, It will be a single point of failure

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for using navigator.pop when clicking on a back arrow Icon. This would be useful in addition to prototyping to expand on navigational functionality.

Semantic Suggestion:

.*back-arrow or with <> <back-arrow>

Relevant Widgets:

• Navigator

Additional Notes:

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for the custom scrollview widget with Parabeac Core. This can be used to generate specified slivers that enable flexible and powerful scrolling capabilities.

Semantic Suggestion:

.*custom-scrollview or with <> <custom-scrollview>

Relevant Widgets:

• Custom ScrollView

Additional Notes:

Please see the flutter docs on custom scrollviews for greater detail.

Change Proposal

Generate TextStyles.dart for to use various TextStyles from the Sketch data

Module and Current Solution

Generation Service - No solution

Benefits of the Change

Multiple TextStyles can be used to change a button or widget on hover, click, press, release or even keyboard input or things like focus, release focus

What improvements occur because of this change? (Readability, Performance, Scalability, etc...)
Allows multiple styles that can be passed in as a optional parameter to change the state based on some user interaction with the widget. Goes towards Scalability.

Change Proposal

Change conventional text for: Auto Size Text in Flutter w/ AutoSizeText Package

Module and Current Solution

Intermediate Text (looking for the necessary info from the file, such as MAX LINES) and TextGenerator (It should print the new widget)

Benefits of the Change

What improvements occur because of this change? It would make text more dynamic for apps, so we wont have overflows and text will adapt to the provided space

Change Proposal

Remove necessity of full paths for running Parabeac

Module and Current Solution

The command line arguments require full paths for running Parabeac, if it instead used arg[0] path and retrieved the full paths of the other arguments that would help automatic builds.

Benefits of the Change

I could then add my .sketch file to the project and run a script to automatically update the code when it changes. Right now I have to change directory CD to where Parabeac is located for it to work.

NavBar Egg cannot use default alignment because Flutter implementation inherits alignment.

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for text fields to be generated in the place of general Text widgets. These would be configured to return input when called upon.

Semantic Suggestion:

.*text-field or with <> <text-field>

Relevant Widgets:

• Text Field

Additional Notes:

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for text forms to be generated in the place of general Text widgets. These would be configured with the appropriate Text Form formkey in an effort to support larger text entry from the user.

Semantic Suggestion:

.*text-form or with <> <text-form>

Relevant Widgets:

• Form

Additional Notes:

I've never used Sketch before but I saw the project on reddit and thought I'd try to run it and see what the flutter code looked like. I did load the demo file in Sketch first and that seemed to work alright.

demo file from README
filename: parabeac_demo_alt.sketch

Flutter 1.20.2
Dart 2.9.1
Docker Desktop for Mac 19.03.12

Here's the logs:

➜  Parabeac-Core git:(master) ✗ dart parabeac.dart -p /path/parabeac_demo_alt.sketch -n myapp
[INFO]: Installing Para-beac core and its dependencies

                                                                                
                                                                                
                                                                                
                                                                                
                                     *%%%%%%%%%%%%%%*                           
                                  &%%%%%%%%%%%%%%%&&&%%%                        
                                (&&&&&&&&&&&&&@@//////@&&(                      
                               &&&&&&&&&&&&&&@/////////@&&&                     
                              *&&&&&&&&&&&&&&@#////////@&&&.                    
                              &&&&&&&&&&&&&&&&&@@////@@&&&&#((((                
                              &&&&&&&&&&&&&&&&&&&&&&&&&&&&&#((((((              
                              &&&&&&&&&&&&&&&&&&&&&&&&&&&&&#(((((((.            
                //////////,   &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&                    
                //////////////&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&                    
            %%%%%%%%%%%%%%%%%%&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%                    
             %%%%%%%%%%%%%%%%%####################((((((((((                    
             %%%%%%%%%%%%%%%%%%###############((((((((((((((                    
              (%%%%%%%%%%%%%%%%%%%%%%%%%%##########((##((((                     
                %%%%%%%%%%%%%%%%%%%###############%%#((((((                     
                   ############################%%%%#((((((                      
                      *######################%%%####((((#                       
                              #############%%#######(((                         
                              ###########(##########(/                          
                              ######(((((##########                             
                              ((((((((((#########                               
                              (((((((((######                                   
                              (((((((((.                                        
                              ((((((((                                          
                              (((((((                                           
                              ((                                                
                                                                                
                                                                                
[INFO]: No URL provided
[INFO]: Processing plugins...
[INFO]: Plugin already in file. Skipping...
[ERROR]: No semantics found for Tab
[INFO]: Plugin already in file. Skipping...
[INFO]: Done processing!

Main: [INFO] - [-p, /path/parabeac_demo_alt.sketch, -n, myapp]
Sketch: [INFO] - We encountered a page that has 0 page items.
Sketch: [INFO] - We encountered a page that has 0 page items.
Interpret: [FINE] - Processed 'MajorsOverview' in group 'Index Screens' with item type: 'SCREEN'
Interpret: [FINE] - Processed 'LandingPage' in group 'Index Screens' with item type: 'SCREEN'
Interpret: [ERROR] - SocketException: Write failed (OS Error: Broken pipe, errno = 32), address = localhost, port = 56340
PBAlignGenerationService: [WARNING] - We don't support class type Null for adding to the queue.

Change Proposal

Right now the code uses MediaQuery.Of(context) to set positions, padding, etc. This should really be using constraints passed in that are the parent container, which is not necessarily the full screen or even the SafeArea()

Module and Current Solution

Alignment Service will be effected, and we will need to pass constraints parameters to all child widgets (which is good for using symbols).

Benefits of the Change

What improvements occur because of this change? (Readability, Performance, Scalability, etc...)
Scalability is improved.

The kebab menu was created on the right in the Sketch file but exported on the left. We've ran into this issue before, we should create a test for this and make sure it doesn't come up anymore. The reason it get's picked up in this way is when creating the layouts we pick the topLeftCorner first with top being the higher priority. This is fine, but we must reorganize the children in the layout. Attached is the sketch file for testing purposes.

ExchangeWidget.sketch.zip

I did not know history why choose STATEFUL_WIDGET over STATELESS_WIDGET.

nowadays flutter devs using Provider like state management system working on StatelessWidget. and on Sketch side, every page design is have no state. It stay still. If Sketch support state, Parabeac support StatefulWidget.

code of StatelessWidget is more simpler and faster.

This has been discussed with the Parabeac team, but this would be a more natural approach to applying a naming semantic. It doesn't make or break anything but would be a better UX on the Sketch side.

As stated in the title, simply change the name of the plugins directory to eggs.

It looks like that the PBTabBarGenerator sometimes generates a completly different dart file as string and then attempts to append it as value for the icon property of BottomNavigationBarItem. This because the generator type of the child of some of the source tabs isn't actually a PBBitmapGenerator, but instead PBPrototypeGenerator.

For example, the "screens/index_screens/learning_overview_alt.dart" file becomes the following when using the sketch from the readme file:

import 'package:flutter/material.dart';
import './majors_overview.dart';


class LearningOverviewAlt extends StatefulWidget{
  const LearningOverviewAlt() : super();
  @override
  _LearningOverviewAlt createState() => _LearningOverviewAlt();
}

class _LearningOverviewAlt extends State<LearningOverviewAlt>{
  
  

  @override
  Widget build(BuildContext context){
    return Scaffold(
appBar: AppBar(leading: Image.asset('assets/images/1ab87eea21615010a2576c5a46416a88641231ec.png', width : MediaQuery.of(context).size.width * 27.778, height : MediaQuery.of(context).size.height * 29.226,),title: Container(width : MediaQuery.of(context).size.width * 1.000, height : MediaQuery.of(context).size.height * 1.000,child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
    children:[
      Flexible(flex: 52,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.518, height : MediaQuery.of(context).size.height * 1.000,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'285',
style: TextStyle(
fontFamily: 'SFCompactText',
fontSize: 21,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),
),))),),Spacer(flex: 17,),Flexible(flex: 32,child: Padding(padding: EdgeInsets.only(bottom: MediaQuery.of(context).size.width * 0.04,top: MediaQuery.of(context).size.width * 0.08,),child: Image.asset('assets/images/7dc57eea260f608d09f997083c71f337eda203ca.png', width : MediaQuery.of(context).size.width * 0.314, height : MediaQuery.of(context).size.height * 0.880,)),)
    ]
    )
    ),actions: [Image.asset('assets/images/e743cc27bf064b8b45e6c8d1c40d8200bf4f7732.png', width : MediaQuery.of(context).size.width * 37.536, height : MediaQuery.of(context).size.height * 34.000,)],),
bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,items:[BottomNavigationBarItem(icon: import 'package:flutter/material.dart';
import './majors_overview.dart';


class homeicontab extends StatefulWidget{
  const homeicontab() : super();
  @override
  _homeicontab createState() => _homeicontab();
}

class _homeicontab extends State<homeicontab>{
  
  

  @override
  Widget build(BuildContext context){
    return Image.asset('assets/images/724477925ebd536321fbadee7e227cfd057eb0f5.png', width :28.00,height : 26.00,);
  }
},title: Text(""),),BottomNavigationBarItem(icon: import 'package:flutter/material.dart';
import './majors_overview.dart';


class statstab extends StatefulWidget{
  const statstab() : super();
  @override
  _statstab createState() => _statstab();
}

class _statstab extends State<statstab>{
  
  

  @override
  Widget build(BuildContext context){
    return Image.asset('assets/images/791dd23b4cf727cd2ad676896de2196a29d57e2d.png', width :26.00,height : 26.00,);
  }
},title: Text(""),),BottomNavigationBarItem(icon: Image.asset('assets/images/c4eea6263c1c1732dcb7a96694a80dd390a1ff7d.png', width :54.00,height : 61.00,),title: Text(""),),BottomNavigationBarItem(icon: GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => MajorsOverview()),
        );
      },
      child: Image.asset('assets/images/5c0161e4cd699ec44a35f72b3b4b529f464c6f94.png', width :25.00,height : 25.00,),
      ),title: Text(""),),BottomNavigationBarItem(icon: Image.asset('assets/images/5ce1816426a25e74eb636fbaa1e06a6627b7d7ee.png', width :26.00,height : 23.00,),title: Text(""),),],), 
body: Align(alignment: Alignment(0.02, 0.56),child: Container(width : MediaQuery.of(context).size.width * 0.896, height : MediaQuery.of(context).size.height * 0.838,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 6,child: Padding(padding: EdgeInsets.only(right: MediaQuery.of(context).size.width * 0.59,),child: Container(width : MediaQuery.of(context).size.width * 0.304, height : MediaQuery.of(context).size.height * 0.045,child: Align(alignment: Alignment(0.00, 0.00),child: Container(width : MediaQuery.of(context).size.width * 0.304, height : MediaQuery.of(context).size.height * 0.045,child: Text(
'Explore',
style: TextStyle(
fontFamily: 'SFProText',
fontSize: 32,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.6240000000000001,
color: Color(0xff042c5c),),textAlign: TextAlign.left,

)),))),),Spacer(flex: 1,),Flexible(flex: 3,child: Padding(padding: EdgeInsets.only(right: MediaQuery.of(context).size.width * 0.68,),child: Container(width : MediaQuery.of(context).size.width * 0.213, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Categories',
style: TextStyle(
fontFamily: 'SFCompactText-Semibold',
fontSize: 17,
color: Color(0xff0b0b0b),),textAlign: TextAlign.left,

),))),),Spacer(flex: 3,),Flexible(flex: 21,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.896, height : MediaQuery.of(context).size.height * 0.173,child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
    children:[
      Flexible(flex: 29,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,decoration: BoxDecoration(color: Color(0xff3598fb),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :16.0,bottom :6.0,child: Container(width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.135,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 62,child: Padding(padding: EdgeInsets.only(),child: Image.asset('assets/images/fd293ef7fd2f13ffb9962408e16bb189809d7d33.png', width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.083,)),),Spacer(flex: 23,),Flexible(flex: 17,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.01,right: MediaQuery.of(context).size.width * 0.01,),child: Container(width : MediaQuery.of(context).size.width * 0.147, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Careers',
style: TextStyle(
fontFamily: 'SFCompactText',
fontSize: 17,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.left,

),))),),])),),]))),),Spacer(flex: 8,),Flexible(flex: 29,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,decoration: BoxDecoration(color: Color(0xff3598fb),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :16.0,bottom :6.0,child: Container(width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.135,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 62,child: Padding(padding: EdgeInsets.only(),child: Image.asset('assets/images/fd293ef7fd2f13ffb9962408e16bb189809d7d33.png', width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.083,)),),Spacer(flex: 23,),Flexible(flex: 17,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.03,right: MediaQuery.of(context).size.width * 0.02,),child: Container(width : MediaQuery.of(context).size.width * 0.128, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Majors',
style: TextStyle(
fontFamily: 'SFCompactText',
fontSize: 17,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

),))),),])),),]))),),Spacer(flex: 8,),Flexible(flex: 29,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.254, height : MediaQuery.of(context).size.height * 0.173,decoration: BoxDecoration(color: Color(0xff3598fb),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :16.0,bottom :6.0,child: Container(width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.135,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 62,child: Padding(padding: EdgeInsets.only(),child: Image.asset('assets/images/fd293ef7fd2f13ffb9962408e16bb189809d7d33.png', width : MediaQuery.of(context).size.width * 0.176, height : MediaQuery.of(context).size.height * 0.083,)),),Spacer(flex: 23,),Flexible(flex: 17,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.162, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Colleges',
style: TextStyle(
fontFamily: 'SFCompactText',
fontSize: 17,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

),))),),])),),]))),)
    ]
    )
    )),),Spacer(flex: 3,),Flexible(flex: 3,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.894, height : MediaQuery.of(context).size.height * 0.022,child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
    children:[
      Flexible(flex: 41,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.360, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Continue Learning',
style: TextStyle(
fontFamily: 'SFCompactText-Semibold',
fontSize: 17,
color: Color(0xff0b0b0b),),textAlign: TextAlign.left,

),))),),Spacer(flex: 46,),Flexible(flex: 15,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.128, height : MediaQuery.of(context).size.height * 0.018,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'View All',
style: TextStyle(
fontFamily: 'SFCompactText-Semibold',
fontSize: 14,
color: Color(0xff368ef2),),textAlign: TextAlign.left,

),))),)
    ]
    )
    )),),Spacer(flex: 4,),Flexible(flex: 27,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.02,right: MediaQuery.of(context).size.width * 0.02,),child: Container(width : MediaQuery.of(context).size.width * 0.850, height : MediaQuery.of(context).size.height * 0.223,child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
    children:[
      Flexible(flex: 47,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,decoration: BoxDecoration(color: Color(0xff7f36c5),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :22.0,top :14.0,child: Container(width : MediaQuery.of(context).size.width * 0.292, height : MediaQuery.of(context).size.height * 0.175,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 26,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.292, height : MediaQuery.of(context).size.height * 0.045,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Fundamentals of Algorithms',
style: TextStyle(
fontFamily: 'SFProText',
fontSize: 17,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

),))),),Spacer(flex: 13,),Flexible(flex: 62,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.03,right: MediaQuery.of(context).size.width * 0.03,),child: Image.asset('assets/images/83c10f3fe733b88aca886ce5f9ba40355d502171.png', width : MediaQuery.of(context).size.width * 0.234, height : MediaQuery.of(context).size.height * 0.108,)),),])),),]))),),Spacer(flex: 7,),Flexible(flex: 47,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,decoration: BoxDecoration(color: Color(0xd9000000),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :49.0,top :14.0,child: Container(width : MediaQuery.of(context).size.width * 0.162, height : MediaQuery.of(context).size.height * 0.022,child: Text(
'Finance',
style: TextStyle(
fontFamily: 'SFProText',
fontSize: 17,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

)),),Positioned(left :16.0,bottom :33.0,child: Image.asset('assets/images/5ba1a8495a66eacb0d83c6546dc05ec1cc687e67.png', width : MediaQuery.of(context).size.width * 0.319, height : MediaQuery.of(context).size.height * 0.104,),),]))),)
    ]
    )
    )),),Spacer(flex: 1,),Flexible(flex: 3,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.03,right: MediaQuery.of(context).size.width * 0.70,),child: Container(width : MediaQuery.of(context).size.width * 0.159, height : MediaQuery.of(context).size.height * 0.022,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Lessons',
style: TextStyle(
fontFamily: 'SFCompactText-Semibold',
fontSize: 17,
color: Color(0xff0b0b0b),),textAlign: TextAlign.left,

),))),),Spacer(flex: 3,),Flexible(flex: 27,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.02,right: MediaQuery.of(context).size.width * 0.02,),child: Container(width : MediaQuery.of(context).size.width * 0.850, height : MediaQuery.of(context).size.height * 0.223,child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
    children:[
      Flexible(flex: 47,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,decoration: BoxDecoration(color: Color(0xff7f36c5),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :22.0,top :14.0,child: Container(width : MediaQuery.of(context).size.width * 0.292, height : MediaQuery.of(context).size.height * 0.175,child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [Flexible(flex: 26,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.292, height : MediaQuery.of(context).size.height * 0.045,child: Align(alignment: Alignment(0.00, 0.00),child: Text(
'Fundamentals of Algorithms',
style: TextStyle(
fontFamily: 'SFProText',
fontSize: 17,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

),))),),Spacer(flex: 13,),Flexible(flex: 62,child: Padding(padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.03,right: MediaQuery.of(context).size.width * 0.03,),child: Image.asset('assets/images/83c10f3fe733b88aca886ce5f9ba40355d502171.png', width : MediaQuery.of(context).size.width * 0.234, height : MediaQuery.of(context).size.height * 0.108,)),),])),),]))),),Spacer(flex: 7,),Flexible(flex: 47,child: Padding(padding: EdgeInsets.only(),child: Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,child: Stack(
children: [Container(width : MediaQuery.of(context).size.width * 0.399, height : MediaQuery.of(context).size.height * 0.223,decoration: BoxDecoration(color: Color(0xd9000000),
borderRadius: BorderRadius.all(Radius.circular(8)),),),Positioned(left :49.0,top :14.0,child: Container(width : MediaQuery.of(context).size.width * 0.162, height : MediaQuery.of(context).size.height * 0.022,child: Text(
'Finance',
style: TextStyle(
fontFamily: 'SFProText',
fontSize: 17,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
letterSpacing: 0.0,
color: Colors.white,),textAlign: TextAlign.center,

)),),Positioned(left :16.0,bottom :33.0,child: Image.asset('assets/images/5ba1a8495a66eacb0d83c6546dc05ec1cc687e67.png', width : MediaQuery.of(context).size.width * 0.319, height : MediaQuery.of(context).size.height * 0.104,),),]))),)
    ]
    )
    )),),])),), 
);
  }
}

For reference, I'm talking about this line which generates the wrong code.

So internally Figma is actually using a smaller set of classes to describe UI elements than Sketch, this means that there are cases where some classes map to a single PBDL element. For example, the Frame class maps to what should be either a Scaffold or a Container, and in many cases, because we have yet to map Frames to Containers we have Scaffolds where Containers should be.

Change Proposal

Change the name of the class of PBParam to PBVariable.

Module and Current Solution

This should just make more sense since Params are describing something more like a variable.

Benefits of the Change

Improve Readability.

There seems to be a problem in the app bar of learning overview where I get the following Alignment: Alignment(Infinity, 1.00)

Change Proposal

Add the ability for widget to add Onclick(), OnHover(), OnRelease(), OnPress() as separate overridable class that can be passed as a parameter.

Module and Current Solution

Generation Service - No solution currently.

Benefits of the Change

If we generate a functions.dart class and can pass that as an optional parameter to the widget we can update the state for instance a TextStyle change when the mouse hovers over the widget. Improves scalability and Readability and helps with generator not overwriting your changes.

This is a sloppy issue I've began to put together but I will be adding to this as we figure out what should go into the FAQ page. All the suggestions below are from GeniusVentures.

Current questions to address:

• `When converted to symbol the rectangles are hidden, but they are probably still exported and used to figure out that all the text, images, etc are in that rectangle, but that rectangle is not in the the bounds of symbol, so it doesn't use column layout...

This shold be documented in in a FAQ`

• flutter note, on the kerning feature I just added, they add an extra spacing after the last character. Kind of sucks, but we could hack around it by changing the width or just put that in our FAQ also.

• one more for the FAQ, with kerning on Flutter adds kerning after the last character. It's supposed to be only between characters, so if your rect is exactly the font rectangle with kerning it will wrap the last letter sometimes.

Request Type: Parabeac Egg Request.

Egg Description

This egg would allow support for the datePicker functionality within buttons automatically. Creating the on click date selection function for a button with the given semantic.

Semantic Suggestion:

.*button.date-picker or with <> <button.date-picker>

Relevant Widgets:

• Any Button Widget

Additional Notes: