added swiping
This commit is contained in:
parent
2ff4d44d25
commit
8064f3f690
10 changed files with 139 additions and 82 deletions
|
@ -7,6 +7,7 @@ abstract class ConstColours {
|
||||||
|
|
||||||
static const white = Colors.white;
|
static const white = Colors.white;
|
||||||
static const black = Colors.black;
|
static const black = Colors.black;
|
||||||
|
static const transparent = Colors.transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
abstract class ConstThemes {
|
abstract class ConstThemes {
|
||||||
|
|
|
@ -4,11 +4,12 @@ import 'dart:io';
|
||||||
import 'package:connectivity_plus/connectivity_plus.dart';
|
import 'package:connectivity_plus/connectivity_plus.dart';
|
||||||
import 'package:flutter/foundation.dart';
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:internet_connection_checker/internet_connection_checker.dart';
|
import 'package:internet_connection_checker/internet_connection_checker.dart';
|
||||||
|
import 'package:mc_gallery/features/core/services/logging_service.dart';
|
||||||
|
|
||||||
import '/locator.dart';
|
import '/locator.dart';
|
||||||
|
|
||||||
/// Used to observe the current connection type.
|
/// Used to observe the current connection type.
|
||||||
class ConnectionService {
|
class ConnectionService with LoggingService {
|
||||||
ConnectionService({
|
ConnectionService({
|
||||||
required Connectivity connectivity,
|
required Connectivity connectivity,
|
||||||
required InternetConnectionChecker internetConnectionChecker,
|
required InternetConnectionChecker internetConnectionChecker,
|
||||||
|
@ -80,7 +81,9 @@ class ConnectionService {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
_isInitialized.complete();
|
_isInitialized.complete();
|
||||||
} catch (error, stackTrace) {}
|
} catch (error, stackTrace) {
|
||||||
|
handle(error, stackTrace);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> dispose() async {
|
Future<void> dispose() async {
|
||||||
|
@ -109,7 +112,9 @@ class ConnectionService {
|
||||||
await listener(
|
await listener(
|
||||||
connectivityResult: connectivityResult, hasInternet: await hasInternetConnection);
|
connectivityResult: connectivityResult, hasInternet: await hasInternetConnection);
|
||||||
});
|
});
|
||||||
} catch (error, stackTrace) {}
|
} catch (error, stackTrace) {
|
||||||
|
handle(error, stackTrace);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> removeListener({required String tag}) async {
|
Future<void> removeListener({required String tag}) async {
|
||||||
|
@ -118,13 +123,17 @@ class ConnectionService {
|
||||||
if (subscription != null) {
|
if (subscription != null) {
|
||||||
await subscription.cancel();
|
await subscription.cancel();
|
||||||
} else {}
|
} else {}
|
||||||
} catch (error, stackTrace) {}
|
} catch (error, stackTrace) {
|
||||||
|
handle(error, stackTrace);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> _onConnectivityChanged(ConnectivityResult connectivityResult) async {
|
Future<void> _onConnectivityChanged(ConnectivityResult connectivityResult) async {
|
||||||
try {
|
try {
|
||||||
_connectivityResult = connectivityResult;
|
_connectivityResult = connectivityResult;
|
||||||
} catch (error, stackTrace) {}
|
} catch (error, stackTrace) {
|
||||||
|
handle(error, stackTrace);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static ConnectionService get locate => Locator.locate();
|
static ConnectionService get locate => Locator.locate();
|
||||||
|
|
|
@ -1,36 +1,33 @@
|
||||||
import 'dart:async';
|
|
||||||
|
|
||||||
import 'package:flutter/widgets.dart';
|
import 'package:flutter/widgets.dart';
|
||||||
import 'package:mc_gallery/features/core/services/logging_service.dart';
|
import 'package:mc_gallery/features/core/services/logging_service.dart';
|
||||||
import 'package:mc_gallery/locator.dart';
|
import 'package:mc_gallery/locator.dart';
|
||||||
|
|
||||||
class OverlayService {
|
class OverlayService {
|
||||||
const OverlayService({
|
OverlayService({
|
||||||
required LoggingService loggingService,
|
required LoggingService loggingService,
|
||||||
}) : _loggingService = loggingService;
|
}) : _loggingService = loggingService;
|
||||||
|
|
||||||
final LoggingService _loggingService;
|
final LoggingService _loggingService;
|
||||||
|
|
||||||
final Map<int, OverlayEntry> _overlayEntryMap = const {};
|
final Map<int, OverlayEntry> _overlayEntryMap = {};
|
||||||
|
|
||||||
Future<void> playOverlayEntry({
|
void insertOverlayEntry(
|
||||||
required BuildContext context,
|
BuildContext context, {
|
||||||
|
required String tag,
|
||||||
required OverlayEntry overlayEntry,
|
required OverlayEntry overlayEntry,
|
||||||
}) async {
|
}) {
|
||||||
try {
|
_overlayEntryMap.addEntries([MapEntry(tag.hashCode, overlayEntry)]);
|
||||||
_overlayEntryMap[overlayEntry.hashCode] = overlayEntry;
|
|
||||||
Overlay.of(
|
|
||||||
context,
|
|
||||||
rootOverlay: true,
|
|
||||||
)!
|
|
||||||
.insert(overlayEntry);
|
|
||||||
|
|
||||||
if (overlayEntry.mounted) overlayEntry.remove();
|
Overlay.of(context, rootOverlay: true)?.insert(overlayEntry);
|
||||||
|
_loggingService.info('Overlay inserted with tag: $tag');
|
||||||
_overlayEntryMap.remove(overlayEntry.hashCode);
|
|
||||||
} catch (error, stackTrace) {
|
|
||||||
_loggingService.handle(error, stackTrace);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void removeOverlayEntry({
|
||||||
|
required String tag,
|
||||||
|
}) {
|
||||||
|
_overlayEntryMap[tag.hashCode]?.remove();
|
||||||
|
_overlayEntryMap.remove(tag.hashCode);
|
||||||
|
_loggingService.info('Overlay removed with tag: $tag');
|
||||||
}
|
}
|
||||||
|
|
||||||
void dispose() {
|
void dispose() {
|
||||||
|
|
|
@ -25,7 +25,7 @@ class UnsplashImagesApi with LoggingService implements ImagesApi {
|
||||||
return ImageModel(
|
return ImageModel(
|
||||||
imageIndex: imageIndex,
|
imageIndex: imageIndex,
|
||||||
uri: imageUri,
|
uri: imageUri,
|
||||||
imageName: '${Strings.current.image} $imageIndex: size=$imageSide',
|
imageName: '${Strings.current.image} ${imageIndex + 1}: size=$imageSide',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
} on Exception catch (ex, stackTrace) {
|
} on Exception catch (ex, stackTrace) {
|
||||||
|
|
|
@ -36,6 +36,9 @@ class ImagesService {
|
||||||
|
|
||||||
int get firstAvailableImageIndex => 0;
|
int get firstAvailableImageIndex => 0;
|
||||||
int get lastAvailableImageIndex => _imageModels.length - 1;
|
int get lastAvailableImageIndex => _imageModels.length - 1;
|
||||||
|
int get numberOfImages => _imageModels.length;
|
||||||
|
|
||||||
|
ImageModel imageModelAt({required int index}) => _imageModels.elementAt(index);
|
||||||
|
|
||||||
static ImagesService get locate => Locator.locate();
|
static ImagesService get locate => Locator.locate();
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,7 @@ class GalleryView extends StatelessWidget {
|
||||||
viewModelBuilder: () => GalleryViewModel.locate,
|
viewModelBuilder: () => GalleryViewModel.locate,
|
||||||
builder: (context, final model) => McgScaffold(
|
builder: (context, final model) => McgScaffold(
|
||||||
bodyBuilderWaiter: model.isInitialised,
|
bodyBuilderWaiter: model.isInitialised,
|
||||||
|
forceInternetCheck: true,
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: Text(model.strings.gallery),
|
title: Text(model.strings.gallery),
|
||||||
),
|
),
|
||||||
|
@ -46,8 +47,6 @@ class GalleryView extends StatelessWidget {
|
||||||
context,
|
context,
|
||||||
imageModel: imageModel,
|
imageModel: imageModel,
|
||||||
),
|
),
|
||||||
child: Hero(
|
|
||||||
tag: imageModel.imageIndex.toString(),
|
|
||||||
child: CachedNetworkImage(
|
child: CachedNetworkImage(
|
||||||
imageUrl: imageModel.uri.toString(),
|
imageUrl: imageModel.uri.toString(),
|
||||||
cacheKey: imageModel.imageIndex.toString(),
|
cacheKey: imageModel.imageIndex.toString(),
|
||||||
|
@ -57,7 +56,6 @@ class GalleryView extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
|
import 'package:auto_size_text/auto_size_text.dart';
|
||||||
import 'package:cached_network_image/cached_network_image.dart';
|
import 'package:cached_network_image/cached_network_image.dart';
|
||||||
|
import 'package:carousel_slider/carousel_slider.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||||
import 'package:mc_gallery/features/core/data/constants/const_colors.dart';
|
import 'package:mc_gallery/features/home/data/models/image_model.dart';
|
||||||
import 'package:mc_gallery/features/core/data/constants/const_text.dart';
|
|
||||||
|
|
||||||
|
import '/features/core/data/constants/const_colors.dart';
|
||||||
|
import '/features/core/data/constants/const_text.dart';
|
||||||
import '/features/core/widgets/gap.dart';
|
import '/features/core/widgets/gap.dart';
|
||||||
import '/features/core/widgets/mcg_scaffold.dart';
|
import '/features/core/widgets/mcg_scaffold.dart';
|
||||||
import '/features/core/widgets/view_model_builder.dart';
|
import '/features/core/widgets/view_model_builder.dart';
|
||||||
|
@ -28,38 +31,57 @@ class ImageCarouselView extends StatelessWidget {
|
||||||
viewModelBuilder: () => ImageCarouselViewModel.locate,
|
viewModelBuilder: () => ImageCarouselViewModel.locate,
|
||||||
argumentBuilder: () => imageCarouselViewArguments,
|
argumentBuilder: () => imageCarouselViewArguments,
|
||||||
builder: (context, final model) => McgScaffold(
|
builder: (context, final model) => McgScaffold(
|
||||||
|
bodyBuilderWaiter: model.isInitialised,
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: Text(model.strings.imageCarousel),
|
title: Text(model.strings.imageCarousel),
|
||||||
),
|
),
|
||||||
body: Column(
|
body: Column(
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(8.0),
|
||||||
child: Card(
|
child: Card(
|
||||||
elevation: 8,
|
elevation: 8,
|
||||||
child: Stack(
|
surfaceTintColor: ConstColours.transparent,
|
||||||
|
child: CarouselSlider.builder(
|
||||||
|
itemCount: model.numberOfImages,
|
||||||
|
options: CarouselOptions(
|
||||||
|
enlargeFactor: 1,
|
||||||
|
enlargeCenterPage: true,
|
||||||
|
enlargeStrategy: CenterPageEnlargeStrategy.scale,
|
||||||
|
disableCenter: true,
|
||||||
|
viewportFraction: 1,
|
||||||
|
initialPage: model.currentImageIndex,
|
||||||
|
enableInfiniteScroll: false,
|
||||||
|
onPageChanged: (final index, _) => model.swipedTo(newIndex: index),
|
||||||
|
),
|
||||||
|
itemBuilder: (context, _, __) => Stack(
|
||||||
fit: StackFit.expand,
|
fit: StackFit.expand,
|
||||||
children: [
|
children: [
|
||||||
Hero(
|
ValueListenableBuilder<ImageModel>(
|
||||||
tag: model.currentImageKey,
|
valueListenable: model.currentImageModelListenable,
|
||||||
child: CachedNetworkImage(
|
builder: (context, _, __) => CachedNetworkImage(
|
||||||
imageUrl: model.currentImageUrl,
|
imageUrl: model.currentImageUrl,
|
||||||
cacheKey: model.currentImageKey,
|
cacheKey: model.currentImageKey,
|
||||||
fit: BoxFit.fill,
|
fit: BoxFit.contain,
|
||||||
progressIndicatorBuilder: (_, __, final progress) =>
|
progressIndicatorBuilder: (_, __, final progress) =>
|
||||||
CircularProgressIndicator(
|
CircularProgressIndicator(
|
||||||
value: model.downloadProgressValue(progress: progress),
|
value: model.downloadProgressValue(progress: progress),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Center(
|
ValueListenableBuilder<ImageModel>(
|
||||||
child: Row(
|
valueListenable: model.currentImageModelListenable,
|
||||||
|
builder: (context, _, __) => Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: [
|
children: [
|
||||||
Icon(
|
Icon(
|
||||||
Icons.chevron_left,
|
Icons.chevron_left,
|
||||||
color: model.hasPreviousImage ? ConstColours.white : ConstColours.black,
|
color: model.hasPreviousImage
|
||||||
|
? ConstColours.white
|
||||||
|
: ConstColours.black,
|
||||||
),
|
),
|
||||||
Text(
|
AutoSizeText(
|
||||||
model.currentImageName,
|
model.currentImageName,
|
||||||
style: ConstText.imageOverlayTextStyle(context),
|
style: ConstText.imageOverlayTextStyle(context),
|
||||||
),
|
),
|
||||||
|
@ -74,6 +96,8 @@ class ImageCarouselView extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
const Gap(24),
|
const Gap(24),
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||||
|
|
|
@ -22,13 +22,14 @@ class ImageCarouselViewModel extends BaseViewModel {
|
||||||
final NavigationService _navigationService;
|
final NavigationService _navigationService;
|
||||||
final LoggingService _loggingService;
|
final LoggingService _loggingService;
|
||||||
|
|
||||||
late final ValueNotifier<ImageModel> _currentImageModel;
|
late final ValueNotifier<ImageModel> _currentImageModelNotifier;
|
||||||
ValueListenable<ImageModel> get currentImageModel => _currentImageModel;
|
ValueListenable<ImageModel> get currentImageModelListenable => _currentImageModelNotifier;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Future<void> initialise(bool Function() mounted, [arguments]) async {
|
Future<void> initialise(bool Function() mounted, [arguments]) async {
|
||||||
_currentImageModel = ValueNotifier(_imagesService.imageModels
|
_currentImageModelNotifier = ValueNotifier(_imagesService.imageModels
|
||||||
.elementAt((arguments! as ImageCarouselViewArguments).imageIndexKey));
|
.elementAt((arguments! as ImageCarouselViewArguments).imageIndexKey));
|
||||||
|
_loggingService.info('Initialized with image: ${_currentImageModelNotifier.value.imageIndex}');
|
||||||
|
|
||||||
super.initialise(mounted, arguments);
|
super.initialise(mounted, arguments);
|
||||||
}
|
}
|
||||||
|
@ -38,17 +39,25 @@ class ImageCarouselViewModel extends BaseViewModel {
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
String get currentImageUrl => currentImageModel.value.uri.toString();
|
void swipedTo({required int newIndex}) {
|
||||||
String get currentImageKey => currentImageModel.value.imageIndex.toString();
|
_currentImageModelNotifier.value = _imagesService.imageModelAt(index: newIndex);
|
||||||
String get currentImageName => currentImageModel.value.imageName;
|
_loggingService.info('Swiped to image: ${_currentImageModelNotifier.value.imageIndex}');
|
||||||
|
}
|
||||||
|
|
||||||
|
String get currentImageUrl => currentImageModelListenable.value.uri.toString();
|
||||||
|
String get currentImageKey => currentImageModelListenable.value.imageIndex.toString();
|
||||||
|
String get currentImageName => currentImageModelListenable.value.imageName;
|
||||||
|
int get currentImageIndex => currentImageModelListenable.value.imageIndex;
|
||||||
|
|
||||||
|
int get numberOfImages => _imagesService.numberOfImages;
|
||||||
|
|
||||||
double? downloadProgressValue({required DownloadProgress progress}) =>
|
double? downloadProgressValue({required DownloadProgress progress}) =>
|
||||||
progress.totalSize != null ? progress.downloaded / progress.totalSize! : null;
|
progress.totalSize != null ? progress.downloaded / progress.totalSize! : null;
|
||||||
|
|
||||||
bool get hasPreviousImage =>
|
bool get hasPreviousImage =>
|
||||||
currentImageModel.value.imageIndex > _imagesService.firstAvailableImageIndex;
|
currentImageModelListenable.value.imageIndex > _imagesService.firstAvailableImageIndex;
|
||||||
bool get hasNextImage =>
|
bool get hasNextImage =>
|
||||||
currentImageModel.value.imageIndex < _imagesService.lastAvailableImageIndex;
|
currentImageModelListenable.value.imageIndex < _imagesService.lastAvailableImageIndex;
|
||||||
|
|
||||||
static ImageCarouselViewModel get locate => Locator.locate();
|
static ImageCarouselViewModel get locate => Locator.locate();
|
||||||
}
|
}
|
||||||
|
|
18
pubspec.lock
18
pubspec.lock
|
@ -43,6 +43,13 @@ packages:
|
||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.9.0"
|
version: "2.9.0"
|
||||||
|
auto_size_text:
|
||||||
|
dependency: "direct main"
|
||||||
|
description:
|
||||||
|
name: auto_size_text
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "3.0.0"
|
||||||
boolean_selector:
|
boolean_selector:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
@ -71,6 +78,13 @@ packages:
|
||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.0.2"
|
version: "1.0.2"
|
||||||
|
carousel_slider:
|
||||||
|
dependency: "direct main"
|
||||||
|
description:
|
||||||
|
name: carousel_slider
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "4.2.1"
|
||||||
characters:
|
characters:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
@ -545,7 +559,7 @@ packages:
|
||||||
name: talker
|
name: talker
|
||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.1.0+1"
|
version: "2.2.0"
|
||||||
talker_dio_logger:
|
talker_dio_logger:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
|
@ -559,7 +573,7 @@ packages:
|
||||||
name: talker_logger
|
name: talker_logger
|
||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.1.0"
|
version: "2.2.0"
|
||||||
term_glyph:
|
term_glyph:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|
|
@ -32,9 +32,11 @@ dependencies:
|
||||||
|
|
||||||
# Util frontend
|
# Util frontend
|
||||||
flutter_markdown: ^0.6.13
|
flutter_markdown: ^0.6.13
|
||||||
|
auto_size_text: ^3.0.0
|
||||||
|
carousel_slider: ^4.2.1
|
||||||
|
|
||||||
# Logging
|
# Logging
|
||||||
talker: ^2.1.0+1
|
talker: ^2.2.0
|
||||||
talker_dio_logger: ^1.0.0
|
talker_dio_logger: ^1.0.0
|
||||||
|
|
||||||
# Assets
|
# Assets
|
||||||
|
|
Loading…
Reference in a new issue