Skip to content

Commit

Permalink
Third Version
Browse files Browse the repository at this point in the history
  • Loading branch information
@yulieth9109
yulieth9109 committed Jan 15, 2024
1 parent b8de78a commit 772ae35
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 104 deletions.
10 changes: 0 additions & 10 deletions lib/screens/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import '/widgets/stops_layer/stop_area_layer.dart';
import '/widgets/osm_element_layer/osm_element_layer.dart';
import '/widgets/question_dialog/question_dialog.dart';
import '/widgets/map_overlay/map_overlay.dart';
import '/widgets/map_overlay/shimmer.dart';
import '/widgets/home_sidebar/home_sidebar.dart';

class HomeScreen extends View<HomeViewModel> with PromptHandler {
Expand Down Expand Up @@ -142,15 +141,6 @@ class HomeScreen extends View<HomeViewModel> with PromptHandler {
);
},
),
Shimmer(
active: viewModel.isLoadingStopAreas,
color: Theme.of(context).colorScheme.primary.withOpacity(0.7),
child: Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
RepaintBoundary(
child: AnimatedSwitcher(
switchInCurve: Curves.ease,
Expand Down
4 changes: 2 additions & 2 deletions lib/widgets/hero_viewer.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ class HeroViewerRoute<T> extends PageRoute<T> {
required this.transitionBuilder,
this.transitionDuration = const Duration(milliseconds: 300),
this.maintainState = true,
this.opaque = true,
this.opaque = false,
this.barrierColor,
this.barrierDismissible = true,
this.barrierLabel
Expand Down Expand Up @@ -191,4 +191,4 @@ class _HeroViewerPage extends StatelessWidget {
)
);
}
}
}
148 changes: 82 additions & 66 deletions lib/widgets/map_overlay/map_overlay.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import 'location_button.dart';
import 'compass_button.dart';
import 'zoom_button.dart';
import 'credit_text.dart';
import 'shimmer.dart';


/// Builds the action/control buttons and attribution text which overlay the map.
Expand All @@ -23,81 +24,96 @@ class MapOverlay extends ViewFragment<HomeViewModel> {

@override
Widget build(BuildContext context, viewModel) {
return Padding(
padding: MediaQuery.of(context).padding + EdgeInsets.all(buttonSpacing),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: FloatingActionButton.small(
heroTag: null,
onPressed: Scaffold.of(context).openDrawer,
child: const Icon(
Icons.menu,
),
),
),
Align(
alignment: Alignment.topRight,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: viewModel.mapRotation % 360 != 0
? CompassButton(
rotation: viewModel.mapRotation,
isDegree: true,
onPressed: viewModel.resetRotation,
)
: null
return Stack(
children: [
Positioned.fill(
child: Shimmer(
active: viewModel.isLoadingStopAreas,
color: Theme.of(context).colorScheme.primary.withOpacity(0.7),
child: Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: CreditText(
alignment: TextAlign.left,
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
children: [
CreditTextPart(
AppLocalizations.of(context)!.osmCreditsText,
url: osm_config.osmCreditsURL,
),
CreditTextPart(
kTileLayerPublicTransport.creditsText,
url: kTileLayerPublicTransport.creditsUrl,
),
],
),
Padding(
padding: MediaQuery.of(context).padding + EdgeInsets.all(buttonSpacing),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: FloatingActionButton.small(
heroTag: null,
onPressed: Scaffold.of(context).openDrawer,
child: const Icon(
Icons.menu,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
),
Align(
alignment: Alignment.topRight,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: viewModel.mapRotation % 360 != 0
? CompassButton(
rotation: viewModel.mapRotation,
isDegree: true,
onPressed: viewModel.resetRotation,
)
: null
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
LocationButton(
activeColor: Theme.of(context).colorScheme.primary,
activeIconColor: Theme.of(context).colorScheme.onPrimary,
color: Theme.of(context).colorScheme.primaryContainer,
iconColor: Theme.of(context).colorScheme.onPrimaryContainer,
active: viewModel.cameraIsFollowingLocation,
onPressed: viewModel.toggleLocationFollowing,
),
SizedBox (
height: buttonSpacing,
Expanded(
child: CreditText(
alignment: TextAlign.left,
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
children: [
CreditTextPart(
AppLocalizations.of(context)!.osmCreditsText,
url: osm_config.osmCreditsURL,
),
CreditTextPart(
kTileLayerPublicTransport.creditsText,
url: kTileLayerPublicTransport.creditsUrl,
),
],
),
),
ZoomButton(
onZoomInPressed: viewModel.zoomIn,
onZoomOutPressed: viewModel.zoomOut,
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
LocationButton(
activeColor: Theme.of(context).colorScheme.primary,
activeIconColor: Theme.of(context).colorScheme.onPrimary,
color: Theme.of(context).colorScheme.primaryContainer,
iconColor: Theme.of(context).colorScheme.onPrimaryContainer,
active: viewModel.cameraIsFollowingLocation,
onPressed: viewModel.toggleLocationFollowing,
),
SizedBox (
height: buttonSpacing,
),
ZoomButton(
onZoomInPressed: viewModel.zoomIn,
onZoomOutPressed: viewModel.zoomOut,
),
],
),
],
),
],
),
),
],
),
],
),
);
),
]
);
}
}
51 changes: 25 additions & 26 deletions lib/widgets/map_overlay/shimmer.dart
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@

