Scribd
Upload
11 views72 pages

Flutterldn

Uploaded by

alt.ci-6ob7mfgf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views72 pages

Flutterldn

Uploaded by

alt.ci-6ob7mfgf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 72

Creating

with
PhotoView
Creating
with
PhotoView
caraujo.me

Open Source
Renan Araújo
Porto, Portugal
Niks Bitmap Flame

Software Engineer
at dashdash
Flutter Portugal
meetup.com/FlutterPortugal
What is PhotoView?
Zoomable image widget
https://github.com/renancaraujo/photo_view
Zoomable image widget
https://github.com/renancaraujo/photo_view
Simplicity
Usability UX
Extensibility
Simple usage
Show some Code!
Double tap gestures
Pinch gesture
Rotation gesture
Exposes a controller
Gallery
…
Double tap gestures
Pinch gesture
Rotation gesture
Exposes a controller
Gallery
…
Creating
with
PhotoView
And learning stuff in the
process
How to keep a simple API when doing complex things
and at the same time being able to be customizable?
1st round
Lets put an image in the center

Apply some scale when double tapping


Container Image
Size Size
Image
Center

Image
Center

Gesture
Image Detector
Scale 1.0 =
Scale 1.0 =

Original size of the image


Solution:
SingleChildLayoutDelegate
Image
Our custom delegate widget

Image
Our custom delegate widget

Gesture
Image Detector
The scale state cycle

Initial
Covered Original
(contained)

We can customise it
Contained Covered
2nd round
Pinch gesture scales image

Rotation gesture rotates image


New scale state cycle

Initial
Covered Original
(contained)

Zooming
New scale state cycle

Initial
Covered Original
(contained)

Zooming
How scale gesture changes image scale

Gesture Start:
- Stops animations
- Saves actual state value (scale and position)
- Changes scale state to “Zooming”

Gesture Update:
- Applies new value (based on both saved state and gesture details)

Gesture End:
- Fling animate (based on gesture velocity)
How scale gesture changes image scale

Gesture Start:
- Stops animations
- Saves actual state value (scale and position)
- Changes scale state to “Zooming”

Gesture Update:
- Applies new value (based on both saved state and gesture details)

Gesture End:
- Fling animate (based on gesture velocity)
There was no rotation :(
How rotation works
How rotation works

1. Scale starts
How rotation works

1. Scale starts
2. We have a line

2
How rotation works

1. Scale starts
2. We have a line
3. Move fingers

2
How rotation works

1. Scale starts
2. We have a line
3. Move fingers
4. We have an angle 2
And then we have rotation
3rd round
Custom child

Put some limits: min, max and initial scale


Container Image
Size Size
in g
y th
A n
Container Image
Size Size
Putting some scale boundaries

maxScale = 2.0
Putting some scale boundaries

maxScale = 2.0 Easy peasy squeezy 🍋


Putting some scale boundaries

maxScale = 2.0 Easy peasy squeezy 🍋

minScale =
Putting some scale boundaries

maxScale = 2.0 Easy peasy squeezy 🍋

minScale =
Haaaaard
Sollution:
A different enum
4th round
Controllers!
PhotoView got state

Po
si tio
n Sc a l e

Scale state Rotation


The need

- Make things disappear when image is zoomed in


- Show the scale factor as a text in the screen

- Reset when button pressed


- Zoom in and out buttons
The solution
Controllers!
PhotoView

State
Controller
PhotoView
State (widget)
Controller
PhotoView
App (widget)
State
Controller
PhotoView
App (widget)
State

Instantiable separately
from the widget
5th round
Gallery!
PageView Approach
Sollution: our own gesture detector
Rounds cleared!
Future

- Custom physics (?)


- More controllability
- Improve image loading process
Thanks, see ya!
Vlw flw!

You might also like