mirror of https://github.com/01-edu/public.git
2 changed files with 52 additions and 24 deletions
@ -1,34 +1,50 @@ |
|||||||
# Favorite Images |
## Favorite Images |
||||||
|
|
||||||
### Introduction |
Nowadays, it is very difficult to imagine a popular app that does not work with storing, accessing images. This is a practical exercise designed to help you practice it in a mobile app. |
||||||
|
|
||||||
Nowadays, it is very difficult to imagine a popular app that does not work with storing, accessing images. |
This app must allows you to create a personal gallery where you can upload images from your phone library or take new pictures and immediately add them to your collection. |
||||||
In this app you will get a chance to practise it. |
|
||||||
You should create your gallery, where you can load images from phone library or take a picture and immediately upload it. |
|
||||||
|
|
||||||
Allowed package: [image_picker](https://pub.dev/packages/image_picker). |
To build this app, you have as allowed packages the [image_picker](https://pub.dev/packages/image_picker), which enables you to access the device's camera and gallery. |
||||||
|
|
||||||
### First Part |
### Instructions |
||||||
|
|
||||||
- Create an appbar with **IconButton**. |
### Image Picker |
||||||
- When you click on a button you should see 2 options: open camera or a gallery. |
|
||||||
- See the usage of [image_picker](https://pub.dev/packages/image_picker) package. |
In the first part of the exercise, you will create an `appbar` with an **IconButton**. |
||||||
- Don't forget to add special keys to Info.plist file under ios folder to access the camera and gallery, see [example](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html). |
When the user clicks on the button, they should see two options: |
||||||
- Show "No images selected" message if no images are loaded. |
|
||||||
|
- Open the camera. |
||||||
|
- Access the gallery. |
||||||
|
|
||||||
|
> Note: Your camera must work both in `iOS` and `Android`. |
||||||
|
|
||||||
|
You should use the `image_picker` package to implement this functionality. Additionally, you should show a `"No images selected"` message if no images have been loaded. |
||||||
|
|
||||||
|
> Note: Don't forget to add special keys to Info.plist file under ios folder to access the camera and gallery, see [example](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html). |
||||||
|
|
||||||
<center> |
<center> |
||||||
<img src="./resources/imageLibrary.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
<img src="./resources/imageLibrary.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
||||||
|
|
||||||
</center> |
</center> |
||||||
|
|
||||||
### Second Part |
### Image Gallery |
||||||
|
|
||||||
|
In the second part of the exercise, you will add the following functionalities: |
||||||
|
|
||||||
- When user is done picking image or taking picture it should be added to GridList |
- Add the selected image or taken picture to a `GridList` to display all the images in your collection. |
||||||
- When an image is tapped, user should see the whole image |
- Implement the ability for the user to `tap on an image` and view the entire picture, providing a better user experience. |
||||||
- Add an ability to zoom in, zoom out the image, see [example](https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html). |
- Add the ability for the user to `zoom in and out` of the image, allowing them to see the image details more clearly. |
||||||
|
|
||||||
<center> |
<center> |
||||||
<img src="./resources/imageLibrary.02.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
<img src="./resources/imageLibrary.02.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
||||||
|
|
||||||
<img src="./resources/imageLibrary.03.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
<img src="./resources/imageLibrary.03.png?raw=true" style = "width: 210px !important; height: 420px !important;"/> |
||||||
</center> |
</center> |
||||||
|
|
||||||
|
### Bonus |
||||||
|
|
||||||
|
Here are three possible bonus features you could add to this project: |
||||||
|
|
||||||
|
- `Image editing features`, you could add basic image editing functionalities such as cropping, rotating, or adding filters to the images before they are added to the gallery. |
||||||
|
|
||||||
|
- `Cloud storage` to make sure that the user's images are safe, you could implement cloud storage so that the images are stored on a remote server rather than just on the user's device. |
||||||
|
|
||||||
|
- `Sharing options`, to improve the user experience, you could add sharing options so that users can easily share their favorite images on social media platforms or through email or messaging. |
||||||
|
@ -1,17 +1,29 @@ |
|||||||
#### Functional |
#### Functional |
||||||
|
|
||||||
> In order to run and hot reload app either on emulator or device, follow the [instructions](https://docs.flutter.dev/get-started/test-drive?tab=androidstudio#run-the-app) |
> In order to run and hot reload the app either on emulator or device, follow the [instructions](https://docs.flutter.dev/get-started/test-drive?tab=androidstudio#run-the-app) |
||||||
|
|
||||||
|
##### Create a new empty personal gallery. |
||||||
|
|
||||||
###### Does the app show "No images selected" message when no images are loaded? |
###### Does the app show "No images selected" message when no images are loaded? |
||||||
|
|
||||||
###### Does the app have a select image button in the appbar? |
###### Does the app have a `select image` button in the `appbar`? |
||||||
|
|
||||||
|
##### Tap on the select image button. |
||||||
|
|
||||||
###### Tap on the select image button. Do you have an option to choose an image from gallery and take a picture? |
###### Do you have an option to `choose an image` from gallery and `take a picture`? |
||||||
|
|
||||||
###### Does the camera work both in iOS and Android? |
###### Does the camera work both in `iOS` and `Android`? |
||||||
|
|
||||||
###### Does the app load chosen image? |
###### Does the app load chosen image? |
||||||
|
|
||||||
###### Tap on the image. Does it become full-size? |
###### Does the image opens in `full-size` once taped? |
||||||
|
|
||||||
|
###### Can you `zoom in and out` the image? |
||||||
|
|
||||||
|
#### Bonus |
||||||
|
|
||||||
|
###### Does the app provide image editing features such as cropping, rotating, or adding filters to images? |
||||||
|
|
||||||
|
###### Does the app implement cloud storage to store images on a remote server? |
||||||
|
|
||||||
###### Can you zoom in, zoom out the image? |
###### Does the app have sharing options to share images on social media platforms or through email or messaging? |
||||||
|
Loading…
Reference in new issue