🎆
Firebaseに画像をuploadしたい
結構難しい!
Firebaseに画像を保存するのを過去に何度かやったことありますが、CRUDより難しくて、未だに参考にしないと作れないです😅
今回は、FirebaseStorageに画像をuploadして、Cloud FireStoreに画像のパスを保存して、別のページでテキストと画像を表示するプログラムをこちらの動画を参考に作成しました。
今回参考にして作成したプログラムは、カメラのアイコンを押すと、写真を撮影して、次に入力フォームに文字を入力して、保存ボタンを押すとFirebaseに文字と画像のパスを保存することができます。
画像はFirebaseStorageに保存され格納するフォルダも自動で作成されます。
アプリを作る前にやること
- FireStoreに、「shopping_list」というコレクションを作成しておく(コレクションが存在しないと画像のパスを保存できない!).
- FirebaseStorageを使用できる状態にして、セキュリティルールは、trueにする.
- 必要なpackageをinstallする.
完成したアプリのスクリーンショット
アプリを作成する
pubspec.yaml
name: photo_app
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=2.18.0 <3.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
firebase_core: ^2.4.0
cloud_firestore: ^4.3.0
firebase_storage: ^11.0.9
image_picker: ^0.8.6
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
カメラ機能を使うページを作成する
dart
import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:photo_app/list_page.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const AddItem(),
);
}
}
class AddItem extends StatefulWidget {
const AddItem({Key? key}) : super(key: key);
State<AddItem> createState() => _AddItemState();
}
class _AddItemState extends State<AddItem> {
TextEditingController _controllerName = TextEditingController();
TextEditingController _controllerQuantity = TextEditingController();
GlobalKey<FormState> key = GlobalKey();
CollectionReference _reference =
FirebaseFirestore.instance.collection('shopping_list');
String imageUrl = '';
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add an item'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
key: key,
child: Column(
children: [
TextFormField(
controller: _controllerName,
decoration:
InputDecoration(hintText: 'Enter the name of the item'),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter the item name';
}
return null;
},
),
TextFormField(
controller: _controllerQuantity,
decoration:
InputDecoration(hintText: 'Enter the quantity of the item'),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter the item quantity';
}
return null;
},
),
IconButton(
onPressed: () async {
/*
* Step 1. Pick/Capture an image (image_picker)
* Step 2. Upload the image to Firebase storage
* Step 3. Get the URL of the uploaded image
* Step 4. Store the image URL inside the corresponding
* document of the database.
* Step 5. Display the image on the list
*
* */
/*Step 1:Pick image*/
//Install image_picker
//Import the corresponding library
ImagePicker imagePicker = ImagePicker();
XFile? file =
await imagePicker.pickImage(source: ImageSource.camera);
print('${file?.path}');
if (file == null) return;
//Import dart:core
String uniqueFileName =
DateTime.now().millisecondsSinceEpoch.toString();
/*Step 2: Upload to Firebase storage*/
//Install firebase_storage
//Import the library
//Get a reference to storage root
Reference referenceRoot = FirebaseStorage.instance.ref();
Reference referenceDirImages =
referenceRoot.child('images');
//Create a reference for the image to be stored
Reference referenceImageToUpload =
referenceDirImages.child('name');
//Handle errors/success
try {
//Store the file
await referenceImageToUpload.putFile(File(file!.path));
//Success: get the download URL
imageUrl = await referenceImageToUpload.getDownloadURL();
} catch (error) {
//Some error occurred
}
},
icon: Icon(Icons.camera_alt)),
ElevatedButton(
onPressed: () async {
if (imageUrl.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Please upload an image')));
return;
}
if (key.currentState!.validate()) {
String itemName = _controllerName.text;
String itemQuantity = _controllerQuantity.text;
//Create a Map of data
Map<String, String> dataToSend = {
'name': itemName,
'quantity': itemQuantity,
'image': imageUrl,
};
//Add a new item
_reference.add(dataToSend);
}
},
child: Text('保存')),
ElevatedButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => ItemList()));
},
child: Text('ListPage'))
],
),
),
),
);
}
}
保存した画像と文字を表示する
画面遷移先で、FireStoreから取得した、画像のパスとテキストを取得して画面に表示する。
list.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class ItemList extends StatelessWidget {
ItemList({Key? key}) : super(key: key) {
_stream = _reference.snapshots();
}
CollectionReference _reference =
FirebaseFirestore.instance.collection('shopping_list');
//_reference.get() ---> returns Future<QuerySnapshot>
//_reference.snapshots()--> Stream<QuerySnapshot> -- realtime updates
late Stream<QuerySnapshot> _stream;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Items'),
),
body: StreamBuilder<QuerySnapshot>(
stream: _stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
//Check error
if (snapshot.hasError) {
return Center(child: Text('Some error occurred ${snapshot.error}'));
}
//Check if data arrived
if (snapshot.hasData) {
//get the data
QuerySnapshot querySnapshot = snapshot.data;
List<QueryDocumentSnapshot> documents = querySnapshot.docs;
//Convert the documents to Maps
List<Map> items = documents.map((e) => e.data() as Map).toList();
//Display the list
return ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
//Get the item at this index
Map thisItem = items[index];
//REturn the widget for the list items
return ListTile(
title: Text('${thisItem['name']}'),
subtitle: Text('${thisItem['quantity']}'),
leading: Container(
height: 80,
width: 80,
child: thisItem.containsKey('image')
? Image.network('${thisItem['image']}')
: Container(),
),
);
});
}
//Show loader
return Center(child: CircularProgressIndicator());
},
), //Display a list // Add a FutureBuilder
);
}
}
最後に
画像の保存機能は、packageの使い方やFirebaseStorageの文法を理解してないと、使いこなせないのに苦労しました。
あまり画像系のアプリの情報ってない気がして、学習するのに手こずってます😅
Discussion