Flutter大学さんのYouTube動画を参考に記事を作成
flutter2.10.3で書いているのでコードに変更あり。constつけてます!
Streamについて前回学んでみて、以前何度かFlutter大学のProviderを使ったブックリストサンプルのチュートリアルをまたやってみて、コードの意味が理解できてきた気がする。
Dartの文法への理解不足が原因で、以前は、書き写すだけの漢字の書き取りと同じになっていて、outoputできていなかった😱
name: book_list_sample
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 used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.16.1 <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: ^1.14.1
cloud_firestore: ^3.1.12
provider: ^6.0.2
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: ^1.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.
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
Podfile
# Uncomment this line to define a global platform for your project
platform :ios, '10.0'
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'
project 'Runner', {
'Debug' => :debug,
'Profile' => :release,
'Release' => :release,
}
def flutter_root
generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
unless File.exist?(generated_xcode_build_settings_path)
raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
end
File.foreach(generated_xcode_build_settings_path) do |line|
matches = line.match(/FLUTTER_ROOT\=(.*)/)
return matches[1].strip if matches
end
raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end
require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
flutter_ios_podfile_setup
target 'Runner' do
use_frameworks!
use_modular_headers!
# FlutterFireの公式のドキュメントから追加したコード👇、これを追加するとFirebaseに速く接続出来る
pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '8.14.0'
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
end
end
main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'book_list/book_list_page.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BookListSample',
home: BookListPage(),
);
}
}
book_list/book_list_model.dart
import 'package:book_list_sample/domain/book.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class BookListModel extends ChangeNotifier {
// Stream型、ジェネリティクスがQuerySnapshot
final Stream<QuerySnapshot> _usersStream =
FirebaseFirestore.instance.collection('books').snapshots();
// List型のジェネリティクスに、Bookクラスを使い、nullを許容する。
List<Book>? books;
void fetchBookList() {
// データが入った変数を.listenで繰り返し処理する。
_usersStream.listen((QuerySnapshot snapshot) {
// map関数→toList関数
// 与えられた各要素を新しく格納する値として修正し、それらを新しいリストとする
final List<Book> books = snapshot.docs.map((DocumentSnapshot document) {
// Map型は、keyと呼ばれる値とvalueと呼ばれる値を紐付けて格納するオブジェクトです。
// キーを指定して値を配列に格納
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
final String title = data['title'];
final String author = data['author'];
return Book(title, author);
}).toList();
this.books = books;
notifyListeners();
});
}
}
book_list/book_list_page.dart
import 'package:book_list_sample/book_list/book_list_model.dart';
import 'package:book_list_sample/domain/book.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class BookListPage extends StatelessWidget {
const BookListPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// Providerの上位Widgetの値の取得を発展させ、データが変わったことを通知する
return ChangeNotifierProvider<BookListModel>(
// BookListModelのfetchBookList()を..で呼び出す👇
create: (_) => BookListModel()..fetchBookList(),
child: Scaffold(
appBar: AppBar(
title: const Text('本一覧'),
),
body: Center(
// Consumerは、インスタンスが変更されるとbuilderに渡された関数がビルドされます。
child: Consumer<BookListModel>(builder: (context, model, child) {
final List<Book>? books = model.books;
if (books == null) {
// 🌀回るアイコンを表示する
return const CircularProgressIndicator();
}
// 与えられた各要素に処理を掛けた後に、その要素群に対する新しいリストを作成する。
final List<Widget> widgets = books
.map(
(book) => ListTile(
title: Text(book.title),
subtitle: Text(book.author),
),
)
.toList();
return ListView(
children: widgets,
);
}),
),
floatingActionButton: const FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
domain/book.dart
class Book {
Book(this.title, this.author);
String title;
String author;
}
buildしてみる
最後に
Flutter初めて5ヶ月になりますが、いまだにProvider使いこなせていないし、Firebaseと連携させる方法も理解できていない😱
いい教材はないかと、探すが今のところFlutter大学さん以外に見当たらない?
しかし、真似してばかりでは自分でロジックを考えることもできないのでもし、この書き方が使えなくなったら、他の方法でもできるようにならないといけないので、他の方法も考えないといけないですね🤔
最近はRiverpodが流行っておりますが、地方都市でもGetx使ってる企業あるので、Flutter始めた方々も検討してはいかがでしょうか?
でも、Provider、Riverpodの方が圧倒的多い!!!!
追加情報
Streamを使わない方法で取得する
import 'package:book_list_sample/domain/book.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class BookListModel extends ChangeNotifier {
// List型のジェネリティクスに、Bookクラスを使い、nullを許容する。
List<Book>? books;
// データが入った変数を.listenで繰り返し処理する。
void fetchBookList() async {
// sanpshotを使う。型はQuerySnapshot型
final QuerySnapshot snapshot = await FirebaseFirestore.instance.collection('books').get();
// map関数→toList関数
// 与えられた各要素を新しく格納する値として修正し、それらを新しいリストとする
final List<Book> books = snapshot.docs.map((DocumentSnapshot document) {
// Map型は、keyと呼ばれる値とvalueと呼ばれる値を紐付けて格納するオブジェクトです。
// キーを指定して値を配列に格納、asで、Map型に変換する
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
final String title = data['title'];
final String author = data['author'];
return Book(title, author);
}).toList();
this.books = books;
notifyListeners();
}
}
感想
Kboyさんの動画が一番わかりやすい気がするな~
他の教材は中途半端なものが多い気がする?
英語の教材Udemyで買って、動画を見てみたのですが、StatefunWidgetでProvider使ってたよ?
あまり参考になりませんでした😅