Storageへの画像アップロードで正しい挙動を得たい。

Question

実現したいこと

• Storageへの画像アップロードで正しい挙動を得たい。

前提

現在起きている事象としてプロフィール編集ページと投稿ページの画像で表示される画像が同じになってしまう事象が発生しており、理想の挙動としてはプロフィール編集ページでアップロードした画像と投稿ページでアップロードした画像はそれぞれ独立した挙動をしてほしいと思っています。

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

プロフィール編集ページと投稿ページの画像で表示される画像が同じになってしまっている

該当のソースコード

import 'dart:io';

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/cupertino.dart';
import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart';

class FunctionUtils {
  static Future<dynamic> getImageFromGallery(BuildContext context) async {
    try {
      ImagePicker picker = ImagePicker();
      PermissionStatus permissionStatus = await Permission.photos.request();
      if (permissionStatus.isGranted) {
        final pickedFile = await picker.pickImage(source: ImageSource.gallery);
        if (pickedFile != null) {
          return File(pickedFile.path);
        } else {
          return null;
        }
      } else if (permissionStatus.isDenied ||
          permissionStatus.isPermanentlyDenied) {
        if (kDebugMode) {
          print("Access Denied.");
        }
        if (context.mounted) {
          bool isOpened = await showAlertDialog(context);
          if (isOpened) {
            permissionStatus = await Permission.photos.request();
            if (permissionStatus.isGranted) {
              final pickedFile =
                  await picker.pickImage(source: ImageSource.gallery);
              if (pickedFile != null) {
                return File(pickedFile.path);
              } else {
                return null;
              }
            } else {
              return false;
            }
          } else {
            return false;
          }
        }
      } else {
        if (kDebugMode) {
          print("Exception occured.");
        }
        if (context.mounted) return;
        showAlertDialog(context);
        return false;
      }
    } catch (e) {
      if (kDebugMode) {
        print("$e");
      }
      showAlertDialog(context);
      return false;
    }
    // final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    // return File(pickedFile!.path);
    // if (pickedFile != null) {
    //   setState(() {
    //     image = File(pickedFile.path);
    //   });
    // }
  }

  static Future<bool> showAlertDialog(BuildContext context) async {
    bool isOpened = false;
    await showCupertinoDialog<bool>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) => CupertinoAlertDialog(
        title: const Text("Allow access to Photos"),
        content: const Text(
            "This will allow you to share the contents of your camera roll and use other functions. Go to Settings and tap Photos."),
        actions: [
          CupertinoDialogAction(
            isDestructiveAction: true,
            onPressed: () {
              Navigator.pop(context, false);
            },
            child: const Text(
              "Cancel",
            ),
          ),
          CupertinoDialogAction(
            isDefaultAction: true,
            onPressed: () {
              isOpened = true;
              Navigator.pop(context, true);
              openAppSettings();
            },
            child: const Text(
              "Settings",
              style: TextStyle(
                color: CupertinoColors.activeBlue,
              ),
            ),
          ),
        ],
      ),
    );
    return isOpened;
  }

  static Future<String?> uploadProfileImage(String uid, File image) async {
    final FirebaseStorage storageInstance = FirebaseStorage.instance;
    final Reference ref = storageInstance.ref().child(uid);

    try {
      await ref.putFile(image);
      String downloadUrl = await ref.getDownloadURL();
      if (kDebugMode) {
        print(
            "Profile image uploaded successfully. Download URL: $downloadUrl");
      }
      return downloadUrl;
    } catch (e) {
      if (kDebugMode) {
        print("Failed to upload profile image: $e");
      }
      return null;
    }
  }

  static Future<String> uploadPostImage(String uid, File image) async {
    final FirebaseStorage storageInstance = FirebaseStorage.instance;
    final Reference ref = storageInstance.ref().child('post_images').child(uid);
    await ref.putFile(image);
    String downloadUrl = await ref.getDownloadURL();
    if (kDebugMode) {
      print("post_image_path: $downloadUrl");
    }
    return downloadUrl;
  }

  static Future saveImage(File image) async {
    try {} catch (e) {}
  }
}

試したこと

