Flutter、複雑な図形のボタンを作りたい。

前提・実現したいこと

複雑な図形のボタンを作りたい。
日本地図の各都道府県をタッチして、画面遷移したい。

発生している問題・エラーメッセージ

機能が実装できれば、特にこだわりはないのですが、GestureDetectorを使って実装しようとしています。
例えば、北海道の画像を作成し、それをGestureDetectorで囲います。
それタップして、画面遷移をさせようとしたら、動きはするのですが、余白を消し北海道の形の画像を使っているにも関わらず、タッチできる範囲が四角くなっています。
（北海道は菱形に近いので、画像の外側の４すみをタッチしても反応してしまいます。）
これをタッチできる範囲をうまく画像の形と一致できる方法あれば教えてもらいたいです。

（他の例で言うと、下記画像の青色で示されている部分をタッチしたら画面遷移するようにしたい際、右下の空間をタッチした時も画面遷移してしまうので、それを青色部分だけにしたいです。）

参考になるかはわかりませんが、「動きはする」コードのサンプルです

flutter
1import 'package:flutter/material.dart';
2import 'next_page.dart';
3
4void main() {
5  runApp(MyApp());
6}
7
8class MyApp extends StatelessWidget {
9  // This widget is the root of your application.
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      title: 'Flutter Demo',
14      theme: ThemeData(
15        primarySwatch: Colors.blue,
16        visualDensity: VisualDensity.adaptivePlatformDensity,
17      ),
18      home: MyHomePage(),
19    );
20  }
21}
22
23class MyHomePage extends StatelessWidget {
24  @override
25  Widget build(BuildContext context) {
26    return Scaffold(
27      appBar: AppBar(
28        title: Text('Sample App'),
29      ),
30      body: GestureDetector(
31          onTap: (){　
32　　　　　　//タップしたら次の画面へ遷移
33            Navigator.push(
34              context,
35              MaterialPageRoute(
36                  builder: (context) => NextPage()
37              ),
38            );
39          },
40          child: Image.asset('images/hokkaido.png')),//北海道の画像
41    );
42  }
43}