PageView is consuming all gestures with embedded webview in flutter - flutter

Question

I have an embedded web view that is nested alongside a pageview builder which controls my three js animations by sending javascript to the embedded web view.
import 'dart:async';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_museum/app/data/bloc/artifacts.dart';
import 'package:flutter_museum/app/domain/models/artifact_model.dart';
import 'package:flutter_museum/app/ui/discover/widgets/animatedCardTutorial.dart';
import 'package:flutter_museum/app/ui/discover/widgets/focusPointList.dart';
import 'package:flutter_museum/app/ui/discover/widgets/questionMarkButton.dart';
import 'package:flutter_museum/app/ui/discover/widgets/threeJSViewer.dart';
import 'package:flutter_museum/app/ui/widgets/assetOrCachedNetworkImage.dart';
import 'package:flutter_museum/app/ui/widgets/circularBackButton.dart';
import 'package:flutter_museum/app/ui/widgets/simpleVideo.dart';
import 'package:flutter_museum/app/ui/widgets/videoPlayerControllers.dart';
double deviceHeight = 0.0;
double deviceWidth = 0.0;
class ArtifactView extends StatefulWidget {
ArtifactView({
Key? key,
}) : super(key: key);
#override
State<ArtifactView> createState() => _ArtifactViewState();
}
class _ArtifactViewState extends State<ArtifactView> {
bool _fullscreen = false;
AbstractVideoPlayerController? videoPlayerController;
Timer? _restoreUiTimer;
int? startUpCount;
bool shouldShowTutorial = false;
void startFullScreen() {
if (!_fullscreen) {
setState(() {
_fullscreen = true;
_restoreUiTimer?.cancel();
_restoreUiTimer = Timer(Duration(milliseconds: 1500), endFullScreen);
});
}
}
void endFullScreen() {
setState(() {
_fullscreen = false;
});
}
void hideTutorial() {
setState(() {
shouldShowTutorial = false;
});
}
#override
void initState() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
super.initState();
}
#override
void dispose() {
SystemChrome.setPreferredOrientations(DeviceOrientation.values);
videoPlayerController?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// hide status bar when displaying fullscreen artifact. (otherwise show status bar)
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: _fullscreen ? [] : SystemUiOverlay.values);
return BlocConsumer<ArtifactsBloc, ArtifactsState>(
listener: (context, state) {},
builder: (context, state) {
Artifact artifact = state.hasArtifact ? state.currentArtifact : Artifact.empty;
//List<FocusPoint> focusPoints = state.hasArtifact ? state.focusPoints : [];
//String modelFilePath = state.modelPath;
//bool modelIsAsset = isAssetUrl(modelFilePath);
if (videoPlayerController == null && artifact.uuid == 'ironman_artifact') {
// EasterEgg // TODO - have Kodi add the polka.mp3 file to our CDN and reference that below instead of userbob.com
videoPlayerController = createVideoPlayerController('https://userbob.com/motb/polka.mp3', useChewie: true);
videoPlayerController?.initialize();
videoPlayerController?.play();
}
// FIXME - trying to always display background sized to device's dimensions so that the background
// doesn't shift when switching to full-screen mode. The code below will prevent the background from
// shifting after the first time we've gone into full-screen mode. However, the very first time
// their will be a slight shift.
//!FIXME - We should look into the overlfow widdget to let the scaffold know we intend to let this widget be larger than the screen.
var windowSize = MediaQuery.of(context).size;
if (windowSize.height > deviceHeight) deviceHeight = windowSize.height;
if (windowSize.width > deviceWidth) deviceWidth = windowSize.width;
return Center(
child: Container(
height: deviceHeight,
width: deviceWidth,
child: Stack(
children: [
if (videoPlayerController != null)
SimpleVideo(
placeholderImage: 'asset://images/discover/washingtonrevelations.webp',
videoPlayerController: videoPlayerController!,
),
if (artifact.backgroundUrl.isNotEmpty)
Container(
height: deviceHeight,
width: deviceWidth,
child: AssetOrCachedNetworkImage(imageUrl: artifact.backgroundUrl, fit: BoxFit.cover),
),
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
radius: 0.9,
colors: [
Colors.transparent,
Colors.transparent,
Colors.black38,
],
),
),
height: deviceHeight,
width: deviceWidth,
),
Listener(
onPointerDown: (PointerDownEvent e) {
startFullScreen();
},
child: GestureDetector(
onPanEnd: ((details) {
print('ended');
}),
child: ThreeJSViewer(
modelFilePath: state.modelPath,
initScale: artifact.cameraZoom.toInt(),
autoRotateSpeed: 2,
state: state,
),
),
),
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: EdgeInsets.only(top: 35),
child: CircularBackButton(
outterPadding: EdgeInsets.fromLTRB(10, 10, 0, 0),
onTap: () {
AutoRouter.of(context).pop();
},
),
),
),
AnimatedPositioned(
bottom: 60 - (_fullscreen ? 250 : 0.0),
duration: Duration(milliseconds: 300),
child: GestureDetector(
child: FocusPointList(
state: state,
),
),
),
],
),
),
);
},
);
}
}
finally here is my WebView plus widget
import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_museum/app/data/bloc/artifact/artifacts_state.dart';
import 'package:internet_connection_checker/internet_connection_checker.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';
// ignore: must_be_immutable
class ThreeJSViewer extends StatefulWidget {
final String? modelFilePath;
final String? modelURLPath;
final double? autoRotateSpeed;
final int initScale;
final ArtifactsState state;
final bool? debug;
final void Function(PointerMoveEvent)? onPointerMove;
ThreeJSViewer({
Key? key,
this.modelFilePath,
this.onPointerMove,
this.modelURLPath,
required this.initScale,
this.autoRotateSpeed,
required this.state,
this.debug,
}) : super(key: key);
#override
State<ThreeJSViewer> createState() => _ThreeJSViewerState();
}
class _ThreeJSViewerState extends State<ThreeJSViewer> {
int progress = 0;
WebViewPlusController? controller;
bool isRendered = false;
#override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (context, snapshot) {
if (snapshot.data == true) {
return Stack(
children: [
if (progress < 100 && isRendered == true)
Align(
alignment: Alignment.center,
child: Container(
height: 100,
width: 100,
child: CircularProgressIndicator(
value: progress.toDouble(),
),
),
),
WebViewPlus(
initialCookies: [],
gestureNavigationEnabled: true,
zoomEnabled: false,
gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
new Factory<OneSequenceGestureRecognizer>(
() {
print('GestureRecognizer created');
return new EagerGestureRecognizer();
},
),
].toSet(),
backgroundColor: Colors.transparent,
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: ({
JavascriptChannel(
name: 'JavascriptChannel',
onMessageReceived: (message) {
if (message == "200") {
setState(() {
isRendered = true;
});
}
log(message.message);
},
)
}),
onProgress: (_progress) {
setState(() {
progress = _progress;
});
},
onWebViewCreated: (_controller) {
controller = _controller;
_controller.loadUrl("assets/renderer/index.html");
},
onPageFinished: (value) {
Future.delayed(Duration(milliseconds: 100), () {
this.widget.state.controller = controller?.webViewController;
this.widget.state.controller!.runJavascript(
'init("${this.widget.modelFilePath ?? this.widget.modelURLPath}", ${this.widget.initScale},${this.widget.initScale},${this.widget.initScale}, ${this.widget.autoRotateSpeed ?? 2}, ${this.widget.debug ?? false})',
);
});
},
onPageStarted: (value) {
log(value);
},
onWebResourceError: (value) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error loading model. Please make sure you have internet connection.'),
),
);
log(value.description);
},
),
],
);
} else {
return Center(
child: Container(
child: DefaultTextStyle(
style: TextStyle(color: Colors.white, fontSize: 25),
child: Text(
"no internet connection",
),
),
),
);
}
},
future: InternetConnectionChecker().hasConnection,
);
}
}
My WebView is able to accept all gesture events when I initially rotate or zoom the three js model, but when I swipe a card on the pageview builder it consumes whatever gesture event for the duration of the widget lifetime.
finally here are the pageview cards
import 'package:flutter/material.dart';
import 'package:flutter_museum/app/data/bloc/artifact/artifacts_state.dart';
import 'package:flutter_museum/app/domain/models.dart';
import 'package:flutter_museum/app/ui/discover/views/focusPointView.dart';
import 'package:flutter_museum/app/ui/discover/widgets/focusPointCard.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_museum/app/data/bloc/artifacts.dart';
class FocusPointList extends StatefulWidget {
final ArtifactsState state;
const FocusPointList({Key? key, required this.state}) : super(key: key);
#override
State<FocusPointList> createState() => _FocusPointListState();
}
class _FocusPointListState extends State<FocusPointList> {
#override
Widget build(BuildContext context) {
int _centeredFocusPointIndex = 0;
ArtifactsState _state = this.widget.state;
List<FocusPoint> focusPoints = _state.hasArtifact ? _state.focusPoints : [];
List artifactFocusPointsList = focusPoints
.map(
(fp) => FocusPointCard(
publisher: fp.publisher ?? '',
subtitle: fp.subtitle ?? '',
title: fp.title,
imageUrl: fp.thumbnailImageUrl,
externalLink: fp.externalLink,
cardOnTap: () => _handleTapOnCard(context: context, focusPoint: fp),
),
)
.toList();
return Container(
height: 160,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
itemCount: artifactFocusPointsList.length,
controller: PageController(viewportFraction: 0.75),
onPageChanged: (int index) {
setState(() {
_centeredFocusPointIndex = index;
FocusPoint afp = focusPoints[index];
bool isPointsEmpty = afp.x + afp.y + afp.z != 0;
if (index < focusPoints.length - 1 && isPointsEmpty) {
_centeredFocusPointIndex = index;
_state.controller?.runJavascript('tweenCamera(${afp.x}, ${afp.y}, ${afp.z}, 2000);');
}
});
},
itemBuilder: (_, index) {
return Transform.scale(
scale: index == _centeredFocusPointIndex ? 1 : 0.9,
child: artifactFocusPointsList[index],
);
},
),
);
}
void _handleTapOnCard({required BuildContext context, required FocusPoint focusPoint}) {
if (focusPoint.externalLink != null) {
launch(focusPoint.externalLink!);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FocusPointView(
title: focusPoint.title,
subtitle: focusPoint.subtitle ?? '',
publisher: focusPoint.publisher ?? '',
imageUrl: focusPoint.detailImageUrl ?? '',
description: focusPoint.description ?? '',
),
),
);
}
}
}