first commit
This commit is contained in:
110
lib/views/offline/offline_banner.dart
Normal file
110
lib/views/offline/offline_banner.dart
Normal file
@@ -0,0 +1,110 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
|
||||
import 'package:miler/views/helpers/constants/Colorconstants.dart';
|
||||
import 'package:miler/views/helpers/constants/design_constants.dart';
|
||||
import 'package:miler/views/helpers/constants/miler_type.dart';
|
||||
|
||||
/// ─────────────────────────────────────────────────────────────────────────
|
||||
/// OFFLINE, WITHOUT TAKING THE JOB AWAY
|
||||
///
|
||||
/// ── What this replaces ──
|
||||
///
|
||||
/// Losing signal used to lay an opaque full-screen page over the entire app:
|
||||
/// `Stack(children: [baseChild, const OfflinePage()])`. Not a warning — a
|
||||
/// replacement.
|
||||
///
|
||||
/// A rider standing at a doorstep in a basement, a lift, a stairwell or a rural
|
||||
/// lane — which is where Indian first-mile delivery actually happens — lost the
|
||||
/// address, the customer's name, their phone number, the parcel count and the
|
||||
/// OTP field. He was holding a parcel and could not see who it was for. The app
|
||||
/// then told him it was "retrying automatically every 5 seconds", which is not
|
||||
/// something he can act on while a customer waits.
|
||||
///
|
||||
/// ── Why a strip is the right shape ──
|
||||
///
|
||||
/// Everything the rider needs at the door was already fetched. Connectivity is
|
||||
/// needed to *report* the stop, not to work it. So the honest message is not
|
||||
/// "you are offline" but "keep going, this will sync" — and that is a line of
|
||||
/// text, not a screen.
|
||||
///
|
||||
/// The full-screen page survives for the one case where it is truthful: a cold
|
||||
/// start with no cached session, where there genuinely is nothing to show.
|
||||
///
|
||||
/// ── Sizing ──
|
||||
///
|
||||
/// Deliberately thin, and it does **not** overlay the content — [OfflineScope]
|
||||
/// gives it its own row above the app, so it can never cover a field the rider
|
||||
/// is typing into. The one thing worse than a blocker is a floating bar sitting
|
||||
/// on top of the OTP box.
|
||||
/// ─────────────────────────────────────────────────────────────────────────
|
||||
class OfflineBanner extends StatelessWidget {
|
||||
const OfflineBanner({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Semantics(
|
||||
liveRegion: true,
|
||||
label: 'Offline. Your changes will sync when you are back online.',
|
||||
excludeSemantics: true,
|
||||
child: Material(
|
||||
color: ColorConstants.warning,
|
||||
child: SafeArea(
|
||||
bottom: false,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.fromLTRB(16.w, 7.h, 16.w, 7.h),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.cloud_off_rounded,
|
||||
size: 15.sp,
|
||||
color: ColorConstants.onAccent,
|
||||
),
|
||||
SizedBox(width: 9.w),
|
||||
Expanded(
|
||||
child: Text(
|
||||
// States what is true and what happens next. "You're
|
||||
// offline" alone tells a rider mid-stop nothing he can use.
|
||||
'Offline · Changes will sync when you’re back online',
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: MilerType.micro
|
||||
.on(ColorConstants.onAccent)
|
||||
.semibold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Puts [OfflineBanner] above the app rather than over it.
|
||||
///
|
||||
/// A `Column` rather than a `Stack` on purpose: the strip takes its own height
|
||||
/// out of the layout, so nothing underneath is ever covered. The app simply
|
||||
/// starts a few points lower while the connection is down.
|
||||
class OfflineScope extends StatelessWidget {
|
||||
final Widget child;
|
||||
final bool offline;
|
||||
|
||||
const OfflineScope({super.key, required this.child, required this.offline});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
AnimatedSize(
|
||||
duration: DesignConstants.motionState,
|
||||
curve: Curves.easeOutCubic,
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: offline ? const OfflineBanner() : const SizedBox(width: double.infinity),
|
||||
),
|
||||
Expanded(child: child),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
241
lib/views/offline/offline_page.dart
Normal file
241
lib/views/offline/offline_page.dart
Normal file
@@ -0,0 +1,241 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:connectivity_plus/connectivity_plus.dart';
|
||||
|
||||
import 'package:miler/helpers/app_bootstrap.dart';
|
||||
import 'package:miler/views/helpers/constants/Colorconstants.dart';
|
||||
import 'package:miler/views/helpers/constants/design_constants.dart';
|
||||
import 'package:miler/views/helpers/constants/miler_type.dart';
|
||||
import 'package:miler/views/helpers/widgets/app_widgets.dart';
|
||||
|
||||
class OfflinePage extends StatefulWidget {
|
||||
const OfflinePage({super.key});
|
||||
|
||||
@override
|
||||
State<OfflinePage> createState() => _OfflinePageState();
|
||||
}
|
||||
|
||||
class _OfflinePageState extends State<OfflinePage>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _pulse;
|
||||
|
||||
bool _checking = false;
|
||||
Timer? _autoRetry;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_pulse = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 1800),
|
||||
)..repeat(reverse: true);
|
||||
|
||||
// Automatically retry every 5 seconds.
|
||||
_autoRetry = Timer.periodic(const Duration(seconds: 5), (_) {
|
||||
if (mounted && !_checking) {
|
||||
_handleRetry();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pulse.dispose();
|
||||
_autoRetry?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _handleRetry() async {
|
||||
if (_checking) return;
|
||||
|
||||
setState(() => _checking = true);
|
||||
|
||||
try {
|
||||
final results = await Connectivity().checkConnectivity();
|
||||
|
||||
final isOnline =
|
||||
results.isNotEmpty &&
|
||||
results.any((r) => r != ConnectivityResult.none);
|
||||
|
||||
if (isOnline) {
|
||||
Get.offAll(() => const AppBootstrap());
|
||||
return;
|
||||
}
|
||||
|
||||
if (mounted) {
|
||||
AppFeedback.info(context, "Still offline. We'll keep checking.");
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => _checking = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xffF7F8FC),
|
||||
body: SafeArea(
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
bottom: -size.height * .10,
|
||||
left: -40,
|
||||
right: -40,
|
||||
child: Container(
|
||||
height: size.height * .25,
|
||||
decoration: const BoxDecoration(
|
||||
color: ColorConstants.neutralLight,
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(250),
|
||||
topRight: Radius.circular(250),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: TweenAnimationBuilder<double>(
|
||||
duration: const Duration(milliseconds: 700),
|
||||
tween: Tween(begin: 0, end: 1),
|
||||
curve: Curves.easeOut,
|
||||
builder: (context, value, child) {
|
||||
return Opacity(
|
||||
opacity: value,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, (1 - value) * 30),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(28),
|
||||
decoration: BoxDecoration(
|
||||
color: ColorConstants.pureSurface,
|
||||
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: ColorConstants.slateText.withValues(alpha: .05),
|
||||
blurRadius: 25,
|
||||
offset: const Offset(0, 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AnimatedBuilder(
|
||||
animation: _pulse,
|
||||
builder: (_, child) {
|
||||
final t = Curves.easeInOut.transform(_pulse.value);
|
||||
|
||||
return Container(
|
||||
width: 130,
|
||||
height: 130,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: ColorConstants.primary.withValues(alpha: .08),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: ColorConstants.primary.withValues(alpha:
|
||||
.10 + (.15 * t),
|
||||
),
|
||||
blurRadius: 25 + (18 * t),
|
||||
spreadRadius: 2 + (8 * t),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: Icon(
|
||||
Icons.wifi_off_rounded,
|
||||
color: ColorConstants.primary,
|
||||
size: 68,
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 28),
|
||||
|
||||
Text("You're offline", style: MilerType.hero),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
Text(
|
||||
"We can't reach Miler right now. Your shift will "
|
||||
"load as soon as you're back online.",
|
||||
textAlign: TextAlign.center,
|
||||
style: MilerType.caption,
|
||||
),
|
||||
|
||||
const SizedBox(height: 28),
|
||||
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: ButtonSizes.primary,
|
||||
child: ElevatedButton(
|
||||
onPressed: _checking ? null : _handleRetry,
|
||||
style: ElevatedButton.styleFrom(
|
||||
elevation: 0,
|
||||
backgroundColor: ColorConstants.primary,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
),
|
||||
minimumSize: Size.zero,
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
ButtonSizes.radius,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
child: _checking
|
||||
? const SizedBox(
|
||||
key: ValueKey("loading"),
|
||||
width: 22,
|
||||
height: 22,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.5,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
"Try again",
|
||||
key: const ValueKey("retry"),
|
||||
style: MilerType.buttonLabel(
|
||||
ButtonSizes.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
Text(
|
||||
"Checking every few seconds",
|
||||
style: MilerType.label,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user