Flutter側の下準備

前ページでsupabaseのセットアップが終わったので、今度はFlutter側の下準備になります。

supabaseパッケージのインストールから、iOS,Androidの設定、main関数の設定を行います。

新規プロジェクトの作成

Flutterプロジェクトを作成します。今回はガイドにあったsupabase_quickstartという名前で作成します。

依存関係の追加

プロジェクトを作ったら下記をコマンドラインに打ち込み、supabaseの依存関係を追加します。

flutter pub add supabase_flutter

pubpubspec.yamlにsupabaseパッケージが追加されています。flutter pub getでインストールします。

ディープリンクのセットアップ(supabaseコンソール)

ディープリンクを設定して、マジックリンクまたはOAuthを介してログインしたユーザーがアプリに戻ることができるようにします（原文ママ）

supabaseのコンソールの「authentication」アイコン（人の形）->隣のリストの「Settings」->とクリックして出現するSettingsメニューから「Additional Redirect URLs」フィールドに入力します

ここに「リダイレクトURL」を入れます。今回はスターターガイドにある下記を入力

io.supabase.flutterquickstart://login-callback/

右上のSAVEボタンを押して保存します（忘れずに）

尚、入力したURLは後で分割した意味で使うので、このような構成と覚えておきます。違う名前を付ける時もこのようなルールになると思います。

• io.supabase.flutterquickstart…scheme（スキーム）
• login-callback…host（ホスト）
• io.supabase.flutterquickstart://login-callback/…リダイレクトURL

android側の設定

まずはandroid用の設定をします。flutter側に戻りandroid/app/src/main/AndroidManifest.xmlを編集します。

下記のソースの<intent-filter>から</intent-filter>までを追加します。（ここからコピーする時はインデントなど気を付けた方がいいかも？）

activityタグの中には他の<intent-filter></intent-filter>タグのセクションがあると思うのでその次に追加するのが良いかも知れません。　

<manifest ...>
  <!-- 省略 -->
  <application ...>
    <activity ...>
      <!-- 省略 -->
      <!-- 追加するのはここから！intent-filterを追加 -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="io.supabase.flutterquickstart"
          android:host="login-callback" />
      </intent-filter>
      <!-- 追加するのはここまで！ -->
    </activity>
  </application>
</manifest>

先ほどのhostとschemeが分かれて定義してあります。独自のリダイレクトURLを作る際も同様な形になると思います。

iOS側の設定

iOSはios/Runner/Info.plistを編集します。

こちらのCFBundleURLTypesをコピーします。他のkeyの並びに記載します（ここからコピーする時はインデントなど気を付けた方がいいかも？）

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>io.supabase.flutterquickstart</string>
			</array>
		</dict>
	</array>

io.supabase.flutterquickstartの部分はディープリンクで設定したschemeです。

for WEB用の設定

追加の設定はありません

main関数の変更

main関数を変更し、Supabaseの初期化が行われるようにします。

「url」と「anonKey」は自分のAPIURLとAPIキーを入れます。

自分のAPIURLと自分のAPIキーの確認方法はこちらです　→　APIキーとAPIURL（ソースコードをgitにアップする方は要注意の部分も必ず読んでください)

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
  //！！gitにアップする予定の方は直に書いたものをアップしないでください！！
    url: '自分のAPIURL',
    anonKey: '自分のAPIキー',
  );
  runApp(MyApp());
}