現在起きている事象の解決策として、画像の格納先を参照しているコードが同じになっているか、セキュリティルールに間違いなどはないかなどを見ている状況です。現在はさまざまなことを試行錯誤している段階で、プロフィール編集ページで設定した画像の変更がプロフィールアイコンに適用されるというのではなく、投稿されている画像に適用されてしまう事象が発生しており混乱状態です。この場をお借りして有識者の方のお力をお借りしたいです。関連するコードが文字数制限に抵触するので、コメント欄に記載させていただきます。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-x64,
locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.79.2)
[✓] Connected device (3 available)
[✓] Network resources

Comments

[Jedda]

```home_page.dart
import 'package:chat_app/firestore/account_firestore.dart';
import 'package:chat_app/firestore/post_firestore.dart';
import 'package:chat_app/model/account.dart';
import 'package:chat_app/model/post.dart';
import 'package:chat_app/pages/image_zoom_page.dart';
import 'package:chat_app/pages/post_comment_page.dart';
import 'package:chat_app/pages/post_page.dart';
import 'package:chat_app/utils/authentication.dart';
import 'package:chat_app/utils/like_button.dart';
import 'package:chat_app/utils/share_button.dart';
import 'package:chat_app/utils/timeago.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
double padValue = 0;
Account myAccount = Authentication.myAccount!;

@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<QuerySnapshot>(
stream: PostFirestore.posts.snapshots(),
builder: (context, postSnapshot) {
if (postSnapshot.hasData) {
List<String> postAccountIds = [];
for (var doc in postSnapshot.data!.docs) {
Map<String, dynamic> data = doc.data() as Map<String, dynamic>;
if (!postAccountIds.contains(data['post_account_id'])) {
postAccountIds.add(data['post_account_id']);
}
}
return FutureBuilder<Map<String, Account>?>(
future: AccountFirestore.getPostUserMap(postAccountIds),
builder: (context, userSnapshot) {
if (userSnapshot.hasData &&
userSnapshot.connectionState == ConnectionState.done) {
return ListView.builder(
itemCount: postSnapshot.data!.docs.length,
itemBuilder: (context, index) {
Map<String, dynamic> data =
postSnapshot.data!.docs[index].data()
as Map<String, dynamic>;
Post post = Post(
id: postSnapshot.data!.docs[index].id,
postImagePath: data['image_path'],
postContent: data['content'],
postAccountId: data['post_account_id'],
postAccount:
userSnapshot.data![data['post_account_id']],
postTime: data['post_time'],
);
if (kDebugMode) {
print(post.postImagePath);
}
if (kDebugMode) {
print(post.postContent);
}
if (kDebugMode) {
print(post.postTime);
}
return Card(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.75,
child: Column(
children: [
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
myAccount.profileImagePath,
),
),
title: Text(
post.postAccount?.name ?? "Unknown",
style: const TextStyle(
fontWeight: FontWeight.bold,
color: CupertinoColors.black,
),
),
subtitle: Text(
post.postTime == null
? ""
: createTimeAgoString(
post.postTime!.toDate(),
),
style: const TextStyle(
fontWeight: FontWeight.normal,
color: CupertinoColors.systemGrey,
),
),
),
Expanded(
child: post.postImagePath != null
? GestureDetector(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (
context,
animation,
secondaryAnimation,
) =>
ImageZoomPage(
imagePath:
post.postImagePath!,
),
transitionsBuilder: (
context,
animation,
secondaryAnimation,
child,
) {
return const FadeUpwardsPageTransitionsBuilder()
.buildTransitions(
MaterialPageRoute(
builder: (context) =>
ImageZoomPage(
imagePath: post
.postImagePath!,
),
),
context,
animation,
secondaryAnimation,
child,
);
},
),
);
},
child: Padding(
padding:
const EdgeInsets.symmetric(
horizontal: 5.0,
),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
24.0),
image: DecorationImage(
image: NetworkImage(
post.postImagePath!),
fit: BoxFit.cover,
),
),
),
),
)
: Container(
height: MediaQuery.of(context)
.size
.height *
0.3,
width: MediaQuery.of(context)
.size
.width *
0.9,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(24.0),
color: CupertinoColors.systemGrey,
),
child: const Icon(
Icons.image,
color: CupertinoColors.white,
size: 64.0,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizo

[Jedda]

horizontal: 8.0,
vertical: 25.0,
),
child: Container(
alignment: Alignment.centerLeft,
width: double.infinity,
child: Text(
post.postContent,
style: const TextStyle(
fontSize: 16.0,
color: CupertinoColors.black,
),
),
),
),
const SizedBox(
height: 14.0,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
const Row(
children: [
LikeButton(),
SizedBox(
width: 8.0,
),
Text(
"Like",
style: TextStyle(
color: CupertinoColors.black,
),
),
],
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const PostCommentPage(),
),
);
},
child: const Row(
children: [
Icon(
Icons.mode_comment_outlined,
color: CupertinoColors.black,
),
SizedBox(
width: 8.0,
),
Text(
"Comments",
style: TextStyle(
color: CupertinoColors.black,
),
),
],
),
),
Row(
children: [
ShareButton(
content: post.postContent,
),
const SizedBox(
width: 8.0,
),
const Text(
"Share",
style: TextStyle(
color: CupertinoColors.black,
),
),
],
),
],
),
const SizedBox(
height: 12.0,
),
],
),
),
);
},
);
} else {
return Container();
}
});
} else {
return Container();
}
}),
floatingActionButton: FloatingActionButton(
backgroundColor: CupertinoColors.activeGreen,
elevation: 0.0,
foregroundColor: CupertinoColors.white,
onPressed: () => showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.85,
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: const PostPage(),
),
),
);
},
),
child: const Icon(
CupertinoIcons.add,
),
),
);
}
}
```

