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](https://private-user-images.githubusercontent.com/34264828/304368205-8bf7a4cb-264b-4c23-bef0-ba921037cdf2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3ODcxMTIsIm5iZiI6MTcxOTc4NjgxMiwicGF0aCI6Ii8zNDI2NDgyOC8zMDQzNjgyMDUtOGJmN2E0Y2ItMjY0Yi00YzIzLWJlZjAtYmE5MjEwMzdjZGYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjMwVDIyMzMzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYyMjZjMDlkNjgxZDkzMDEyMGEyYTNmZTBlMzQyZDUzYTBkNTM4MTA0MDg5MzQyZGUxNThhYWY3ZmIzNzA3MWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.DbFg1_atllh06jqlPmLqHqZWWVQ-lQdMZ6VWhlzVSgk)
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](https://private-user-images.githubusercontent.com/34264828/304376119-d87f5f5e-30cf-4d4e-a5d4-c5770d5ec881.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3ODcxMTIsIm5iZiI6MTcxOTc4NjgxMiwicGF0aCI6Ii8zNDI2NDgyOC8zMDQzNzYxMTktZDg3ZjVmNWUtMzBjZi00ZDRlLWE1ZDQtYzU3NzBkNWVjODgxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjMwVDIyMzMzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYwOTg4NTllMTI3NDg1MDhjYjE0ZjVmMmU1NjZkYmQ1NDQ5OTdjZjlkYmM1OTk0NmY1NDYyYzk4ZDJjM2FmZjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ONGUo0lVBkQCZI_-pa3KjP2lcWxXimYX-vhgL8sjMSc)
The output UI height is less than the expected height also. Please check once