{"id":23589021,"url":"https://github.com/sagarkalel/grid_camera","last_synced_at":"2026-05-19T07:37:02.686Z","repository":{"id":269516225,"uuid":"907657608","full_name":"sagarkalel/grid_camera","owner":"sagarkalel","description":"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.","archived":false,"fork":false,"pushed_at":"2024-12-25T10:22:56.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-09T01:33:00.531Z","etag":null,"topics":["camera","camera-app","dart","document-scanner","flutter","flutter-camera","flutter-package","grid-camera","grid-layout","image-capture","photography"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sagarkalel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-24T05:04:09.000Z","updated_at":"2024-12-25T10:22:59.000Z","dependencies_parsed_at":"2024-12-24T06:24:35.431Z","dependency_job_id":"04f4befb-2105-4ac4-a2fa-483f7fbc2e47","html_url":"https://github.com/sagarkalel/grid_camera","commit_stats":null,"previous_names":["sagarkalel/grid_camera"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sagarkalel/grid_camera","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagarkalel%2Fgrid_camera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagarkalel%2Fgrid_camera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagarkalel%2Fgrid_camera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagarkalel%2Fgrid_camera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagarkalel","download_url":"https://codeload.github.com/sagarkalel/grid_camera/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagarkalel%2Fgrid_camera/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274232027,"owners_count":25245856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["camera","camera-app","dart","document-scanner","flutter","flutter-camera","flutter-package","grid-camera","grid-layout","image-capture","photography"],"created_at":"2024-12-27T06:12:18.880Z","updated_at":"2026-05-19T07:36:57.662Z","avatar_url":"https://github.com/sagarkalel.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grid_camera\n\n[![pub package](https://img.shields.io/pub/v/grid_camera.svg)](https://pub.dev/packages/grid_camera)\n[![likes](https://img.shields.io/pub/likes/grid_camera?logo=dart)](https://pub.dev/packages/grid_camera/score)\n[![popularity](https://img.shields.io/pub/popularity/grid_camera?logo=dart)](https://pub.dev/packages/grid_camera/score)\n\ngrid_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.\n\nA 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.\n\n### Key Features:\n\n- Customizable camera preview with adjustable grid overlay\n- Configurable grid rows, columns, and appearance\n- Flexible aspect ratio control\n- Built-in permission handling with customizable UI\n- Image capture with grid overlay\n- Utility extensions for quick widget styling\n- Responsive design and error handling\n- Easy integration with existing Flutter apps\n\n### Perfect for:\n\n- 📸 Document scanning apps\n- 📊 Technical photography\n- 📏 Measurement applications\n- 🎨 Design and composition tools\n- 📱 Any app requiring precise photo capture\n\n## Features\n\n- 📸 Customizable camera preview with grid overlay\n- 🎯 Adjustable grid rows and columns\n- 📐 Configurable aspect ratio\n- 🎨 Customizable grid appearance\n- 📱 Built-in permission handling\n- 🔄 Image capture with grid overlay\n- ⚡ Utility extensions for quick widget styling\n- 🎯 Gap widget for consistent spacing\n- 📱 **Platform Support**:\n  - ✅ Android\n  - ✅ iOS\n\n## Getting Started\n\n### Prerequisites\n\nThis 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.\n\n#### Android\n\nAdd the following permissions to your `AndroidManifest.xml`:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n```\n\n#### iOS\n\nAdd the following keys to your `Info.plist`:\n\n```xml\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eYour camera usage description here\u003c/string\u003e\n```\n\nFor detailed camera setup instructions, please refer to the official [camera plugin documentation](https://pub.dev/packages/camera).\n\n### Installation\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  grid_camera: ^0.1.0\n```\n\n## Usage\n\n### Complete Example\n\n```dart\nimport 'dart:typed_data';\n\nimport 'package:flutter/material.dart';\nimport 'package:grid_camera/grid_camera.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      themeMode: ThemeMode.dark,\n      darkTheme: ThemeData.dark(),\n      home: const HomePage(),\n    );\n  }\n}\n\nclass HomePage extends StatefulWidget {\n  const HomePage({super.key});\n\n  @override\n  State\u003cHomePage\u003e createState() =\u003e _HomePageState();\n}\n\nclass _HomePageState extends State\u003cHomePage\u003e {\n  Uint8List? imageInBytes;\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Text(\n              \"Grid Camera Demo\",\n              style: Theme.of(context).textTheme.titleLarge,\n            ),\n            const Gap(24),\n            Container(\n              height: MediaQuery.of(context).size.width * .8,\n              width: MediaQuery.of(context).size.width * .8,\n              decoration: BoxDecoration(\n                color: Theme.of(context).primaryColorLight.withOpacity(0.5),\n                borderRadius: BorderRadius.circular(10),\n                image: imageInBytes == null\n                    ? null\n                    : DecorationImage(image: MemoryImage(imageInBytes!)),\n              ),\n              alignment: Alignment.center,\n              child: imageInBytes != null\n                  ? IconButton.outlined(\n                      onPressed: () {\n                        imageInBytes = null;\n                        setState(() {});\n                      },\n                      icon: const Icon(Icons.delete_forever, size: 48),\n                    )\n                  : IconButton.outlined(\n                      onPressed: () async {\n                        final img = await Navigator.push(\n                          context,\n                          MaterialPageRoute(\n                              builder: (context) =\u003e const CameraPage()),\n                        );\n                        if (img == null) return;\n                        imageInBytes = img;\n                        setState(() {});\n                      },\n                      icon: const Icon(Icons.upload, size: 48),\n                    ),\n            ),\n            const Gap(kToolbarHeight),\n          ],\n        ).padXXDefault,\n      ),\n    );\n  }\n}\n\nclass CameraPage extends StatelessWidget {\n  const CameraPage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return GridCameraWidget(\n      onDonePressed: (Uint8List img) =\u003e Navigator.pop(context, img),\n      rowCount: 10,\n      columnCount: 10,\n      gridWidth: 0.5,\n      aspectRatio: 1 / 1,\n    );\n  }\n}\n\n```\n\n### Customized Implementation\n\n```dart\nGridCameraWidget(\n  rowCount: 4,\n  columnCount: 4,\n  gridColor: Colors.white,\n  gridWidth: 2.0,\n  aspectRatio: 4/3,\n  clickPhotoIcon: Icon(Icons.camera),\n  doneIcon: Icon(Icons.check_circle),\n  refreshIcon: Icon(Icons.refresh),\n  cameraLoadingWidget: CircularProgressIndicator(),\n  onDonePressed: (imageBytes) {\n    // Handle captured image\n  },\n  onCameraAccessDenied: () {\n    // Handle permission denied\n  },\n  otherExceptionTitleText: 'Custom Error Title',\n  otherExceptionBodyText: 'Custom error message',\n  otherExceptionOkayText: 'Retry',\n);\n```\n\n## Additional Utilities\n\n### Gap Widget\n\nA simple widget for creating consistent spacing:\n\n```dart\n// Creates both vertical and horizontal space\nconst Gap(16);\n\n// In a column\nColumn(\n  children: [\n    Text('Hello'),\n    Gap(8),  // 8.0 pixels of space\n    Text('World'),\n  ],\n);\n```\n\n### Widget Extensions\n\nConvenient extensions for common padding patterns:\n\n```dart\n// Horizontal padding\nmyWidget.padXX(16)\n\n// Vertical padding\nmyWidget.padYY(16)\n\n// Default horizontal padding (16px)\nmyWidget.padXXDefault\n\n// Bottom padding\nmyWidget.padYBottom(16)\n\n// Top padding\nmyWidget.padYTop(16)\n\n// Left padding\nmyWidget.padXLeft(16)\n\n// Right padding\nmyWidget.padXRight(16)\n\n// All-side padding\nmyWidget.padAll(16)\n\n// Expand widget\nmyWidget.expand\n```\n\n## Configuration Options\n\n### GridCameraWidget Properties\n\n| Property                | Type                | Description                               |\n| ----------------------- | ------------------- | ----------------------------------------- |\n| rowCount                | int                 | Number of horizontal grid lines + 1       |\n| columnCount             | int                 | Number of vertical grid lines + 1         |\n| gridColor               | Color?              | Color of grid lines                       |\n| gridWidth               | double              | Width of grid lines                       |\n| aspectRatio             | double              | Camera preview aspect ratio               |\n| onDonePressed           | Function(Uint8List) | Callback when image is captured           |\n| onCameraAccessDenied    | VoidCallback?       | Callback when camera permission denied    |\n| onOtherException        | VoidCallback?       | Callback for other errors                 |\n| permissionDeniedWidget  | Widget?             | Custom widget for permission denied state |\n| cameraLoadingWidget     | Widget?             | Custom loading widget                     |\n| clickPhotoIcon          | Widget?             | Custom capture button icon                |\n| doneIcon                | Widget?             | Custom done button icon                   |\n| refreshIcon             | Widget?             | Custom refresh button icon                |\n| otherExceptionTitleText | String?             | Custom error dialog title                 |\n| otherExceptionBodyText  | String?             | Custom error dialog message               |\n| otherExceptionOkayText  | String?             | Custom error dialog button text           |\n\n## Troubleshooting\n\nCommon issues and their solutions:\n\n1. **Camera not initializing**: Ensure you've added all required permissions and followed the camera plugin setup.\n2. **Black screen**: Check if the camera permission is granted at runtime.\n3. **Grid not visible**: Verify that the gridColor contrasts with your camera preview.\n4. **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).\n\nFor more specific camera-related issues, please refer to the [camera plugin's troubleshooting guide](https://pub.dev/packages/camera#troubleshooting).\n\n## Contributing\n\nContributions are welcome! If you find a bug or want a feature, please file an issue.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.\n\n## Credits\n\nThis package builds upon the [camera](https://pub.dev/packages/camera) package, gives grid overlay and easy way to use camera widget.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagarkalel%2Fgrid_camera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagarkalel%2Fgrid_camera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagarkalel%2Fgrid_camera/lists"}