[Jedda]

```edit_account_page.dart
import 'dart:io';

import 'package:chat_app/firestore/account_firestore.dart';
import 'package:chat_app/model/account.dart';
import 'package:chat_app/pages/login_page.dart';
import 'package:chat_app/utils/authentication.dart';
import 'package:chat_app/utils/function_utils.dart';
import 'package:chat_app/utils/widget_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class EditAccountPage extends StatefulWidget {
const EditAccountPage({super.key});

@override
State<EditAccountPage> createState() => _EditAccountPageState();
}

class _EditAccountPageState extends State<EditAccountPage> {
Account myAccount = Authentication.myAccount!;
TextEditingController nameController = TextEditingController();
TextEditingController userIdController = TextEditingController();
TextEditingController selfIntroductionController = TextEditingController();
File? image;

ImageProvider getImage() {
if (image == null) {
return NetworkImage(myAccount.profileImagePath);
} else {
return FileImage(image!);
}
}

@override
void initState() {
super.initState();
nameController = TextEditingController(text: myAccount.name);
userIdController = TextEditingController(text: myAccount.userId);
selfIntroductionController =
TextEditingController(text: myAccount.selfIntroduction);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: WidgetUtils.createAppBar("Edit"),
body: Center(
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.05,
),
GestureDetector(
onTap: () async {
var result = await FunctionUtils.getImageFromGallery(context);
if (result != null) {
setState(
() {
image = File(result.path);
},
);
}
},
child: CircleAvatar(
foregroundImage: getImage(),
backgroundColor: CupertinoColors.activeGreen,
radius: 50,
child: const Icon(Icons.add),
),
),
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: TextField(
controller: nameController,
decoration: const InputDecoration(
hintText: "Name",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: CupertinoColors.black,
width: 2,
),
),
errorStyle: TextStyle(
color: CupertinoColors.systemRed,
),
),
cursorColor: CupertinoColors.black,
cursorWidth: 2.0,
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: TextField(
controller: userIdController,
decoration: const InputDecoration(
hintText: "ID",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: CupertinoColors.black,
width: 2,
),
),
errorStyle: TextStyle(
color: CupertinoColors.systemRed,
),
),
cursorColor: CupertinoColors.black,
cursorWidth: 2.0,
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: TextField(
controller: selfIntroductionController,
decoration: const InputDecoration(
hintText: "Self Introduction",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: CupertinoColors.black,
width: 2,
),
),
errorStyle: TextStyle(
color: CupertinoColors.systemRed,
),
),
cursorColor: CupertinoColors.black,
cursorWidth: 2.0,
),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () async {
if (nameController.text.isNotEmpty &&
userIdController.text.isNotEmpty &&
selfIntroductionController.text.isNotEmpty) {
String profileImagePath = myAccount.profileImagePath;
if (image != null) {
var result = await FunctionUtils.uploadProfileImage(
myAccount.id, image!);
if (result != null) {
profileImagePath = result;
} else {
if (kDebugMode) {
print("Failed to upload profile image.");
}
return;
}
}
// if (image == null) {
// profileImagePath = myAccount.profileImagePath;
// } else {
// var result = await FunctionUtils.uploadProfileImage(
// myAccount.id, image!);
// profileImagePath = result!;
// }
Account updateAccount = Account(
id: myAccount.id,
name: nameController.text,
profileImagePath: profileImagePath,
selfIntroduction: selfIntroductionController.text,
userId: userIdController.text,
);
// Authentication.myAccount = updateAccount;
var result = await AccountFirestore.updateUser(updateAccount);
if (result == true) {
if (!mounted) return;
setState(() {
myAccount = updateAccount;
});
Navigator.pop(context, true);
} else {
if (kDebugMode) {
print("Failed to update account.");
}
}
}
},
child: const Text("Update"),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () {
Authentication.signOut();
while (Navigator.canPop(context)) {
Navigator.pop(context);
}
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const LoginPage(),
),
);
},
child: const Text("Logout"),
),
const SizedBox(
height: 50,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: CupertinoColors.systemRed,
),
onPressed: () {
AccountFirestore.deleteUser(myAccount.id);
Authentication.deleteAuth();
Authentication.signOut();
while (Navigator.canPop(context)) {
Navigator.pop(context);
}
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const LoginPage(),
),
);
},
child: const Text(
"Delete Account",
style: TextStyle(
color: CupertinoColors.white,
),
),
),
],
),
),
);
}
}
```

