Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor: Extracted camera overlays into their own widget with visibility management #949

Merged
merged 6 commits into from
Jan 15, 2022
Merged

Refactor: Extracted camera overlays into their own widget with visibility management #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e4e2083
Refactor: Camera refactoring
M123-dev Jan 13, 2022
56d0771
Update ml_kit_scan_page.dart
M123-dev Jan 13, 2022
a4428a4
Update ml_kit_scan_page.dart
M123-dev Jan 13, 2022
d925104
added documentation and lifecycle management
M123-dev Jan 15, 2022
b104187
Merge branch 'develop' into camera-refactoring
M123-dev Jan 15, 2022
590aa30
Update ml_kit_scan_page.dart
M123-dev Jan 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 23 additions & 50 deletions packages/smooth_app/lib/pages/scan/continuous_scan_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:smooth_app/data_models/continuous_scan_model.dart';
import 'package:smooth_app/pages/scan/scan_page_helper.dart';
import 'package:smooth_ui_library/smooth_ui_library.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'package:smooth_app/pages/scan/scanner_overlay.dart';

class ContinuousScanPage extends StatefulWidget {
const ContinuousScanPage();
Expand All @@ -21,55 +19,30 @@ class _ContinuousScanPageState extends State<ContinuousScanPage> {
@override
Widget build(BuildContext context) {
_model = context.watch<ContinuousScanModel>();
return VisibilityDetector(
key: const Key('VisibilityDetector qr_code_scanner'),
onVisibilityChanged: (VisibilityInfo visibilityInfo) {
if (visibilityInfo.visibleFraction == 0.0) {
_stopLiveFeed();
} else {
_resumeLiveFeed();
}
},
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final double carouselHeight = constraints.maxHeight /
1.81; // roughly 55% of the available height
final double viewFinderBottomOffset = carouselHeight / 2.0;

final List<Widget> children = getScannerWidgets(
context,
constraints,
_model,
);

//Insert scanner at the right position
children.insert(
1,
SmoothRevealAnimation(
delay: 400,
startOffset: Offset.zero,
animationCurve: Curves.easeInOutBack,
child: QRView(
overlay: QrScannerOverlayShape(
// We use [SmoothViewFinder] instead of the overlay.
overlayColor: Colors.transparent,
// This offset adjusts the scanning area on iOS.
cutOutBottomOffset: viewFinderBottomOffset,
),
key: _scannerViewKey,
onQRViewCreated: setupScanner,
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final double carouselHeight =
constraints.maxHeight / 1.81; // roughly 55% of the available height
final double viewFinderBottomOffset = carouselHeight / 2.0;

return Scaffold(
body: ScannerOverlay(
model: _model,
restartCamera: _resumeLiveFeed,
stopCamera: _stopLiveFeed,
scannerWidget: QRView(
overlay: QrScannerOverlayShape(
// We use [SmoothViewFinder] instead of the overlay.
overlayColor: Colors.transparent,
// This offset adjusts the scanning area on iOS.
cutOutBottomOffset: viewFinderBottomOffset,
),
key: _scannerViewKey,
onQRViewCreated: setupScanner,
),
);

return Scaffold(
appBar: AppBar(toolbarHeight: 0.0),
body: Stack(
children: children,
),
);
},
),
),
);
},
);
}

Expand Down
94 changes: 34 additions & 60 deletions packages/smooth_app/lib/pages/scan/ml_kit_scan_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import 'package:google_ml_barcode_scanner/google_ml_barcode_scanner.dart';
import 'package:provider/provider.dart';
import 'package:smooth_app/data_models/continuous_scan_model.dart';
import 'package:smooth_app/main.dart';
import 'package:smooth_app/pages/scan/scan_page_helper.dart';
import 'package:smooth_ui_library/animations/smooth_reveal_animation.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'package:smooth_app/pages/scan/scanner_overlay.dart';

class MLKitScannerPage extends StatefulWidget {
const MLKitScannerPage({Key? key}) : super(key: key);
Expand All @@ -26,6 +24,7 @@ class MLKitScannerPageState extends State<MLKitScannerPage> {
int _cameraIndex = 0;
CameraLensDirection cameraLensDirection = CameraLensDirection.back;
bool isBusy = false;
bool imageStreamActive = false;

@override
void initState() {
Expand Down Expand Up @@ -59,31 +58,16 @@ class MLKitScannerPageState extends State<MLKitScannerPage> {

@override
void dispose() {
_stopLiveFeed();
_disposeLiveFeed();
_stopImageStream().then(
(_) => _controller?.dispose(),
);
super.dispose();
}

@override
Widget build(BuildContext context) {
_model = context.watch<ContinuousScanModel>();
return Scaffold(
body: VisibilityDetector(
key: const Key('VisibilityDetector ML Kit'),
onVisibilityChanged: (VisibilityInfo visibilityInfo) {
if (visibilityInfo.visibleFraction == 0.0) {
_stopLiveFeed();
} else {
_startLiveFeed();
}
},
child: _liveFeedBody(),
),
);
}

Widget _liveFeedBody() {
if (_controller?.value.isInitialized == false || _controller == null) {
if (_controller == null || _controller!.value.isInitialized == false) {
return const Center(child: CircularProgressIndicator());
}

Expand All @@ -100,37 +84,20 @@ class MLKitScannerPageState extends State<MLKitScannerPage> {
scale = 1 / scale;
}

return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final List<Widget> children = getScannerWidgets(
context,
constraints,
_model,
);

//Inserting the scanner at the right position
children.insert(
1,
SmoothRevealAnimation(
delay: 400,
startOffset: Offset.zero,
animationCurve: Curves.easeInOutBack,
child: Transform.scale(
scale: scale,
child: Center(
child: CameraPreview(
_controller!,
),
),
return Scaffold(
body: ScannerOverlay(
restartCamera: _resumeImageStream,
stopCamera: _stopImageStream,
model: _model,
scannerWidget: Transform.scale(
scale: scale,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this scale causes camera to not take up the whole screen, is it really needed ?

child: Center(
child: CameraPreview(
_controller!,
),
),
);

return Stack(
fit: StackFit.expand,
children: children,
);
},
),
),
);
}

Expand All @@ -141,24 +108,31 @@ class MLKitScannerPageState extends State<MLKitScannerPage> {
ResolutionPreset.high,
enableAudio: false,
);
_controller?.initialize().then((_) {
_controller!.setFocusMode(FocusMode.auto);
_controller!.lockCaptureOrientation(DeviceOrientation.portraitUp);

_controller!.initialize().then((_) {
if (!mounted) {
return;
}
_controller?.setFocusMode(FocusMode.auto);
_controller?.lockCaptureOrientation(DeviceOrientation.portraitUp);
_controller?.startImageStream(_processCameraImage);
_controller!.startImageStream(_processCameraImage);
imageStreamActive = true;
setState(() {});
});
}

Future<void> _stopLiveFeed() async {
await _controller?.stopImageStream();
_controller = null;
void _resumeImageStream() {
if (_controller != null && !imageStreamActive) {
_controller!.startImageStream(_processCameraImage);
imageStreamActive = true;
}
}

Future<void> _disposeLiveFeed() async {
await _controller?.dispose();
Future<void> _stopImageStream() async {
if (_controller != null) {
await _controller!.stopImageStream();
imageStreamActive = false;
}
}

//Convert the [CameraImage] to a [InputImage]
Expand Down
73 changes: 0 additions & 73 deletions packages/smooth_app/lib/pages/scan/scan_page_helper.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:smooth_app/data_models/continuous_scan_model.dart';
import 'package:smooth_app/pages/personalized_ranking_page.dart';
import 'package:smooth_app/widgets/ranking_floating_action_button.dart';
import 'package:smooth_app/widgets/smooth_product_carousel.dart';
import 'package:smooth_ui_library/animations/smooth_reveal_animation.dart';
import 'package:smooth_ui_library/util/ui_helpers.dart';
import 'package:smooth_ui_library/widgets/smooth_view_finder.dart';

bool areButtonsRendered(ContinuousScanModel model) =>
model.hasMoreThanOneProduct;
Expand Down Expand Up @@ -68,72 +64,3 @@ Widget buildButtonsRow(BuildContext context, ContinuousScanModel model) {
),
);
}

List<Widget> getScannerWidgets(
BuildContext context,
BoxConstraints constraints,
ContinuousScanModel model,
) {
final Size screenSize = MediaQuery.of(context).size;
final Size scannerSize = Size(
screenSize.width * 0.6,
screenSize.width * 0.33,
);
final double carouselHeight =
constraints.maxHeight / 1.81; // roughly 55% of the available height
final double buttonRowHeight = areButtonsRendered(model) ? 48 : 0;
final double availableScanHeight =
constraints.maxHeight - carouselHeight - buttonRowHeight;
// Padding for the qr code scanner. This ensures the scanner has equal spacing between buttons and carousel.
final EdgeInsets qrScannerPadding = EdgeInsets.only(
top: (availableScanHeight - scannerSize.height) / 2 + buttonRowHeight);

return <Widget>[
Container(
alignment: Alignment.center,
color: Colors.black,
child: Padding(
padding: qrScannerPadding,
child: SvgPicture.asset(
'assets/actions/scanner_alt_2.svg',
width: scannerSize.width,
height: scannerSize.height,
color: Colors.white,
),
),
),
SmoothRevealAnimation(
delay: 400,
startOffset: const Offset(0.0, 0.1),
animationCurve: Curves.easeInOutBack,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: qrScannerPadding,
child: SmoothViewFinder(
boxSize: scannerSize,
lineLength: screenSize.width * 0.8,
),
),
],
),
),
SmoothRevealAnimation(
delay: 400,
startOffset: const Offset(0.0, -0.1),
animationCurve: Curves.easeInOutBack,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildButtonsRow(context, model),
const Spacer(),
SmoothProductCarousel(
showSearchCard: true,
height: carouselHeight,
),
],
),
),
];
}
Loading