[Flutter] Unnecessary Rows and Column widgets are being generated by plugin #95
Comments
|
Can you share the figma url?
…On Tue, Feb 13, 2024, 07:32 pardeep kumar ***@***.***> wrote:
I am using this plugin in Figma to generate Flutter code. The issue is
that there are a lot necessary Row widgets are column widgets being
generated by plugin the the suggested code.
Following is the Figma design that i want to implement.
Screenshot.2024-02-07.at.2.14.22.PM.png (view on web)
<https://github.com/bernaferrari/FigmaToCode/assets/34264828/8bf7a4cb-264b-4c23-bef0-ba921037cdf2>
And this is the code suggested for it , by this plugin:
Container( width: 720, height: 216, padding: const
EdgeInsets.symmetric(horizontal: 36, vertical: 18), child: Row(
mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width:
144, height: 180, child: Column( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Container( padding: const
EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width:
144, height: 144, child: Row( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Container( padding: const
EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color:
Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius:
BorderRadius.circular(36), ), ), child: Column( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Text( '', textAlign:
TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36,
fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height:
0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144,
child: Text( '25', textAlign: TextAlign.center, style: TextStyle( color:
Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight:
FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ),
const SizedBox(width: 24), Container( width: 144, height: 180, child:
Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18),
child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ Container( width: 144, height: 144, child: Row( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
padding: const EdgeInsets.only(top: 27, bottom: 18), decoration:
ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Text( '', textAlign:
TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36,
fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height:
0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144,
child: Text( '11', textAlign: TextAlign.center, style: TextStyle( color:
Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight:
FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ),
const SizedBox(width: 24), Container( width: 144, height: 180, child:
Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18),
child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ Container( width: 144, height: 144, child: Row( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
padding: const EdgeInsets.only(top: 27, bottom: 18), decoration:
ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Text( '', textAlign:
TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36,
fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height:
0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144,
child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color:
Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight:
FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ),
const SizedBox(width: 24), Container( width: 144, height: 180, child:
Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18),
child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment:
MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ Container( width: 144, height: 144, child: Row( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
padding: const EdgeInsets.only(top: 27, bottom: 18), decoration:
ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize:
MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(
width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center, children: [ Text( '', textAlign:
TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36,
fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height:
0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144,
child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color:
Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight:
FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ),
], ), )
If we look at this code there are unnecessary Row widgets in each Button
component.
Then there is unnecessary Row widgets with encloses the all 4 button.
The above code generates following output
figma_plugin_final.png (view on web)
<https://github.com/bernaferrari/FigmaToCode/assets/34264828/d87f5f5e-30cf-4d4e-a5d4-c5770d5ec881>
The output UI height is less than the expected height also. Please check
once
—
Reply to this email directly, view it on GitHub
<#95>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AACVXFJTNORRKI4B7YCSIKLYTM6NXAVCNFSM6AAAAABDGICP3CVHI2DSMVQWIX3LMV43ASLTON2WKOZSGEZTCOJZGMYDIOA>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
|
Hi @bernaferrari Please use the following URL for figma design. Please share your email, I will invite you. Thanks |
|
***@***.***
…On 19 Feb 2024 04:34 -0300, pardeep kumar ***@***.***>, wrote:
Hi @bernaferrari Please use the following URL for figma design. Please share your email, I will invite you. Thanks
https://www.figma.com/file/sLJAbXIiWG8fkqR7XdfTa5/Code-to-Figma-Test?node-id=3%3A612&mode=dev
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am using this plugin in Figma to generate Flutter code. The issue is that there are a lot necessary Row widgets are column widgets being generated by plugin the the suggested code.
Following is the Figma design that i want to implement.
And this is the code suggested for it , by this plugin:
Container( width: 720, height: 216, padding: const EdgeInsets.symmetric(horizontal: 36, vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '25', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '11', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), const SizedBox(width: 24), Container( width: 144, height: 180, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(vertical: 18), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 144, height: 144, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 27, bottom: 18), decoration: ShapeDecoration( color: Color(0xFFCDE5FF), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(36), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( width: 36, height: 36, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe Fluent Icons', fontWeight: FontWeight.w400, height: 0.03, ), ), ], ), ), const SizedBox(height: 9), SizedBox( width: 144, child: Text( '5', textAlign: TextAlign.center, style: TextStyle( color: Color(0xFF001D32), fontSize: 36, fontFamily: 'Segoe UI', fontWeight: FontWeight.w400, height: 0.04, ), ), ), ], ), ), ], ), ), ], ), ), ], ), ), ], ), )If we look at this code there are unnecessary Row widgets in each Button component.
Then there is unnecessary Row widgets with encloses the all 4 button.
The above code generates following output
The output UI height is less than the expected height also. Please check once
The text was updated successfully, but these errors were encountered: