Flutter: Custom Image/Video Picker
Budget: $250 – $750 CAD
**Please refer to the attached image for reference. An Adobe XD file will be provided upon hiring.
The Gallery screen is also quite simple in concept. The top header holds a tab bar with two items. One is "Camera". This tab only shows images/videos taken on the user's camera, not including screenshots, downloads etc. The "Other" tab shows all images/videos on the user's phone.
Below the tab bar images/videos are sectioned by date (Today, Yesterday, May 16, 2021, May 15, 2021...). This is similar to Google Photos. This requires some complex logic! As per the images/videos themselves, It is VERY important that the images maintain their orientation (i.e., portrait images/video have portrait thumbnails, and landscape images/video have landscape thumbnails). There should be 2 assets per row. Please refer to the attached image to see how the images/videos are laid out (this is very important), also note that the images/video thumbnails have rounded corners. Additionally, each video also has a timestamp of its length shown on the thumbnail (bottom right).
Scrolling through the gallery can be done by swiping down. When the user begins to swipe down a scroll tab appears on the right side (fades in) with an up/down arrow icon. At this point, the user can use that scroll tab to scroll down faster through their gallery. In front of the scroll tab, a date indicator appears (month and year) while scrolling down (see google photos for reference). If the user stops scrolling the scroll tab fades out.
As the images/videos load, they should fade in, and allow the user to scroll as fast as they want and not hindered by loading or lag.
The Gallery also has a search function where the user can search by date (Type the month/year and pictures and videos from that point appear).
Selecting any of the images/videos leads to a preview page. The transition to the preview page should be accomplished by enlarging the image/video and centring it on the screen (smooth transition). While on the preview page the user should be able to zoom in and out of the picture and play their video. At the top of the screen the date of the image/video should appear (i.e., when it was taken). If it was taken today it should say "today", otherwise it should have the date (see example in a provided photo).
This functionally will also be used to load images/videos from Firebase. Although you do not need to create a robust backend, you just need to show images/videos being loaded in the same format (i.e., two assets per a row, and images/videos sectioned by month).
The code should all be commented on, and documentation should be provided explaining the code.
Looking forward to working with you,
Cheers
The Gallery screen is also quite simple in concept. The top header holds a tab bar with two items. One is "Camera". This tab only shows images/videos taken on the user's camera, not including screenshots, downloads etc. The "Other" tab shows all images/videos on the user's phone.
Below the tab bar images/videos are sectioned by date (Today, Yesterday, May 16, 2021, May 15, 2021...). This is similar to Google Photos. This requires some complex logic! As per the images/videos themselves, It is VERY important that the images maintain their orientation (i.e., portrait images/video have portrait thumbnails, and landscape images/video have landscape thumbnails). There should be 2 assets per row. Please refer to the attached image to see how the images/videos are laid out (this is very important), also note that the images/video thumbnails have rounded corners. Additionally, each video also has a timestamp of its length shown on the thumbnail (bottom right).
Scrolling through the gallery can be done by swiping down. When the user begins to swipe down a scroll tab appears on the right side (fades in) with an up/down arrow icon. At this point, the user can use that scroll tab to scroll down faster through their gallery. In front of the scroll tab, a date indicator appears (month and year) while scrolling down (see google photos for reference). If the user stops scrolling the scroll tab fades out.
As the images/videos load, they should fade in, and allow the user to scroll as fast as they want and not hindered by loading or lag.
The Gallery also has a search function where the user can search by date (Type the month/year and pictures and videos from that point appear).
Selecting any of the images/videos leads to a preview page. The transition to the preview page should be accomplished by enlarging the image/video and centring it on the screen (smooth transition). While on the preview page the user should be able to zoom in and out of the picture and play their video. At the top of the screen the date of the image/video should appear (i.e., when it was taken). If it was taken today it should say "today", otherwise it should have the date (see example in a provided photo).
This functionally will also be used to load images/videos from Firebase. Although you do not need to create a robust backend, you just need to show images/videos being loaded in the same format (i.e., two assets per a row, and images/videos sectioned by month).
The code should all be commented on, and documentation should be provided explaining the code.
Looking forward to working with you,
Cheers