Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sagarkalel/grid_camera
A Flutter camera package that provides a customizable grid overlay for precise photo composition. Features include adjustable grid rows/columns, aspect ratio control, built-in permission handling, and captured images with grid overlay.
https://github.com/sagarkalel/grid_camera
camera camera-app dart document-scanner flutter flutter-camera flutter-package grid-camera grid-layout image-capture photography
Last synced: about 1 month ago
JSON representation
A Flutter camera package that provides a customizable grid overlay for precise photo composition. Features include adjustable grid rows/columns, aspect ratio control, built-in permission handling, and captured images with grid overlay.
- Host: GitHub
- URL: https://github.com/sagarkalel/grid_camera
- Owner: sagarkalel
- License: mit
- Created: 2024-12-24T05:04:09.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-24T05:47:52.000Z (about 1 month ago)
- Last Synced: 2024-12-24T06:24:31.319Z (about 1 month ago)
- Topics: camera, camera-app, dart, document-scanner, flutter, flutter-camera, flutter-package, grid-camera, grid-layout, image-capture, photography
- Language: Dart
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# grid_camera
[](https://pub.dev/packages/grid_camera)
[](https://pub.dev/packages/grid_camera/score)
[](https://pub.dev/packages/grid_camera/score)
grid_camera is a Flutter package that enhances the camera experience with a customizable grid overlay system. Built on top of the official camera plugin, it provides an easy-to-use widget for applications requiring precise photo composition, document scanning, or grid-based image capture.
A Flutter camera package that provides a customizable grid overlay for precise photo composition. Features include adjustable grid rows/columns, aspect ratio control, built-in permission handling, and captured images with grid overlay. Perfect for applications requiring precise photo composition, document scanning, or grid-based image capture.
### Key Features:
- Customizable camera preview with adjustable grid overlay
- Configurable grid rows, columns, and appearance
- Flexible aspect ratio control
- Built-in permission handling with customizable UI
- Image capture with grid overlay
- Utility extensions for quick widget styling
- Responsive design and error handling
- Easy integration with existing Flutter apps
### Perfect for:
- 📸 Document scanning apps
- 📊 Technical photography
- 📏 Measurement applications
- 🎨 Design and composition tools
- 📱 Any app requiring precise photo capture
## Features
- 📸 Customizable camera preview with grid overlay
- 🎯 Adjustable grid rows and columns
- 📐 Configurable aspect ratio
- 🎨 Customizable grid appearance
- 📱 Built-in permission handling
- 🔄 Image capture with grid overlay
- ⚡ Utility extensions for quick widget styling
- 🎯 Gap widget for consistent spacing
- 📱 **Platform Support**:
- ✅ Android
- ✅ iOS
## Getting Started
### Prerequisites
This package relies on the official [camera](https://pub.dev/packages/camera) plugin. You'll need to configure your project according to the platform-specific requirements.
#### Android
Add the following permissions to your `AndroidManifest.xml`:
```xml
```
#### iOS
Add the following keys to your `Info.plist`:
```xml
NSCameraUsageDescription
Your camera usage description here
```
For detailed camera setup instructions, please refer to the official [camera plugin documentation](https://pub.dev/packages/camera).
### Installation
Add this to your package's `pubspec.yaml` file:
```yaml
dependencies:
grid_camera: ^0.1.0
```
## Usage
### Complete Example
```dart
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:grid_camera/grid_camera.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.dark,
darkTheme: ThemeData.dark(),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State createState() => _HomePageState();
}
class _HomePageState extends State {
Uint8List? imageInBytes;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Grid Camera Demo",
style: Theme.of(context).textTheme.titleLarge,
),
const Gap(24),
Container(
height: MediaQuery.of(context).size.width * .8,
width: MediaQuery.of(context).size.width * .8,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorLight.withOpacity(0.5),
borderRadius: BorderRadius.circular(10),
image: imageInBytes == null
? null
: DecorationImage(image: MemoryImage(imageInBytes!)),
),
alignment: Alignment.center,
child: imageInBytes != null
? IconButton.outlined(
onPressed: () {
imageInBytes = null;
setState(() {});
},
icon: const Icon(Icons.delete_forever, size: 48),
)
: IconButton.outlined(
onPressed: () async {
final img = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CameraPage()),
);
if (img == null) return;
imageInBytes = img;
setState(() {});
},
icon: const Icon(Icons.upload, size: 48),
),
),
const Gap(kToolbarHeight),
],
).padXXDefault,
),
);
}
}
class CameraPage extends StatelessWidget {
const CameraPage({super.key});
@override
Widget build(BuildContext context) {
return GridCameraWidget(
onDonePressed: (Uint8List img) => Navigator.pop(context, img),
rowCount: 10,
columnCount: 10,
gridWidth: 0.5,
aspectRatio: 1 / 1,
);
}
}
```
### Customized Implementation
```dart
GridCameraWidget(
rowCount: 4,
columnCount: 4,
gridColor: Colors.white,
gridWidth: 2.0,
aspectRatio: 4/3,
clickPhotoIcon: Icon(Icons.camera),
doneIcon: Icon(Icons.check_circle),
refreshIcon: Icon(Icons.refresh),
cameraLoadingWidget: CircularProgressIndicator(),
onDonePressed: (imageBytes) {
// Handle captured image
},
onCameraAccessDenied: () {
// Handle permission denied
},
otherExceptionTitleText: 'Custom Error Title',
otherExceptionBodyText: 'Custom error message',
otherExceptionOkayText: 'Retry',
);
```
## Additional Utilities
### Gap Widget
A simple widget for creating consistent spacing:
```dart
// Creates both vertical and horizontal space
const Gap(16);
// In a column
Column(
children: [
Text('Hello'),
Gap(8), // 8.0 pixels of space
Text('World'),
],
);
```
### Widget Extensions
Convenient extensions for common padding patterns:
```dart
// Horizontal padding
myWidget.padXX(16)
// Vertical padding
myWidget.padYY(16)
// Default horizontal padding (16px)
myWidget.padXXDefault
// Bottom padding
myWidget.padYBottom(16)
// Top padding
myWidget.padYTop(16)
// Left padding
myWidget.padXLeft(16)
// Right padding
myWidget.padXRight(16)
// All-side padding
myWidget.padAll(16)
// Expand widget
myWidget.expand
```
## Configuration Options
### GridCameraWidget Properties
| Property | Type | Description |
| ----------------------- | ------------------- | ----------------------------------------- |
| rowCount | int | Number of horizontal grid lines + 1 |
| columnCount | int | Number of vertical grid lines + 1 |
| gridColor | Color? | Color of grid lines |
| gridWidth | double | Width of grid lines |
| aspectRatio | double | Camera preview aspect ratio |
| onDonePressed | Function(Uint8List) | Callback when image is captured |
| onCameraAccessDenied | VoidCallback? | Callback when camera permission denied |
| onOtherException | VoidCallback? | Callback for other errors |
| permissionDeniedWidget | Widget? | Custom widget for permission denied state |
| cameraLoadingWidget | Widget? | Custom loading widget |
| clickPhotoIcon | Widget? | Custom capture button icon |
| doneIcon | Widget? | Custom done button icon |
| refreshIcon | Widget? | Custom refresh button icon |
| otherExceptionTitleText | String? | Custom error dialog title |
| otherExceptionBodyText | String? | Custom error dialog message |
| otherExceptionOkayText | String? | Custom error dialog button text |
## Troubleshooting
Common issues and their solutions:
1. **Camera not initializing**: Ensure you've added all required permissions and followed the camera plugin setup.
2. **Black screen**: Check if the camera permission is granted at runtime.
3. **Grid not visible**: Verify that the gridColor contrasts with your camera preview.
4. **gradle error**: To overcome this problem, you'll need to upgrade gradle version to latest version OR uou can use "grid_camera" package's old version (e.g grid_camera: ^0.0.8).
For more specific camera-related issues, please refer to the [camera plugin's troubleshooting guide](https://pub.dev/packages/camera#troubleshooting).
## Contributing
Contributions are welcome! If you find a bug or want a feature, please file an issue.
## License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## Credits
This package builds upon the [camera](https://pub.dev/packages/camera) package, gives grid overlay and easy way to use camera widget.