はじめに
前回のログインアプリをflutter_riverpodを使用して、MVVM風にリファクタしてみました。
前回作成したアプリ(https://qiita.com/yufuku/items/24dac97e6052b2571386)
今回のゴールはview(ui)側で実装していた処理をviewModelに移行して、view側ではstateを持たないようにすることです。
最初のフォルダ構成とコードは下記になります。
└──lib
├── main.dart
├── requester
│ └── requester.dart
└── ui
├── hello.dart
└── login.dart
lib/main.dart
import 'package:flutter/material.dart';
import 'package:authentication_frontend/ui/login.dart';
void main() {
runApp(const LoginApp());
}
lib/ui/login.dart
import 'package:authentication_frontend/ui/hello.dart';
import 'package:authentication_frontend/requester/requester.dart';
import 'package:flutter/material.dart';
class LoginApp extends StatelessWidget {
const LoginApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ログイン画面',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const LoginPage(title: 'Login Page'),
);
}
}
class LoginPage extends StatefulWidget {
const LoginPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _userNameTextController = TextEditingController();
final _passwordNameTextController = TextEditingController();
final FocusNode _userNamefocusNode = FocusNode();
final FocusNode _passwordNameFocusNode = FocusNode();
var _errorMessage = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_errorMessage, style: const TextStyle(color: Colors.red)),
TextField(
controller: _userNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Username',
),
focusNode: _userNamefocusNode,
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Password',
),
focusNode: _passwordNameFocusNode,
obscureText: true,
),
ButtonBar(
children: <Widget>[
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_userNameTextController.clear();
_passwordNameTextController.clear();
},
),
ElevatedButton(
child: const Text('LOGIN'),
onPressed: () {
Requester()
.loginRequester(_userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
setState(() {
_errorMessage = "";
});
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
debugPrint(error.toString());
_userNameTextController.clear();
_passwordNameTextController.clear();
setState(() {
_errorMessage = "ログインに失敗しました。ユーザー名かパスワードが間違っています。";
});
});
}),
ElevatedButton(
child: const Text('SIGNUP'),
onPressed: () {
Requester()
.signUpRequester(_userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
setState(() {
_errorMessage = "";
});
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
debugPrint(error.toString());
_userNameTextController.clear();
_passwordNameTextController.clear();
setState(() {
_errorMessage = "ユーザーの作成に失敗しました。既に登録済みのユーザーです。";
});
});
}),
],
),
],
),
),
);
}
}
lib/ui/hello.dart
import 'package:authentication_frontend/requester/requester.dart';
import 'package:flutter/material.dart';
class Hello extends StatefulWidget {
const Hello({Key? key}) : super(key: key);
@override
_HelloState createState() => _HelloState();
}
class _HelloState extends State<Hello> {
var _message = "";
@override
void initState() {
super.initState();
Requester().helloRequester().then((value) {
setState(() {
_message = value;
});
}).onError((error, stackTrace) {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("認証に失敗しました。再ログインをお願いします。"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context), child: Text("OK")),
],
);
}).then((_) {
Navigator.pop(context);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
centerTitle: true,
automaticallyImplyLeading: false,
actions: [
TextButton(
onPressed: () {
Requester().logoutRequester().then((_) {
Navigator.pop(context);
});
},
child: const Text('LOGOUT',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
),
],
),
body: Padding(
padding: EdgeInsets.only(top: 100),
child: Center(
child: Column(
children: [Text(_message, style: TextStyle(fontSize: 50.0))],
),
),
),
);
}
}
今回は上記のファイルを変更していきます。
また、今回は変更の対象ではないですが、apiのリクエスト部分の処理はrequester.dartにまとめています。
lib/requester/requester.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class TokenExipireException implements Exception {
final String message;
const TokenExipireException(this.message);
@override
String toString() => message;
}
class Requester {
String uri = defaultTargetPlatform == TargetPlatform.android
? 'http://10.0.2.2:8080/v1/'
: 'http://127.0.0.1:8080/v1/';
Map<String, String> headers = {
"Content-Type": "application/json",
};
final storage = new FlutterSecureStorage();
Requester() {}
Future<void> loginRequester(String name, String password) async {
var loginUri = uri + "auth/login";
var request = AuthRequest(name: name, password: password);
final response = await http.post(Uri.parse(loginUri),
body: json.encode(request.toJson()), headers: headers);
if (response.statusCode == 200) {
Map<String, dynamic> decoded = json.decode(response.body);
var loginResponse = AuthResponse.fromJson(decoded);
debugPrint(loginResponse.accessToken);
await storage.write(key: "accessToken", value: loginResponse.accessToken);
await storage.write(key: "refreshToken", value: loginResponse.refreshToken);
} else {
throw Exception("Login Error");
}
}
Future<void> signUpRequester(String name, String password) async {
var signUpUri = uri + "auth/signup";
var request = AuthRequest(name: name, password: password);
final response = await http.post(Uri.parse(signUpUri),
body: json.encode(request.toJson()), headers: headers);
if (response.statusCode == 200) {
Map<String, dynamic> decoded = json.decode(response.body);
var signUpResponse = AuthResponse.fromJson(decoded);
await storage.write(
key: "accessToken", value: signUpResponse.accessToken);
await storage.write(
key: "refreshToken", value: signUpResponse.refreshToken);
debugPrint(signUpResponse.accessToken);
} else {
throw Exception("Sign UP Error");
}
}
Future<String> helloRequester() async {
var helloUri = uri + "hello";
var accessToken = await storage.read(key: "accessToken");
headers["Authorization"] = accessToken ?? "";
debugPrint("send helloRequester");
final response = await http.get(Uri.parse(helloUri), headers: headers);
if (response.statusCode == 200) {
Map<String, dynamic> decoded = json.decode(response.body);
var helloResponse = HelloResponse.fromJson(decoded);
return helloResponse.message;
} else if (response.statusCode == 401 || response.statusCode == 404) {
debugPrint("send refreshTokenRequester");
await refreshTokenRequester();
var value = await helloRequester();
return value;
} else {
throw Exception("Hello Error");
}
}
Future<void> refreshTokenRequester() async {
var refreshTokenUri = uri + "auth/refresh_token";
var refreshToken = await storage.read(key: "refreshToken");
var request = RefreshTokenRequest(refreshToken: refreshToken ?? "");
final response = await http.post(Uri.parse(refreshTokenUri),
body: json.encode(request.toJson()), headers: headers);
if (response.statusCode == 200) {
Map<String, dynamic> decoded = json.decode(response.body);
var refreshTokenResponse = AuthResponse.fromJson(decoded);
await storage.write(
key: "accessToken", value: refreshTokenResponse.accessToken);
await storage.write(
key: "refreshToken", value: refreshTokenResponse.refreshToken);
debugPrint(refreshTokenResponse.accessToken);
} else {
throw Exception("Token Refresh Error");
}
}
Future<void> logoutRequester() async {
var logoutUri = uri + "auth/logout";
var accessToken = await storage.read(key: "accessToken");
headers["Authorization"] = accessToken ?? "";
final response = await http.post(Uri.parse(logoutUri), headers: headers);
if (response.statusCode == 201) {
await storage.delete(key: "accessToken");
}
}
}
class AuthResponse {
final String accessToken;
final String refreshToken;
AuthResponse.fromJson(Map<String, dynamic> json)
: accessToken = json['access_token'],
refreshToken = json['refresh_token'];
}
class AuthRequest {
final String name;
final String password;
AuthRequest({
this.name = "",
this.password = "",
});
Map<String, dynamic> toJson() => {
'password': password,
'user_name': name,
};
}
class HelloResponse {
final message;
HelloResponse.fromJson(Map<String, dynamic> json) : message = json['message'];
}
class RefreshTokenRequest {
final String refreshToken;
RefreshTokenRequest({
this.refreshToken = "",
});
Map<String, dynamic> toJson() => {
'refresh_token': refreshToken,
};
}
環境
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.2.3 20D91 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.62.3)
dependencies:
flutter:
sdk: flutter
http: ^0.13.4
flutter_secure_storage: ^5.0.2
flutter_riverpod: ^1.0.2
実装
下記の手順で、uiからstateと処理のロジックを分離していきます。
・flutter_riverpodの導入
・ProvierScopeとConsumerWighetの適用
・login.dartの変更
・hello.dartの変更
最終的なフォルダ構成は下記になります。
└─ lib
├── main.dart
├── requester
│ └── requester.dart
└── ui
├── hello
│ ├── hello.dart
│ └── hello_view_model.dart
└── login
├── login.dart
└── login_view_model.dart
flutter_riverpodの導入
まずは、flutter_riverpodをインストールします。
https://pub.dev/packages/flutter_riverpod/install
flutter pub add flutter_riverpod
provierstateの導入とConsumerWighetの適用
flutter_riverpodを使用するためにrunApp時にProviderScopeを適用します。
lib/main.dart
void main() {
runApp(ProviderScope(child: const LoginApp()));
}
次に、それぞれのuiファイルのStatefulWidgetをConsumerWidgetに変更し、Stateをextendsしていたクラスでの処理を全てConsumerWidgetに移します。
Stateを管理するメソッドは(setStateやinitStateなど)使用できないので、削除します。
最後に、buildの引数にWighetRefを追加します。
uiに対して、これらの変更を加えたコードが下記になります。
lib/ui/login/login.dart
class LoginApp extends StatelessWidget {
const LoginApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ログイン画面',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(title: 'Login Page'),
);
}
}
class LoginPage extends ConsumerWidget {
LoginPage({Key? key, required this.title}) : super(key: key);
final String title;
final _userNameTextController = TextEditingController();
final _passwordNameTextController = TextEditingController();
final FocusNode _userNamefocusNode = FocusNode();
final FocusNode _passwordNameFocusNode = FocusNode();
var _errorMessage = "";
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_errorMessage, style: const TextStyle(color: Colors.red)),
TextField(
controller: _userNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Username',
),
focusNode: _userNamefocusNode,
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Password',
),
focusNode: _passwordNameFocusNode,
obscureText: true,
),
ButtonBar(
children: <Widget>[
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_userNameTextController.clear();
_passwordNameTextController.clear();
},
),
ElevatedButton(
child: const Text('LOGIN'),
onPressed: () {
Requester()
.loginRequester(_userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
debugPrint(error.toString());
_userNameTextController.clear();
_passwordNameTextController.clear();
});
}),
ElevatedButton(
child: const Text('SIGNUP'),
onPressed: () {
Requester()
.signUpRequester(_userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
debugPrint(error.toString());
_userNameTextController.clear();
_passwordNameTextController.clear();
});
}),
],
),
],
),
),
);
}
}
lib/ui/hello/hello.dart
class Hello extends ConsumerWidget {
Hello({Key? key}) : super(key: key);
var _message = "";
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
centerTitle: true,
automaticallyImplyLeading: false,
actions: [
TextButton(
onPressed: () {
Requester().logoutRequester().then((_) {
Navigator.pop(context);
});
},
child: const Text('LOGOUT',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
),
],
),
body: Padding(
padding: EdgeInsets.only(top: 100),
child: Center(
child: Column(
children: [Text(_message, style: TextStyle(fontSize: 50.0))],
),
),
),
);
}
}
login.dartの変更
ここから、各uiのState管理やロジック部分をviewModelに移します。
まずは、login.dartをlogin_view_model.dartに切り出していきます。
login画面ではログイン処理に失敗した際にエラーメッセージ(errorMessage)を表示しています。
まず、これをlogin_view_model.dartに移します。
/lib/ui/login/login_view_model.dart
StateProvider<String> errorMessageProvider = StateProvider((ref) => '');
次に、errorMessageProviderの変更をui側で検知できるように、ConsumerWighet(LoginPage)のbuild内でwatchしておく。
lib/ui/login/login.dart
class LoginPage extends ConsumerWidget {
・・・
@override
Widget build(BuildContext context, WidgetRef ref) {
final errorMessage = ref.watch(errorMessageProvider);
・・・
ref.watch(errorMessageProvider)を追加しておくことで、errorMessageProviderが変更すると、ui側に検知されるようになります。
次に、ログインとサインアップのapiリクエストもviewModelを経由するように変更します。
/lib/ui/login/login_view_model.dart
StateProvider<String> errorMessageProvider = StateProvider((ref) => '');
Future<void> loginRequest(WidgetRef ref, String name, String password) async {
return Requester()
.loginRequester(name, password)
.onError((error, stackTrace) {
ref.watch(errorMessageProvider.notifier).state = "ログインに失敗しました";
throw Exception(error.toString());
});
}
Future<void> signUpRequest(WidgetRef ref, String name, String password) async {
return Requester()
.signUpRequester(name, password)
.onError((error, stackTrace) {
ref.watch(errorMessageProvider.notifier).state = "サインアップに失敗しました";
throw Exception(error.toString());
});
}
それぞれの、request処理はui側から、ユーザー名とパスワードをもらってRequesterの処理を呼び出すだけです。
エラーになった際には、errorMessageProviderの値をref.watch(errorMessageProvider.notifier).stateで値を書き換えます。
こうすることで、ui側で変更が検知されてuiの更新が行われます。
最後に、このviewModelのrequest処理をui側で呼び出します。
ui部分の最終的なコードは下記になります。
lib/ui/login/login.dart
class LoginPage extends ConsumerWidget {
LoginPage({Key? key, required this.title}) : super(key: key);
final String title;
final _userNameTextController = TextEditingController();
final _passwordNameTextController = TextEditingController();
final FocusNode _userNamefocusNode = FocusNode();
final FocusNode _passwordNameFocusNode = FocusNode();
@override
Widget build(BuildContext context, WidgetRef ref) {
final errorMessage = ref.watch(errorMessageProvider);
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(errorMessage, style: const TextStyle(color: Colors.red)),
TextField(
controller: _userNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Username',
),
focusNode: _userNamefocusNode,
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordNameTextController,
decoration: const InputDecoration(
filled: true,
labelText: 'Password',
),
focusNode: _passwordNameFocusNode,
obscureText: true,
),
ButtonBar(
children: <Widget>[
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_userNameTextController.clear();
_passwordNameTextController.clear();
},
),
ElevatedButton(
child: const Text('LOGIN'),
onPressed: () {
loginRequest(ref, _userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
_userNameTextController.clear();
_passwordNameTextController.clear();
});
}),
ElevatedButton(
child: const Text('SIGNUP'),
onPressed: () {
signUpRequest(ref, _userNameTextController.text,
_passwordNameTextController.text)
.then((_) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Hello()));
}).onError((error, stackTrace) {
_userNameTextController.clear();
_passwordNameTextController.clear();
});
}),
],
),
],
),
),
);
}
}
request内でerrorMessageProviderの更新をui側に検知するために、requestを呼び出す際に、ui側のWidgetRefを渡しています。
ログインページのエラー時の挙動はこのようになります。
hello.dartの変更
次に、hello.dartのロジックをviewModelを移行させます。
まず、この画面では画面が描画せれたタイミングでapiにリクエストし、返ってきた値を表示していました。
なので、viewModelでapiリクエストを実行しレスポンスが返ってきたタイミングでuiに通知してあげます。
それを実現するために、FutureProviderを使用します。
lib/ui/hello/hello_view_model.dart
FutureProvider<String> helloRequestProvider =
FutureProvider((ref) async {
var message = await Requester().helloRequester();
return message;
});
この、helloRequestProviderをCosumerWighetのbuildでwatchすることで画面が描画されるタイミングでhelloRequestProvider内の処理が呼び出されます。
そして、helloRequestProviderの処理が完了した時のui側の処理をwhenで書きます。
lib/ui/hello/hello.dart
class Hello extends ConsumerWidget {
Hello({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final messageProvider = ref.watch(helloRequestProvider);
・・・
body: Padding(
padding: EdgeInsets.only(top: 100),
// messageProviderでのapiリクエスト完了後の処理
child: messageProvider.when(
data: (message) => Center(
child: Column(
children: [Text(message, style: TextStyle(fontSize: 50.0))],
),
),
error: (error, stackTrace) {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("認証に失敗しました。再ログインをお願いします。"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("OK")),
],
);
}).then((_) {
Navigator.pop(context);
});
},
loading: () => AspectRatio(
aspectRatio: 0.01,
child: const CircularProgressIndicator(),
),
whenの処理では、リクエスト成功時はレスポンスのメッセージを画面に描画しています。
エラー時にはダイアログを出して、ログイン画面に戻していますNavigator.pop(context)。
しかし、これだとshowDialogでエラーになってしまいます。
エラーメッセージ
This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.
これは、Wighetのbuild時に状態変更をできないという内容です。
これを回避するために、showDialogをFutureで括ります。
lib/ui/hello/hello.dart
Future(() {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("認証に失敗しました。再ログインをお願いします。"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("OK")),
],
);
}).then((_) {
Navigator.pop(context);
});
});
これで、画面の描画時にリクエストを送りレスポンスの内容によって、uiを変更することができました。
しかし、このままだと初回にhello画面に遷移した際はリクエストが送られますが、2回目以降はリクエストされません(ログアウト→ログインした際など)。
画面が呼び出されるたびに毎回リクエストをして欲しいので、hello画面でNavigator.pop(context)が呼ばれて画面を閉じる際にmessageProviderを解放するようにします。
それを実現するために、FutureProviderの代わりにAutoDisposeFutureProviderを使用します。
こうすることで、画面が閉じるタイミングでui側のbuild時にhelloRequestProviderをwatchしていたmessageProviderが解放されます。
なので、画面再描画時もmessageProviderが再作成され、毎回処理が走るようになります。
これを踏まえた最終的なコードは下記になります。
lib/ui/hello/hello_view_model.dart
AutoDisposeFutureProvider<String> helloRequestProvider =
FutureProvider.autoDispose((ref) async {
var message = await Requester().helloRequester();
return message;
});
Future<void> logoutRequest() async {
return Requester().logoutRequester();
}
lib/ui/hello/hello.dart
class Hello extends ConsumerWidget {
Hello({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
debugPrint("build");
final messageProvider = ref.watch(helloRequestProvider);
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
centerTitle: true,
automaticallyImplyLeading: false,
actions: [
TextButton(
onPressed: () {
logoutRequest().then((_) {
Navigator.pop(context);
});
},
child: const Text('LOGOUT',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
),
],
),
body: Padding(
padding: EdgeInsets.only(top: 100),
child: messageProvider.when(
data: (message) => Center(
child: Column(
children: [Text(message, style: TextStyle(fontSize: 50.0))],
),
),
error: (error, stackTrace) {
Future(() {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("認証に失敗しました。再ログインをお願いします。"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("OK")),
],
);
}).then((_) {
Navigator.pop(context);
});
});
},
loading: () => AspectRatio(
aspectRatio: 0.01,
child: const CircularProgressIndicator(),
),
),
),
);
}
}
ログアウト処理についてもリクエストをviewModel側に移しましたが大した変更ではないので、説明は省略します。
最終的な画面が下記になります。
おわりに
今回は、flutter_riverpodで画面側の状態管理をviewからviewModelに移すことで、MVVMな設計でログインアプリを書き換えてみました。
今回のコードは下記になります。
https://github.com/fu-yuta/authentication_frontend/tree/mvvm
リファクタしただけだと、あまり利点が感じられなかったので、次はテストとか作りたいです。