📖

【Flutter】ロード画面を実装する

2024/06/01に公開

Flutter

tech

はじめに

モバイルアプリでよくあるロード画面の実装をしてみました。
こちらの記事を参考にさせていただきました。

ロード画面の実装

今回は、画像アップロードに時間がかかるため、その際にロード画面を表示します。
イメージとしては、Stackで画面全体にロード画面の要素を重ねるイメージです。
ロード画面の表示要否は変数isLoadingで制御します。
ロード中のサークルには、CircularProgressIndicatorを利用します。

@override
Widget build(BuildContext context) {
    return Stack(
        if (isLoading)
            onst Opacity(
                opacity: 0.7,
                child: ModalBarrier(
                    dismissible: false,
                    color: Colors.black,
                ),
            ),
        if (isLoading) const Center(child: CircularProgressIndicator())
    )
}

// 画像ファイルのアップロード
Future<void> _uploadImage() async {
    try {
        final ImagePicker picker = ImagePicker();
        final XFile? image = await picker.pickImage(source: ImageSource.gallery);
        if (image == null) {
            return;
        }

        // 画像のアップロード前に、ロード画面を表示
        setState(() {
            isLoading = true;
        });

        // Firebase Storageにアップロード
        await FirebaseStorage.instance.ref(fileName)
                .putFile(File(image.path));

        // 画像のアップロードが完了したら、ロード画面を非表示にする
        setState(() {
            isLoading = false;
        });
    } catch(e) {
        setState(() {
          isLoading = false;
        });
    }

画像をアップロードする際に、こんな感じになります。

気をつけなければいけないのは、画像のアップロードが正しく行えなかった場合、catchの中でisLoadingをfalseに戻してあげなければいけない点です。
仮にここの例外処理の記述がない場合、isLoadingはtrueのままとなってしまい、永遠にロード画面から戻れなくなるので、注意が必要です。

はじめに

ロード画面の実装

Discussion