import 'package:flutter/material.dart';

class Shimmer extends StatefulWidget {
final bool active;
final Color color;
final Widget child;
final Widget? child;
final Duration animationDuration;
final Duration animationDelay;
final double min;
final double max;
final BlendMode blendMode;

const Shimmer({
required this.child,
this.child,
this.active = true,
this.color = const Color(0xFFF4F4F4),
this.animationDuration = const Duration(milliseconds: 1500),
this.animationDelay = const Duration(milliseconds: 50),
this.min = -1.5,
this.max = 1.5,
this.blendMode = BlendMode.color,
Expand All @@ -26,39 +29,35 @@ class Shimmer extends StatefulWidget {

class _ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
late final AnimationController _controller;

late final Animation<double> ratio;
late final Duration totalDuration;

@override
void initState() {
super.initState();
_controller = AnimationController.unbounded(vsync: this)
..repeat(min: widget.min, max: widget.max, period: widget.animationDuration);
totalDuration = widget.animationDuration + widget.animationDelay;
final begin = widget.min - ((widget.animationDelay.inMilliseconds * (widget.max - widget.min))/ totalDuration.inMilliseconds);
_controller = AnimationController(
vsync: this,
duration: totalDuration,
);
ratio = _controller.drive(Tween<double>(begin: begin, end: widget.max));
}

@override
void didUpdateWidget(covariant Shimmer oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.active != widget.active && oldWidget.active == true) {
void listener() {
final totalDuration = _controller.lastElapsedDuration;
if (totalDuration != null) {
final double numberRepetition = double.parse(((totalDuration.inMilliseconds / widget.animationDuration.inMilliseconds) + 0.005).toStringAsFixed(3));
final remainder = numberRepetition % 1;
if (remainder == 0) {
if (oldWidget.active != widget.active) {
if (oldWidget.active == true) {
_controller.forward(from: _controller.value).whenComplete(()
{
_controller.stop();
_controller.value = 0.0;
_controller.removeListener(listener);
setState(() {});
}
}
);
}
_controller.addListener(listener);
else { _controller.repeat();}
}
else {
if (!_controller.isAnimating) {
_controller.repeat(min: widget.min, max: widget.max, period: widget.animationDuration);
}
setState(() {});
}
}

@override
Expand All @@ -68,16 +67,16 @@ class _ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
}

LinearGradient get gradient => LinearGradient(
colors: [Colors.transparent, widget.color, Colors.transparent,],
colors: [ widget.color.withOpacity(0.0), widget.color, widget.color.withOpacity(0.0),],
stops: const [ 0.1, 0.3, 0.4,],
begin: const Alignment(-1.0, -0.3),
end: const Alignment(1.0, 0.3),
transform:_SlidingGradientTransform(ratio: _controller.value),
transform:_SlidingGradientTransform(ratio: ratio.value),
);

@override
Widget build(BuildContext context) {
if (widget.active) {
if (_controller.isAnimating) {
return IgnorePointer(
ignoring: true,
child: AnimatedBuilder(
Expand All @@ -93,7 +92,7 @@ class _ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
);
}
else {
return widget.child;
return const SizedBox();
}
}
}
Expand Down

0 comments on commit 772ae35

Please sign in to comment.