Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ChangeNotifierの実装（メインページ） #16

Merged
merged 21 commits into from
Jul 15, 2020
Merged

ChangeNotifierの実装（メインページ） #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b4aaa0c
ページごとにディレクトリを作成
thoth000 Jul 12, 2020
387cca8
ChangeNotifierクラスを定義
thoth000 Jul 12, 2020
f72e08d
mainController
thoth000 Jul 12, 2020
9044e30
talkController
thoth000 Jul 12, 2020
ebdf747
profileController
thoth000 Jul 12, 2020
3cafa59
ProfileEditPageのProviderを変更
thoth000 Jul 12, 2020
0cf5f17
もろもろ修正
thoth000 Jul 12, 2020
abcd197
homeController
thoth000 Jul 12, 2020
9179ad5
Providerをdi.dartでセット（仮）
thoth000 Jul 12, 2020
02f1e31
Futureの戻り値をvoidに変更
thoth000 Jul 12, 2020
e41481e
HomePage修正
thoth000 Jul 13, 2020
1ef3712
MainController
thoth000 Jul 13, 2020
4959e8f
メインページのコントローラ完成
thoth000 Jul 13, 2020
52cdb0c
MultiProviderをmainで作成
thoth000 Jul 13, 2020
53080e9
flutter format .
thoth000 Jul 13, 2020
61ce4a2
使わないdi.dartを削除
thoth000 Jul 13, 2020
7c87aa9
指摘部分の修正
thoth000 Jul 15, 2020
1e9cb92
別ファイルへの切り出し
thoth000 Jul 15, 2020
6b8e569
flutter format .
thoth000 Jul 15, 2020
ab57921
Merge branch 'master' into feature/13/main
thoth000 Jul 15, 2020
0002225
不要なaxis.verticalの除去
thoth000 Jul 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 31 additions & 58 deletions lib/ui/pages/main/home/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,46 @@
import 'package:chat_flutter/config/app_space.dart';
import 'package:chat_flutter/ui/molecules/home/list_tile.dart';
import 'package:chat_flutter/ui/pages/main/home/home_controller.dart';
import 'package:flutter/material.dart';
import 'package:chat_flutter/model/user.dart';
import 'package:chat_flutter/model/group.dart';

import 'package:chat_flutter/config/app_text_size.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final _homeController = Provider.of<HomeController>(context);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

build配下に listen: true でProvideすると、HomeControllerに変更があるたびに、このcontext(HomePage)が丸ごと再描画されてしまうので、あんまり良くないかもです！
ここでは

  • listen: false で定義しておいて、単発呼び出しではこれを使ってあげる
  • 変更を監視したいプロパティの場合はちょっとめんどうくさいけど、 Provider.of<HomeController>(context, listen: true).hoge みたいに逐一取得してあげる感じですかね

前に記事書いてみたので参考にしてみてください！
https://qiita.com/hohohoris/items/8aecf6a99b278d67d13b

retrun  ChangeNotifierProvider<HomeController>(
      create: (_) => HomeController(),
      child: SingleChildScrollView(
         // 略
    )

とすると `main.dart` でMultiProviderしなくてもpageごとにできると思います！

return SingleChildScrollView(
child: Column(
children: <Widget>[
HomePageListTile(
name: 'name',
imgUrl: 'https://dot.asahi.com/S2000/upload/2019100100055_1.jpg',
isMe: true,
FutureBuilder(
future: _homeController.getMeById('test'),
builder: (BuildContext context, AsyncSnapshot<User> snapshot) {
if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
}
switch (snapshot.connectionState) {
case ConnectionState.waiting: // データの取得まち
return Center(
child: CircularProgressIndicator(),
);

default:
if (snapshot.hasData) {
return HomePageListTile(
name: snapshot.data.name,
imgUrl: snapshot.data.imgUrl,
isMe: true,
);
} else {
return Center(
child: Text("該当するユーザーがいません"),
);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return Center(
child: Text("該当するユーザーがいません"),
);
return const Center(
child: Text("該当するユーザーがいません"),
);

のように書けますかね？
constをつけると、コンパイル時に確定できるので、パフォーマンスが上がります
以下参考

Use const widgets where possible. (This is equivalent to caching a widget and re-using it.)

https://medium.com/flutter-jp/state-performance-7a5f67d62edd

}
}
},
),
Container(
constraints: BoxConstraints(
Expand Down Expand Up @@ -46,7 +71,7 @@ class HomePage extends StatelessWidget {
),
),
FutureBuilder(
future: _getGroupList(),
future: _homeController.getGroupList(),
builder: (
BuildContext context,
AsyncSnapshot<List<Group>> snapshot,
Expand Down Expand Up @@ -120,7 +145,7 @@ class HomePage extends StatelessWidget {
),
),
FutureBuilder(
future: _getFriendList(),
future: _homeController.getFriendList(),
builder: (
BuildContext context,
AsyncSnapshot<List<User>> snapshot,
Expand Down Expand Up @@ -185,56 +210,4 @@ class HomePage extends StatelessWidget {
),
);
}

Future<List<Group>> _getGroupList() async {
final List<Group> groupList = [
Group(
name: "Sport",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
Group(
name: "Study",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
Group(
name: "Hobby",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
];

await Future.delayed(Duration(seconds: 1));
return await Future.value(groupList);
}

Future<List<User>> _getFriendList() async {
final List<User> friendList = [
User(
name: "Alex",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Alex2(笑)",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Jack",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Brian",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
];

await Future.delayed(Duration(seconds: 3));
return await Future.value(friendList);
}
}
63 changes: 62 additions & 1 deletion lib/ui/pages/main/home/home_controller.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,66 @@
import 'package:chat_flutter/model/group.dart';
import 'package:chat_flutter/model/user.dart';
import 'package:flutter/material.dart';

class HomeController with ChangeNotifier{

HomeController();

Future<User> getMeById(String userId) async {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

基本Controllerのメソッドは戻り値を Future<void> にして、　Controllerのプロパティで Userを持ってあげます。
するとFuture型を処理せずともUserという型でWidgetに通知できるからです。
具体的には、

Suggested change
Future<User> getMeById(String userId) async {
User user;
Future<void> getMeById(String userId) async {
await Future.delayed(Duration(seconds: 1));
user = User(name: "test", imgUrl: "https://dot.asahi.com/S2000/upload/2019100100055_1.jpg");
notifyListeners()

User user = User(name: "test", imgUrl: "");

await Future.delayed(Duration(seconds: 1));
return await Future.value(user);
}

Future<List<Group>> getGroupList() async {
final List<Group> groupList = [
Group(
name: "Sport",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
Group(
name: "Study",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
Group(
name: "Hobby",
imgUrl: "https://prtimes.jp/i/24101/70/resize/d24101-70-320114-0.jpg",
),
];

await Future.delayed(Duration(seconds: 1));
return await Future.value(groupList);
}

Future<List<User>> getFriendList() async {
final List<User> friendList = [
User(
name: "Alex",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Alex2(笑)",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Jack",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
User(
name: "Brian",
imgUrl:
"https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg",
isMe: false,
),
];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここら辺はMockを作成しても良さそうですね 🙆‍♂️ (チームでの話し合いを聞いていなかったのでもし見当違いのことを言っていたらすいません 🙇 )


await Future.delayed(Duration(seconds: 3));
return await Future.value(friendList);
}
}