Flutter大学アプリで、カレンダーの画像を見れるようにしました。
その際に、画像を２本指でズームインできるようにしたので、その方法をまとめます。
ズバリ、以下みたいな構成になっています。
calendar_page.dart
Column(
children: [
+ InteractiveViewer(
+ minScale: 1,
+ maxScale: 7,
+ child: Image.network(
+ calendarImageURL,
+ ),
+ ),
const CalendarWidget(),
const SizedBox(height: 16),
const Text(
'予定',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 2),
const EventList(),
],
),
画像をInteractiveViewerで囲んだあげて、どこまで拡大するかをmaxScaleで設定してあげるだけです。今回minScaleに関しては特に意識していません。
簡単ですが、以上です！
アプリはこちら
Flutter大学メンバーは、カレンダーが見れますのでチェックしてみてください！
Discussion