flutter_device_preview
flutter_device_preview copied to clipboard
aloisdeniel
Add iPhone 14 Pro Max device support
This PR is almost done. But I need a little bit of help creating the frame. I might be wrong but fluttershapemaker has an issue now generating paint code from svg. It gives NaN on few places and that's why this PR is not ready but needs extra guidelines to solve this NaN issue.
In device_frame/lib/src/devices/ios/iphone_14_pro/frame.g.dart this file, from line 27 to 87, I've commented the code where actually the NaN value exists.
Here's the iPhone 14 Pro Max device figma link: https://www.figma.com/file/wZRgPlURZrOJl0kMiSJHk2
I've also tried using existence iPhone 13 Pro Max device Body.svg to generate paint code using fluttershapemaker.com and the result is also the same for existing already added frame body from figma. that generated iPhone 13 Pro Max frame Body also has NaN value. So my guess is it's a bug in fluttershapemaker.
I'd appreciate feedback and guideline to work further to merge this PR. Any kind of help would be highly appreciated. Thanks
btw, If you currently run this branch, you'll get this will be the output,
Hi @walid-ashik, I couldn’t find anyone asking about having status bar in device_preview. Can this feature be created somehow? If the status bar is part of the frame I guess?
Hi @walid-ashik, I couldn’t find anyone asking about having status bar in device_preview. Can this feature be created somehow? If the status bar is part of the frame I guess?
Hi @Mitagki . Can you please point me why you think this PR is about status bar? I am actually trying to add iPhone 14 Pro device support but couldn't complete it due to fluttershapemaker generates wrong frame paint code!
Hi @walid-ashik, I couldn’t find anyone asking about having status bar in device_preview. Can this feature be created somehow? If the status bar is part of the frame I guess?
Hi @Mitagki . Can you please point me why you think this PR is about status bar? I am actually trying to add iPhone 14 Pro device support but couldn't complete it due to fluttershapemaker generates wrong frame paint code!
I know my question is not related to this PR. I just wanted to ask someone who has recently used device_preview and is creating a frame for it, if a status bar can be part of the frame.
hey @bradrushworth, can you please take a look at the mentioned issue in the description?
hey @bradrushworth, can you please take a look at the mentioned issue in the description?
I could try. I'm not an expert so not sure.
hey @bradrushworth, can you please take a look at the mentioned issue in the description?
I could try. I'm not an expert so not sure.
please try and ask me any questions if you don't understand some parts. I'd be happy to help
So I fixed the issue with the SVG. There were entries like -9.42926e-05 that just needed to be converted to -0.0000942926
See the updated attached file.
After that, https://fluttershapemaker.com/ worked correctly and removed the NaN entries. I submitted a bug request to https://fluttershapemaker.com/
See my updates at: https://github.com/aloisdeniel/flutter_device_preview/pull/225/commits/0c8439f59b4e92b91a2b67920e4ca18a98aafa83
That said, the generated image is still not sitting correctly. I'm not sure what is needed next.
So I fixed the issue with the SVG. There were entries like -9.42926e-05 that just needed to be converted to -0.0000942926
See the updated attached file.
After that, https://fluttershapemaker.com/ worked correctly and removed the NaN entries. I submitted a bug request to https://fluttershapemaker.com/
See my updates at: https://github.com/aloisdeniel/flutter_device_preview/pull/225/commits/0c8439f59b4e92b91a2b67920e4ca18a98aafa83
That said, the generated image is still not sitting correctly. I'm not sure what is needed next.
Good to know the progress. I will take a look and get back to you. Thanks for the help
@walid-ashik your _screenPath is missing the top and left margin so i modified it a bit, here is the updated version:
part of 'device.dart';
// Generated manually with https://fluttershapemaker.com/
final _screenPath = Path()
..moveTo(135,25)
..cubicTo(81.4284,25,38,68.4284,38,122)
..lineTo(38,1624)
..cubicTo(38,1677.57,81.4284,1721,135,1721)
..lineTo(740,1721)
..cubicTo(793.572,1721,837,1677.57,837,1624)
..lineTo(837,122)
..cubicTo(837,68.4284,793.572,25,740,25)
..lineTo(135,25)
..close()
..moveTo(357.176,54)
..cubicTo(341.159,54,328.176,66.9837,328.176,83)
..cubicTo(328.176,99.0163,341.159,112,357.176,112)
..lineTo(515.784,112)
..cubicTo(531.801,112,544.784,99.0163,544.784,83)
..cubicTo(544.784,66.9837,531.801,54,515.784,54)
..lineTo(357.176,54)
..close()
..fillType = PathFillType.evenOdd;
It still has a small space on the left and right side though:
0c8439f
hi @hunghuy201280 , did you try @bradrushworth's https://github.com/aloisdeniel/flutter_device_preview/commit/0c8439f59b4e92b91a2b67920e4ca18a98aafa83 this commit?
He said he figured that out.
hi @hunghuy201280 , did you try @bradrushworth's 0c8439f this commit?
He said he figured that out.
Yes i tried but he did not update the _screenPath so it's still incorrectly aligned
@walid-ashik your _screenPath is missing the top and left margin so i modified it a bit, here is the updated version:
part of 'device.dart'; // Generated manually with https://fluttershapemaker.com/ final _screenPath = Path() ..moveTo(135,25) ..cubicTo(81.4284,25,38,68.4284,38,122) ..lineTo(38,1624) ..cubicTo(38,1677.57,81.4284,1721,135,1721) ..lineTo(740,1721) ..cubicTo(793.572,1721,837,1677.57,837,1624) ..lineTo(837,122) ..cubicTo(837,68.4284,793.572,25,740,25) ..lineTo(135,25) ..close() ..moveTo(357.176,54) ..cubicTo(341.159,54,328.176,66.9837,328.176,83) ..cubicTo(328.176,99.0163,341.159,112,357.176,112) ..lineTo(515.784,112) ..cubicTo(531.801,112,544.784,99.0163,544.784,83) ..cubicTo(544.784,66.9837,531.801,54,515.784,54) ..lineTo(357.176,54) ..close() ..fillType = PathFillType.evenOdd;It still has a small space on the left and right side though:
Hi mate. this looks almost done. can you share the full source code of frame.g.dart file?
here is the source code of frame.g.dart
@walid-ashik your _screenPath is missing the top and left margin so i modified it a bit, here is the updated version:
part of 'device.dart'; // Generated manually with https://fluttershapemaker.com/ final _screenPath = Path() ..moveTo(135,25) ..cubicTo(81.4284,25,38,68.4284,38,122) ..lineTo(38,1624) ..cubicTo(38,1677.57,81.4284,1721,135,1721) ..lineTo(740,1721) ..cubicTo(793.572,1721,837,1677.57,837,1624) ..lineTo(837,122) ..cubicTo(837,68.4284,793.572,25,740,25) ..lineTo(135,25) ..close() ..moveTo(357.176,54) ..cubicTo(341.159,54,328.176,66.9837,328.176,83) ..cubicTo(328.176,99.0163,341.159,112,357.176,112) ..lineTo(515.784,112) ..cubicTo(531.801,112,544.784,99.0163,544.784,83) ..cubicTo(544.784,66.9837,531.801,54,515.784,54) ..lineTo(357.176,54) ..close() ..fillType = PathFillType.evenOdd;It still has a small space on the left and right side though:
Hi mate. this looks almost done. can you share the full source code of
frame.g.dartfile?
here it is:
// ignore_for_file: require_trailing_commas, non_constant_identifier_names
import 'dart:ui' as ui;
part of 'device.dart';
// Generated manually with https://fluttershapemaker.com/
class _FramePainter extends CustomPainter {
const _FramePainter();
/*
iPhone 14 Pro Max device figma link can be found here
https://www.figma.com/file/wZRgPlURZrOJl0kMiSJHk2/Untitled?node-id=0%3A1
Then enter into https://fluttershapemaker.com/
*/
@override
void paint(Canvas canvas, Size size) {
Path path_0 = Path();
path_0.moveTo(866.809,495.105);
path_0.lineTo(869.904,495.105);
path_0.cubicTo(871.614,495.105,873,496.49,873,498.199);
path_0.lineTo(873,683.864);
path_0.cubicTo(873,685.572,871.614,686.958,869.904,686.958);
path_0.lineTo(866.809,686.958);
path_0.lineTo(866.809,495.105);
path_0.close();
Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Color(0xff213744).withOpacity(1.0);
canvas.drawPath(path_0,paint_0_fill);
Path path_1 = Path();
path_1.moveTo(6.19141,728.217);
path_1.lineTo(3.09565,728.217);
path_1.cubicTo(1.38592,728.217,-0.0000942926,726.831,-0.0000941431,725.122);
path_1.lineTo(-0.0000840393,609.598);
path_1.cubicTo(-0.0000838898,607.889,1.38593,606.503,3.09566,606.503);
path_1.lineTo(6.19142,606.503);
path_1.lineTo(6.19141,728.217);
path_1.close();
Paint paint_1_fill = Paint()..style=PaintingStyle.fill;
paint_1_fill.color = Color(0xff213744).withOpacity(1.0);
canvas.drawPath(path_1,paint_1_fill);
Path path_2 = Path();
path_2.moveTo(6.19141,573.496);
path_2.lineTo(3.09565,573.496);
path_2.cubicTo(1.38592,573.496,-0.0000942926,572.111,-0.0000941431,570.402);
path_2.lineTo(-0.0000840393,454.877);
path_2.cubicTo(-0.0000838898,453.168,1.38593,451.783,3.09566,451.783);
path_2.lineTo(6.19142,451.783);
path_2.lineTo(6.19141,573.496);
path_2.close();
Paint paint_2_fill = Paint()..style=PaintingStyle.fill;
paint_2_fill.color = Color(0xff213744).withOpacity(1.0);
canvas.drawPath(path_2,paint_2_fill);
Path path_3 = Path();
path_3.moveTo(6.19141,398.147);
path_3.lineTo(3.09566,398.147);
path_3.cubicTo(1.38592,398.147,-0.0000880937,396.761,-0.0000879442,395.052);
path_3.lineTo(-0.0000834336,343.479);
path_3.cubicTo(-0.0000832841,341.77,1.38593,340.384,3.09566,340.384);
path_3.lineTo(6.19141,340.384);
path_3.lineTo(6.19141,398.147);
path_3.close();
Paint paint_3_fill = Paint()..style=PaintingStyle.fill;
paint_3_fill.color = Color(0xff213744).withOpacity(1.0);
canvas.drawPath(path_3,paint_3_fill);
Path path_4 = Path();
path_4.moveTo(6.19141,187.727);
path_4.cubicTo(6.19141,137.811,6.19141,112.853,12.7571,92.6545);
path_4.cubicTo(26.0269,51.8322,58.046,19.8269,98.886,6.56288);
path_4.cubicTo(119.093,0,144.062,0,194,0);
path_4.lineTo(679,0);
path_4.cubicTo(728.938,0,753.907,0,774.114,6.56288);
path_4.cubicTo(814.954,19.8269,846.973,51.8322,860.243,92.6545);
path_4.cubicTo(866.808,112.853,866.808,137.811,866.808,187.727);
path_4.lineTo(866.808,1582.27);
path_4.cubicTo(866.808,1632.19,866.808,1657.15,860.243,1677.35);
path_4.cubicTo(846.973,1718.17,814.954,1750.17,774.114,1763.44);
path_4.cubicTo(753.907,1770,728.938,1770,679,1770);
path_4.lineTo(194,1770);
path_4.cubicTo(144.062,1770,119.093,1770,98.886,1763.44);
path_4.cubicTo(58.046,1750.17,26.0269,1718.17,12.7571,1677.35);
path_4.cubicTo(6.19141,1657.15,6.19141,1632.19,6.19141,1582.27);
path_4.lineTo(6.19141,187.727);
path_4.close();
Paint paint_4_fill = Paint()..style=PaintingStyle.fill;
paint_4_fill.color = Color(0xff213744).withOpacity(1.0);
canvas.drawPath(path_4,paint_4_fill);
Path path_5 = Path();
path_5.moveTo(679.825,4.12593);
path_5.lineTo(193.174,4.12593);
path_5.cubicTo(143.844,4.12593,119.668,4.15138,100.161,10.4869);
path_5.cubicTo(60.5778,23.3427,29.5438,54.3633,16.6824,93.9296);
path_5.cubicTo(10.3442,113.428,10.3187,137.593,10.3187,186.902);
path_5.lineTo(10.3187,1583.1);
path_5.cubicTo(10.3187,1632.41,10.3442,1656.57,16.6824,1676.07);
path_5.cubicTo(29.5438,1715.64,60.5778,1746.66,100.161,1759.51);
path_5.cubicTo(119.668,1765.85,143.844,1765.87,193.174,1765.87);
path_5.lineTo(679.825,1765.87);
path_5.cubicTo(729.155,1765.87,753.331,1765.85,772.838,1759.51);
path_5.cubicTo(812.421,1746.66,843.455,1715.64,856.317,1676.07);
path_5.cubicTo(862.655,1656.57,862.68,1632.41,862.68,1583.1);
path_5.lineTo(862.68,186.902);
path_5.cubicTo(862.68,137.593,862.655,113.428,856.317,93.9296);
path_5.cubicTo(843.455,54.3633,812.421,23.3427,772.838,10.4869);
path_5.cubicTo(753.331,4.15138,729.155,4.12593,679.825,4.12593);
path_5.close();
path_5.moveTo(14.7196,93.2921);
path_5.cubicTo(8.25488,113.18,8.25488,137.754,8.25488,186.902);
path_5.lineTo(8.25488,1583.1);
path_5.cubicTo(8.25488,1632.25,8.25488,1656.82,14.7196,1676.71);
path_5.cubicTo(27.7852,1716.9,59.3117,1748.42,99.5234,1761.48);
path_5.cubicTo(119.42,1767.94,144.005,1767.94,193.174,1767.94);
path_5.lineTo(679.825,1767.94);
path_5.cubicTo(728.995,1767.94,753.579,1767.94,773.476,1761.48);
path_5.cubicTo(813.687,1748.42,845.214,1716.9,858.279,1676.71);
path_5.cubicTo(864.744,1656.82,864.744,1632.25,864.744,1583.1);
path_5.lineTo(864.744,186.902);
path_5.cubicTo(864.744,137.754,864.744,113.18,858.279,93.2921);
path_5.cubicTo(845.214,53.0977,813.687,21.5848,773.476,8.5249);
path_5.cubicTo(753.579,2.06299,728.995,2.06299,679.825,2.06299);
path_5.lineTo(193.174,2.06299);
path_5.cubicTo(144.005,2.06299,119.42,2.06299,99.5234,8.5249);
path_5.cubicTo(59.3117,21.5848,27.7852,53.0977,14.7196,93.2921);
path_5.close();
Paint paint_5_fill = Paint()..style=PaintingStyle.fill;
paint_5_fill.color = Color(0xff8EADC1).withOpacity(1.0);
canvas.drawPath(path_5,paint_5_fill);
Path path_6 = Path();
path_6.moveTo(16.5107,183.601);
path_6.cubicTo(16.5107,137.525,16.5107,114.487,22.5714,95.842);
path_6.cubicTo(34.8204,58.1598,64.3765,28.6164,102.075,16.3727);
path_6.cubicTo(120.728,10.3147,143.776,10.3147,189.872,10.3147);
path_6.lineTo(683.128,10.3147);
path_6.cubicTo(729.224,10.3147,752.272,10.3147,770.925,16.3727);
path_6.cubicTo(808.624,28.6164,838.18,58.1598,850.429,95.842);
path_6.cubicTo(856.489,114.487,856.489,137.525,856.489,183.601);
path_6.lineTo(856.489,1586.4);
path_6.cubicTo(856.489,1632.48,856.489,1655.51,850.429,1674.16);
path_6.cubicTo(838.18,1711.84,808.624,1741.38,770.925,1753.63);
path_6.cubicTo(752.272,1759.69,729.224,1759.69,683.128,1759.69);
path_6.lineTo(189.872,1759.69);
path_6.cubicTo(143.776,1759.69,120.728,1759.69,102.075,1753.63);
path_6.cubicTo(64.3765,1741.38,34.8204,1711.84,22.5714,1674.16);
path_6.cubicTo(16.5107,1655.51,16.5107,1632.48,16.5107,1586.4);
path_6.lineTo(16.5107,183.601);
path_6.close();
Paint paint_6_fill = Paint()..style=PaintingStyle.fill;
paint_6_fill.color = Color(0xff121515).withOpacity(1.0);
canvas.drawPath(path_6,paint_6_fill);
Path path_7 = Path();
path_7.moveTo(683.128,0);
path_7.lineTo(695.511,0);
path_7.lineTo(695.511,10.3147);
path_7.lineTo(683.128,10.3147);
path_7.lineTo(683.128,0);
path_7.close();
Paint paint_7_fill = Paint()..style=PaintingStyle.fill;
paint_7_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_7,paint_7_fill);
Path path_8 = Path();
path_8.moveTo(856.489,177.413);
path_8.lineTo(866.808,177.413);
path_8.lineTo(866.808,189.79);
path_8.lineTo(856.489,189.79);
path_8.lineTo(856.489,177.413);
path_8.close();
Paint paint_8_fill = Paint()..style=PaintingStyle.fill;
paint_8_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_8,paint_8_fill);
Path path_9 = Path();
path_9.moveTo(6.19141,177.413);
path_9.lineTo(16.5106,177.413);
path_9.lineTo(16.5106,189.79);
path_9.lineTo(6.19141,189.79);
path_9.lineTo(6.19141,177.413);
path_9.close();
Paint paint_9_fill = Paint()..style=PaintingStyle.fill;
paint_9_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_9,paint_9_fill);
Path path_10 = Path();
path_10.moveTo(6.19141,1580.21);
path_10.lineTo(16.5106,1580.21);
path_10.lineTo(16.5106,1592.59);
path_10.lineTo(6.19141,1592.59);
path_10.lineTo(6.19141,1580.21);
path_10.close();
Paint paint_10_fill = Paint()..style=PaintingStyle.fill;
paint_10_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_10,paint_10_fill);
Path path_11 = Path();
path_11.moveTo(856.489,1580.21);
path_11.lineTo(866.808,1580.21);
path_11.lineTo(866.808,1592.59);
path_11.lineTo(856.489,1592.59);
path_11.lineTo(856.489,1580.21);
path_11.close();
Paint paint_11_fill = Paint()..style=PaintingStyle.fill;
paint_11_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_11,paint_11_fill);
Path path_12 = Path();
path_12.moveTo(177.489,1759.69);
path_12.lineTo(189.872,1759.69);
path_12.lineTo(189.872,1770);
path_12.lineTo(177.489,1770);
path_12.lineTo(177.489,1759.69);
path_12.close();
Paint paint_12_fill = Paint()..style=PaintingStyle.fill;
paint_12_fill.color = Color(0xff36454C).withOpacity(1.0);
canvas.drawPath(path_12,paint_12_fill);
Path path_13 = Path();
path_13.moveTo(372,13);
path_13.lineTo(499,13);
path_13.lineTo(499,17);
path_13.cubicTo(499,21.4183,495.418,25,491,25);
path_13.lineTo(380,25);
path_13.cubicTo(375.582,25,372,21.4183,372,17);
path_13.lineTo(372,13);
path_13.close();
Paint paint_13_fill = Paint()..style=PaintingStyle.fill;
paint_13_fill.color = Color(0xff262C2D).withOpacity(1.0);
canvas.drawPath(path_13,paint_13_fill);
Path path_14 = Path();
path_14.moveTo(372,13);
path_14.lineTo(499,13);
path_14.lineTo(499,17);
path_14.cubicTo(499,21.4183,495.418,25,491,25);
path_14.lineTo(380,25);
path_14.cubicTo(375.582,25,372,21.4183,372,17);
path_14.lineTo(372,13);
path_14.close();
Paint paint_14_fill = Paint()..style=PaintingStyle.fill;
paint_14_fill.color = Colors.black.withOpacity(1.0);
canvas.drawPath(path_14,paint_14_fill);
Path path_15 = Path();
path_15.moveTo(134,25);
path_15.cubicTo(80.4284,25,37,68.4284,37,122);
path_15.lineTo(37,1624);
path_15.cubicTo(37,1677.57,80.4284,1721,134,1721);
path_15.lineTo(739,1721);
path_15.cubicTo(792.572,1721,836,1677.57,836,1624);
path_15.lineTo(836,122);
path_15.cubicTo(836,68.4284,792.572,25,739,25);
path_15.lineTo(134,25);
path_15.close();
path_15.moveTo(356.176,54);
path_15.cubicTo(340.159,54,327.176,66.9837,327.176,83);
path_15.cubicTo(327.176,99.0163,340.159,112,356.176,112);
path_15.lineTo(514.784,112);
path_15.cubicTo(530.801,112,543.784,99.0163,543.784,83);
path_15.cubicTo(543.784,66.9837,530.801,54,514.784,54);
path_15.lineTo(356.176,54);
path_15.close();
Paint paint_15_fill = Paint()..style=PaintingStyle.fill;
paint_15_fill.color = Color(0xff000000).withOpacity(1.0);
canvas.drawPath(path_15,paint_15_fill);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
Hi mate @hunghuy201280 , @bradrushworth!
I'm able to finally create the iPhone 14 Pro device. Heres the result.
I wish this would be merged and everyone can use it!
@bradrushworth Hey bud, if you ever have time, can you include this Pr in yours? That would be much appreciated.