[Jedda]

```post_page.dart
import 'dart:io';

import 'package:chat_app/firestore/post_firestore.dart';
import 'package:chat_app/model/post.dart';
import 'package:chat_app/utils/authentication.dart';
import 'package:chat_app/utils/function_utils.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PostPage extends StatefulWidget {
const PostPage({super.key});

@override
State<PostPage> createState() => _PostPageState();
}

class _PostPageState extends State<PostPage> {
TextEditingController contentController = TextEditingController();
File? image;
String uid = Authentication.myAccount!.id;
FocusNode focusNode = FocusNode();

@override
void initState() {
super.initState();
focusNode.addListener(() {
if (!focusNode.hasFocus) {
focusNode.requestFocus();
}
});
}

@override
void dispose() {
focusNode.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
appBar: AppBar(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
elevation: 0,
iconTheme: const IconThemeData(
color: CupertinoColors.black,
),
centerTitle: false,
title: const Text(
"Create post",
style: TextStyle(
color: CupertinoColors.black,
fontWeight: FontWeight.bold,
),
),
actions: [
OutlinedButton(
onPressed: () async {
if (contentController.text.isNotEmpty && image != null) {
final downloadUrl =
await FunctionUtils.uploadPostImage(uid, image!);
Post newPost = Post(
postContent: contentController.text,
postAccountId: Authentication.myAccount!.id,
id: '',
postImagePath: downloadUrl,
postAccount: Authentication.myAccount!,
postTime: Timestamp.now(),
);
var result = await PostFirestore.addPost(newPost);
if (result == true) {
if (!mounted) return;
Navigator.pop(context);
}
}
},
child: const Text(
"Post",
style: TextStyle(
color: CupertinoColors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
children: [
TextField(
controller: contentController,
maxLines: null,
focusNode: focusNode,
decoration: const InputDecoration(
hintText: "What's on your mind?",
border: InputBorder.none,
),
cursorColor: CupertinoColors.black,
),
const SizedBox(
height: 30,
),
image == null
? const SizedBox()
: ClipRRect(
borderRadius: BorderRadius.circular(24.0),
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.9,
child: Image.file(
image!,
fit: BoxFit.cover,
),
),
),
const Divider(height: 1),
ListTile(
leading: const Icon(CupertinoIcons.photo_fill),
title: const Text("Add a photo"),
onTap: () async {
var result = await FunctionUtils.getImageFromGallery(context);
if (result != null && result is File) {
setState(
() {
image = result;
},
);
}
},
),
],
),
),
),
);
}
}
```

Answer 1

それぞれStorageにpost_images、profile_imageというフォルダを作り、そこに格納されるようにしたところ、それぞれに格納できていることが分かりましたので、解決済みといたします。