How to Integrate Business Card Scanning and Professional Networking in Flutte...

In FlutterFlow, create a Custom Action named captureBusinessCard. Add the image_picker package via Pubspec Dependencies. The action calls ImagePicker().pickImage(source: ImageSource.camera, imageQuality: 85, maxWidth: 1024). After capture, compress the image and convert it to base64 for transmission to the Cloud Function. Alternatively, add the cunning_document_scanner or document_scanner_flutter package for auto-edge detection and perspective correction — it straightens skewed card photos automatically. Return the base64-encoded image string to a Page State variable named cardImageBase64. Show a preview of the captured image and a Retake button so users can recapture if the image is blurry.

Create a Cloud Function named parseBusinessCard. It accepts the base64-encoded card image. Call Google Cloud Vision: POST https://vision.googleapis.com/v1/images:annotate with request body containing the base64 image and features: [{type: TEXT_DETECTION}]. Vision returns the full text and individual text blocks. Extract all text: response.data.responses[0].fullTextAnnotation.text. Now parse it with regex: email = text.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/), phone = text.match(/(\+?1?[-.\s]?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4})/), website = text.match(/(?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]{2,}/). For name extraction, use the first line of text (typically the person's name on cards). Title and company require heuristics based on common business card layouts.

1const functions = require('firebase-functions');
2const axios = require('axios');
3const { GoogleAuth } = require('google-auth-library');
4
5exports.parseBusinessCard = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') return res.status(204).send('');
8
9  const { imageBase64 } = req.body;
10  if (!imageBase64) return res.status(400).json({ error: 'imageBase64 required' });
11
12  const auth = new GoogleAuth({ scopes: 'https://www.googleapis.com/auth/cloud-platform' });
13  const client = await auth.getClient();
14  const token = await client.getAccessToken();
15
16  const visionRes = await axios.post(
17    'https://vision.googleapis.com/v1/images:annotate',
18    { requests: [{ image: { content: imageBase64 }, features: [{ type: 'TEXT_DETECTION' }] }] },
19    { headers: { Authorization: `Bearer ${token.token}` } }
20  );
21
22  const text = visionRes.data.responses[0]?.fullTextAnnotation?.text || '';
23  const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
24
25  const email = (text.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/) || [])[0];
26  const phone = (text.match(/(\+?1?[-.\s]?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4})/) || [])[0];
27  const website = (text.match(/(?:www\.)[a-zA-Z0-9-]+\.[a-zA-Z]{2,}/) || [])[0];
28
29  // Name heuristic: first non-empty line not matching email/phone/website
30  const name = lines.find((l) => !l.match(/@|\.|[0-9]{3}/) && l.length > 2 && l.length < 50);
31
32  res.json({ name: name || '', email: email || '', phone: phone || '', website: website || '', rawText: text });
33});

After the OCR Cloud Function returns results, populate a review form. Create Page State variables for each contact field: parsedName, parsedTitle, parsedCompany, parsedEmail, parsedPhone, parsedWebsite. Bind the Cloud Function response fields to these Page State variables via the Action Flow. Show a form with pre-filled TextFields bound to each Page State variable so users can correct parsing errors before saving. Add a Save Contact button. In its Action Flow: (1) Create Document in Firestore scanned_contacts collection with all fields plus cardImageUrl (upload the image to Firebase Storage and store the URL), userId (current user's UID), and scannedAt (server timestamp). (2) Show a success Snackbar. (3) Navigate to the contact detail page or back to the contacts list.

Create a ScannedContacts page. Add a Backend Query loading the scanned_contacts collection filtered by userId == currentUser.uid, ordered by scannedAt descending. Add a search TextField bound to a Page State variable searchQuery. Add a second Backend Query with an additional filter for display when searching. Since Firestore does not support full-text search, implement client-side filtering: add a Custom Function named filterContacts that takes the full contacts list and the search query and returns only contacts where name, company, or email contains the search string (case-insensitive). Bind the ListView to the filtered result. Each contact card shows the card image thumbnail, name, title, company, and email.

On the contact detail page, add an Export Contact button. Create a Custom Action named exportVCard. Generate the vCard format string: BEGIN:VCARD\nVERSION:3.0\nFN:{name}\nORG:{company}\nTITLE:{title}\nTEL:{phone}\nEMAIL:{email}\nURL:{website}\nEND:VCARD. Use the path_provider package to write this string to a temporary file (e.g., contact.vcf in the temp directory). Then use share_plus to share the file: Share.shareXFiles([XFile(path)], subject: 'Contact: {name}'). This opens the native iOS/Android share sheet where users can share to Mail, Messages, WhatsApp, or save to their contacts app. For direct device contact sync without the share sheet, add the contacts_service or flutter_contacts package and call ContactsService.addContact() with the parsed fields.