Make a photo preview in Flutter
Recently, I started developing Flutter in earnest, and I am often surprised and surprised at how easy it is to develop Flutter.
Under such circumstances, when I tried to make a preview that can enlarge /shrink the photo, I wondered how to make it, and after investigating various things, it was much easier than expected and I could make it without using an external package, so I will leave it as a memorandum.
Use InteractiveViewer for pinch-in / pinch-out
InteractiveViewer can be used when you want to enlarge / shrink the widget with Flutter.
You can use it to create previews of your photos that you can easily zoom in and out.
The code is below.
InteractiveViewer(
minScale: 0.1,
maxScale: 5,
child: Container(
child: Image.asset('images/sample.JPG'),
color: Colors.black,
),
)
With this alone, you can implement a function like the above capture.
(the capture photo is a photo of the beef stew I made before lol)
The convenient function of this is not only the image but also the enlargement / shrink of the Widget itself can be done, so it is possible to enlarge / reduce even if another layer such as title or date is overlaid on the above image.
InteractiveViewer(
minScale: 0.1,
maxScale: 5,
child: Container(
child: Center(
child: Stack(
alignment: Alignment.center,
children: [
Image.asset('images/sample.JPG'),
Text(
'美味しいビーフシチュー',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold),
),
],
),
),
color: Colors.black,
))
I thought I would use a library, but this time I needed to be able to zoom in / out other than pure images, and I couldn’t use something like a so-called photo preview, so I’m glad it was easy to make without spending much time with the standard library!
There are times when Swift is easier to write, but there are many situations where Flutter is easier to implement, such as this implementation and hot reload, and I am more and more obsessed with the appeal of Flutter development lol
