はじめに
この記事はProviderを使って、Formとは別のファイルにあるボタンを押して「保存」する方法をざっくりと解説します。
外部ファイルで保存の処理を実行したい！！
これは一体どう言うことか？
下記の画面を見ながら説明する！
ファイルの構造
ファイルの構造は以下👇のようなイメージ
└ form_screen.dart
├ form_widget.dart
└ save_button.dart
・form_widget.dartが「作品の見所」から①、②、③の部分であり、ユーザーが入力をするFormの部分
・save_button.dartがFloatingActionButtonの部分で、このボタンを押すとユーザーがform_widget.dartで入力した内容が保存される
入力された値を保持するには？
入力した値を保持するには、以下のように_form.currentState.save()というような実装内容にしないといけませんよね
final _form = GlobalKey<FormState>();
String _userId;
String _password;
// 省略
body: Form(
key: _form, // 追加
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'id'),
onSaved: (value) {
_userId = value;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'password'),
onSaved: (value) {
_password = value;
},
),
TextButton(
child: Text('Save'),
onPressed: () {
_form.currentState.save(); // これが重要！！！
print(_userId);
print(_password);
},
),
しかし今回はFormと保存するボタンが別のファイルにあります！！
さてどうしましょう？
と言うのが、今回の肝になる内容です。
色々とやり方はあるとは思いますが、今回はProviderを使って実現しようと思います。
Providerを使って実装
・ProviderとFirebaseの導入は省略します。
・実際のソースは映画のAPIを使っており、今回の記事の内容とは関係のないソースが一部あります。適当に省略しているので、謎のコードがあっても気にしないでください。あくまで「参考」という事で！
ファイルの構造
あくまでイメージです。実際のソースでは差異があります。
lib/
├ main.dart
├ models
├ └ mypage_movie_model.dart
├ providers
│ └ mypage_movie_provider.dart
├ widgets
├ save_movie_text.dart
└ mypage_movie_form.dart
mypage_movie_model.dart
Providerの中でFormの入力データを扱うために、データの型を定義します。
import 'package:cloud_firestore/cloud_firestore.dart';
class MyPageMovieModel {
MyPageMovieModel(DocumentSnapshot doc) {
movieId = doc.id;
title = doc.data()['title'];
pointText1 = doc.data()['pointText1'];
pointText2 = doc.data()['pointText2'];
pointText3 = doc.data()['pointText3'];
}
String movieId;
String title;
String pointText1;
String pointText2;
String pointText3;
}
mypage_movie_provider.dart
Formの値を保持 + Firestoreに値を保存する処理を書きます。
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/mypage_movie_model.dart';
class MyPageMovieProvider with ChangeNotifier {
MyPageMovieModel myPageMovie;
String point1Text = '';
String point2Text = '';
String point3Text = '';
final uid = FirebaseAuth.instance.currentUser.uid;
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
// Formに入ってる内容をFirestoreに保存する
Future editMyMovies(String movieId) async {
final movieRef = _firestore.doc('users/${uid}/movies/${movieId}');
await movieRef.update({
'id': int.parse(movieId),
'point1': point1Text,
'point2': point2Text,
'point3': point3Text,
});
}
}
updateメソッドを使っていますが、保存と同じ意味です。
point1Textという値が、Providerを使うことによって「Formがあるファイル」と「保存ボタンがあるファイル」で共通化されるような、そんな認識かと！
save_movie_text.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'mypage_movie_form.dart';
import '../../providers/mypage_movie_provider.dart';
class SaveMovieText extends StatelessWidget {
final int id;
SaveMovieText(this.id);
@override
Widget build(BuildContext context) {
return Consumer<MyPageMovieProvider>(builder: (context, model, child) {
return FloatingActionButton(
onPressed: () async {
print('保存' + id.toString());
await model.editMyMovies(id.toString());
// FloatingActionButtonを押したら、Formに入力されてる内容が出力される！
print(model.point1Text);
print(model.point2Text);
print(model.point3Text);
},
child: const Icon(Icons.save),
backgroundColor: Theme.of(context).primaryColor,
);
});
}
}
model.point1Textというのが、mypage_movie_provider.dartで定義してある「point1Text」の事！
mypage_movie_form.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../common_UI/space_box.dart';
import '../../providers/mypage_movie_provider.dart';
class MyPageMovieForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<MyPageMovieProvider>(builder: (context, model, child) {
return Form(
child: ListView(
padding: EdgeInsets.only(top: 10),
shrinkWrap: true,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
shape: BoxShape.circle),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('1'),
],
),
),
SpaceBox.width(10),
Expanded(
child: TextFormField(
decoration: InputDecoration(labelText: '見所1'),
keyboardType: TextInputType.multiline,
maxLines: null,
textInputAction: TextInputAction.newline,
onChanged: (value) {
// ここでmypage_movie_provider.dartのpoint1Textに、入力した内容を反映してる
model.point1Text = value;
},
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
shape: BoxShape.circle),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('2'),
],
),
),
SpaceBox.width(10),
Expanded(
child: TextFormField(
decoration: InputDecoration(labelText: '見所2'),
keyboardType: TextInputType.multiline,
maxLines: null,
textInputAction: TextInputAction.newline,
onChanged: (value) {
model.point2Text = value;
},
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
shape: BoxShape.circle),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('3'),
],
),
),
SpaceBox.width(10),
Expanded(
child: TextFormField(
decoration: InputDecoration(labelText: '見所3'),
keyboardType: TextInputType.multiline,
maxLines: null,
textInputAction: TextInputAction.newline,
onChanged: (value) {
model.point3Text = value;
},
),
),
],
),
],
),
);
});
}
}
model.point1Textというのが、mypage_movie_provider.dartで定義してある「point1Text」の事！
main.dart
import 'package:provider/provider.dart';
import './providers/mypage_movie_provider.dart';
// 省略
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => MyPageMovieProvider(),
),
],
child: MaterialApp(
// 省略
あんまりよくわかってませんが、MultiProviderのchildにMaterialAppを置くことで、全て？がProviderの監視対象になるようです
（この認識が間違ってた教えて下さい
）
最後に
これで
・Providerを使ってFormに入力された値を保持
・Formとは別のファイルにあるボタンから保存を実行
ができました！
最初は色々なファイルに無理やり値を渡して試してみましたが、結局うまくいかず。。。。
Providerを使えば良い感じに実現できました。