Browse Source

docs(favorite-images): Fix the structure of the readme and audit

pull/1958/head
miguel 2 years ago committed by MSilva95
parent
commit
3c849b36b7
  1. 52
      subjects/mobile-dev/favorite-images/README.md
  2. 24
      subjects/mobile-dev/favorite-images/audit/README.md

52
subjects/mobile-dev/favorite-images/README.md

@ -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.

24
subjects/mobile-dev/favorite-images/audit/README.md

@ -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…
Cancel
Save