Skip to content

Commit

Permalink
Merge pull request #56 from s14t284/feature/animation
Browse files Browse the repository at this point in the history
スタンプアニメーションの実装
  • Loading branch information
rikeda71 authored Nov 2, 2022
2 parents 6774296 + eec4895 commit a79272b
Show file tree
Hide file tree
Showing 16 changed files with 252 additions and 83 deletions.
4 changes: 4 additions & 0 deletions lib/analytics.dart
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ extension AnalyticsEvent on String {
static const registrationFailed = 'registration_failed';
static const initializeHomePageAndGetHealth = 'initialize_home_page_and_get_health';
static const pressedUploadImage = 'pressed_upload_image';
static const reachTemple = 'reach_temple';

/// ボトムナビゲーションの押下
static const pressedBottomNavigation = 'pressed_bottom_navigation';
}

final analyticsProvider = Provider<Analytics>(
Expand Down
4 changes: 4 additions & 0 deletions lib/domain/temple/temple_info.codegen.dart
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ class TempleInfo with _$TempleInfo {
@Default('お寺の詳細情報')
String knowledge,

// スタンプの画像パス
@Default('https://firebasestorage.googleapis.com/v0/b/virtual-pilgrimage-dev.appspot.com/o/temples%2F1%2Fstamp.jpeg?alt=media&token=b3fe42f9-b94b-43f2-8a5d-b2f217be541f')
String stampImage,

// お寺の座標
@JsonKey(
fromJson: _geoPointFromJson,
Expand Down
29 changes: 27 additions & 2 deletions lib/domain/temple/temple_info.codegen.freezed.dart
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ mixin _$TempleInfo {
String get address => throw _privateConstructorUsedError; // 次のお寺までの距離
int get distance => throw _privateConstructorUsedError; // 次のお寺までの経路(エンコード文字列)
String get encodedPoints => throw _privateConstructorUsedError; // お寺のうんちく
String get knowledge => throw _privateConstructorUsedError; // お寺の座標
String get knowledge => throw _privateConstructorUsedError; // スタンプの画像パス
String get stampImage => throw _privateConstructorUsedError; // お寺の座標
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
GeoPoint get geoPoint => throw _privateConstructorUsedError;
List<String> get images => throw _privateConstructorUsedError;
Expand All @@ -51,6 +52,7 @@ abstract class $TempleInfoCopyWith<$Res> {
int distance,
String encodedPoints,
String knowledge,
String stampImage,
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
GeoPoint geoPoint,
List<String> images});
Expand All @@ -73,6 +75,7 @@ class _$TempleInfoCopyWithImpl<$Res> implements $TempleInfoCopyWith<$Res> {
Object? distance = freezed,
Object? encodedPoints = freezed,
Object? knowledge = freezed,
Object? stampImage = freezed,
Object? geoPoint = freezed,
Object? images = freezed,
}) {
Expand Down Expand Up @@ -105,6 +108,10 @@ class _$TempleInfoCopyWithImpl<$Res> implements $TempleInfoCopyWith<$Res> {
? _value.knowledge
: knowledge // ignore: cast_nullable_to_non_nullable
as String,
stampImage: stampImage == freezed
? _value.stampImage
: stampImage // ignore: cast_nullable_to_non_nullable
as String,
geoPoint: geoPoint == freezed
? _value.geoPoint
: geoPoint // ignore: cast_nullable_to_non_nullable
Expand Down Expand Up @@ -132,6 +139,7 @@ abstract class _$$_TempleInfoCopyWith<$Res>
int distance,
String encodedPoints,
String knowledge,
String stampImage,
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
GeoPoint geoPoint,
List<String> images});
Expand All @@ -156,6 +164,7 @@ class __$$_TempleInfoCopyWithImpl<$Res> extends _$TempleInfoCopyWithImpl<$Res>
Object? distance = freezed,
Object? encodedPoints = freezed,
Object? knowledge = freezed,
Object? stampImage = freezed,
Object? geoPoint = freezed,
Object? images = freezed,
}) {
Expand Down Expand Up @@ -188,6 +197,10 @@ class __$$_TempleInfoCopyWithImpl<$Res> extends _$TempleInfoCopyWithImpl<$Res>
? _value.knowledge
: knowledge // ignore: cast_nullable_to_non_nullable
as String,
stampImage: stampImage == freezed
? _value.stampImage
: stampImage // ignore: cast_nullable_to_non_nullable
as String,
geoPoint: geoPoint == freezed
? _value.geoPoint
: geoPoint // ignore: cast_nullable_to_non_nullable
Expand All @@ -211,6 +224,8 @@ class _$_TempleInfo extends _TempleInfo {
required this.distance,
required this.encodedPoints,
this.knowledge = 'お寺の詳細情報',
this.stampImage =
'https://firebasestorage.googleapis.com/v0/b/virtual-pilgrimage-dev.appspot.com/o/temples%2F1%2Fstamp.jpeg?alt=media&token=b3fe42f9-b94b-43f2-8a5d-b2f217be541f',
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
required this.geoPoint,
final List<String> images = const []})
Expand Down Expand Up @@ -242,6 +257,10 @@ class _$_TempleInfo extends _TempleInfo {
@override
@JsonKey()
final String knowledge;
// スタンプの画像パス
@override
@JsonKey()
final String stampImage;
// お寺の座標
@override
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
Expand All @@ -256,7 +275,7 @@ class _$_TempleInfo extends _TempleInfo {

@override
String toString() {
return 'TempleInfo(id: $id, name: $name, prefecture: $prefecture, address: $address, distance: $distance, encodedPoints: $encodedPoints, knowledge: $knowledge, geoPoint: $geoPoint, images: $images)';
return 'TempleInfo(id: $id, name: $name, prefecture: $prefecture, address: $address, distance: $distance, encodedPoints: $encodedPoints, knowledge: $knowledge, stampImage: $stampImage, geoPoint: $geoPoint, images: $images)';
}

@override
Expand All @@ -273,6 +292,8 @@ class _$_TempleInfo extends _TempleInfo {
const DeepCollectionEquality()
.equals(other.encodedPoints, encodedPoints) &&
const DeepCollectionEquality().equals(other.knowledge, knowledge) &&
const DeepCollectionEquality()
.equals(other.stampImage, stampImage) &&
const DeepCollectionEquality().equals(other.geoPoint, geoPoint) &&
const DeepCollectionEquality().equals(other._images, _images));
}
Expand All @@ -288,6 +309,7 @@ class _$_TempleInfo extends _TempleInfo {
const DeepCollectionEquality().hash(distance),
const DeepCollectionEquality().hash(encodedPoints),
const DeepCollectionEquality().hash(knowledge),
const DeepCollectionEquality().hash(stampImage),
const DeepCollectionEquality().hash(geoPoint),
const DeepCollectionEquality().hash(_images));

Expand All @@ -313,6 +335,7 @@ abstract class _TempleInfo extends TempleInfo {
required final int distance,
required final String encodedPoints,
final String knowledge,
final String stampImage,
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
required final GeoPoint geoPoint,
final List<String> images}) = _$_TempleInfo;
Expand All @@ -335,6 +358,8 @@ abstract class _TempleInfo extends TempleInfo {
String get encodedPoints;
@override // お寺のうんちく
String get knowledge;
@override // スタンプの画像パス
String get stampImage;
@override // お寺の座標
@JsonKey(fromJson: _geoPointFromJson, toJson: _geoPointToJson)
GeoPoint get geoPoint;
Expand Down
3 changes: 3 additions & 0 deletions lib/domain/temple/temple_info.codegen.g.dart

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions lib/ui/components/bottom_navigation.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:virtualpilgrimage/analytics.dart';
import 'package:virtualpilgrimage/domain/user/virtual_pilgrimage_user.codegen.dart';
import 'package:virtualpilgrimage/router.dart';

Expand All @@ -21,6 +22,7 @@ class BottomNavigation extends ConsumerWidget {
final pageType = ref.watch(pageTypeProvider);
final pageTypeNotifier = ref.read(pageTypeProvider.notifier);
final router = ref.read(routerProvider);
final analytics = ref.read(analyticsProvider);

final destinations = <Widget>[
NavigationDestination(
Expand All @@ -45,6 +47,10 @@ class BottomNavigation extends ConsumerWidget {
onDestinationSelected: (int index) {
final pageType = PageType.values[index];
pageTypeNotifier.state = pageType;
analytics.logEvent(
eventName: AnalyticsEvent.pressedBottomNavigation,
parameters: {'pageType': pageType},
);
switch (pageType) {
case PageType.temple:
router.go(RouterPath.temple);
Expand Down
18 changes: 4 additions & 14 deletions lib/ui/components/molecules/pilgrimage_progress_card.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:virtualpilgrimage/domain/user/pilgrimage/pilgrimage_info.codegen
import 'package:virtualpilgrimage/domain/user/virtual_pilgrimage_user.codegen.dart';
import 'package:virtualpilgrimage/infrastructure/firebase/firebase_crashlytics_provider.dart';
import 'package:virtualpilgrimage/ui/style/font.dart';
import 'package:virtualpilgrimage/ui/wording_helper.dart';

Widget pilgrimageProgressCardProvider(
BuildContext context,
Expand Down Expand Up @@ -127,7 +128,7 @@ class PilgrimageProgressCard extends StatelessWidget {
),
),
Text(
_templeNameFilter(templeInfo.name),
WordingHelper.templeNameFilter(templeInfo.name),
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: FontSize.xlargeSize,
Expand Down Expand Up @@ -194,11 +195,10 @@ class PilgrimageProgressCard extends StatelessWidget {
}

/// m単位の数値をkm単位に補正した文字列を返す
/// お遍路の進捗は小数点第一位までで表示する
///
/// [meter] m単位の数値
String _meterToKilometerString(int meter) {
return (meter / 1000).toStringAsFixed(1);
}
String _meterToKilometerString(int meter) => (meter / 1000).toStringAsFixed(1);

/// 次の札所までの進捗率を計算
double _calcPercent(int movingDistance, int nextTempleDistance) {
Expand All @@ -208,14 +208,4 @@ class PilgrimageProgressCard extends StatelessWidget {
}
return percent;
}

/// お寺の表示名をUIに合わせる
/// (通称)のような名称をもつデータがあるため、このメソッドで通称を表示しないようにフィルタリング
/// ex. 【24番札所】最御崎寺(東寺)
String _templeNameFilter(String templeName) {
if (templeName.contains('(')) {
return templeName.replaceRange(templeName.indexOf('('), templeName.length, '');
}
return templeName;
}
}
81 changes: 81 additions & 0 deletions lib/ui/pages/home/components/stamp_animation_widget.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart';
import 'package:virtualpilgrimage/domain/temple/temple_info.codegen.dart';
import 'package:virtualpilgrimage/domain/temple/temple_repository.dart';
import 'package:virtualpilgrimage/ui/pages/home/home_presenter.dart';
import 'package:virtualpilgrimage/ui/wording_helper.dart';

class StampAnimation {
late Uint8List image;
late TempleInfo templeInfo;
}

class StampAnimationWidget extends ConsumerWidget {
const StampAnimationWidget({
required this.animationTempleId,
super.key,
});

final int animationTempleId;

@override
Widget build(BuildContext context, WidgetRef ref) {
return ColoredBox(
color: Colors.black54,
child: Center(
child: FutureBuilder<StampAnimation>(
future: loadStampImage(ref),
builder: (context, snapshot) {
return snapshot.hasData
? AlertDialog(
backgroundColor: Colors.transparent,
title: Center(
child: Text(
'${snapshot.data!.templeInfo.id}番 ${WordingHelper.templeNameFilter(snapshot.data!.templeInfo.name)}に到着',
style: const TextStyle(
color: Color(0xFFeeff41),
),
),
),
content: TweenAnimationBuilder(
tween: Tween<double>(begin: 6, end: 1),
duration: const Duration(milliseconds: 750),
builder: (BuildContext context, double value, _) {
return Transform.scale(
scale: value,
child: SizedBox(
height: 500,
child: Image.memory(snapshot.data!.image),
),
);
},
),
actionsAlignment: MainAxisAlignment.center,
actions: [
ElevatedButton(
onPressed: ref.read(homeProvider.notifier).onAnimationClosed,
child: const Text('タップして次を目指そう!'),
),
],
)
: const CircularProgressIndicator();
},
),
),
);
}

Future<StampAnimation> loadStampImage(WidgetRef ref) async {
final StampAnimation stampAnimation = StampAnimation();
final TempleInfo templeInfo =
await ref.read(templeRepositoryProvider).getTempleInfo(animationTempleId);

stampAnimation
..templeInfo = templeInfo
..image = (await get(Uri.parse(templeInfo.stampImage))).bodyBytes;
return stampAnimation;
}
}
21 changes: 15 additions & 6 deletions lib/ui/pages/home/home_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import 'package:virtualpilgrimage/ui/components/molecules/pilgrimage_progress_ca
import 'package:virtualpilgrimage/ui/components/molecules/profile_health_card.dart';
import 'package:virtualpilgrimage/ui/components/my_app_bar.dart';
import 'package:virtualpilgrimage/ui/pages/home/components/google_map_view.dart';
import 'package:virtualpilgrimage/ui/pages/home/components/stamp_animation_widget.dart';
import 'package:virtualpilgrimage/ui/wording_helper.dart';

import 'home_presenter.dart';

Expand All @@ -33,17 +35,24 @@ class HomePageBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
final userState = _ref.watch(userStateProvider);
final homeState = _ref.watch(homeProvider);
final notifier = _ref.read(homeProvider.notifier);

return ColoredBox(
color: Theme.of(context).backgroundColor,
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
child: Stack(
children: [
GoogleMapView(height: MediaQuery.of(context).size.height / 5 * 2),
pilgrimageProgressCardProvider(context, userState!, _ref),
_healthCards(context, userState, notifier),
ListView(
children: [
GoogleMapView(height: MediaQuery.of(context).size.height / 5 * 2),
pilgrimageProgressCardProvider(context, userState!, _ref),
_healthCards(context, userState, notifier),
],
),
// スタンプが押される時、札所のIDが指定される(0より大きい値が設定される)
if(homeState.animationTempleId > 0)
StampAnimationWidget(animationTempleId: homeState.animationTempleId)
],
),
),
Expand All @@ -69,7 +78,7 @@ class HomePageBody extends StatelessWidget {
),
ProfileHealthCard(
title: '今日の移動距離',
value: notifier.meterToKilometerString(health.today.distance),
value: WordingHelper.meterToKilometerString(health.today.distance),
unit: 'km',
icon: Icons.map_outlined,
backgroundColor: Theme.of(context).colorScheme.onSecondary,
Expand Down
Loading

0 comments on commit a79272b

Please sign in to comment.