QR codes offer a quick and convenient way to share data like URLs, contact information, Wi-Fi credentials, and more. By simply scanning a QR code with apps like Google Lens (Android), Apple Camera (iOS), or your own custom-built app, users can instantly access the embedded content.
In this guide, We’ll learn how to create a Custom QR Code Generator using Flutterflow. We’ll walk you through building a reusable widget that can be easily integrated into your FlutterFlow app. With customizable colors, shapes, you can generate QR codes that match your app’s style and branding!
Package overview
Here’s a Flutter package you can use to build your own QR code generator widget.
You can explore Flutter packages on pub.dev, the official package repository for Dart and Flutter. One popular and well-maintained option for generating QR codes is qr_flutter, known for its reliability and community support.
The package maintains strong metrics including Likes, Pub Points (up to 150), and a high Popularity rating (out of 100%). You can learn more about how these scores work here.
It also supports web, making it easy to preview and test your widget directly in FlutterFlow’s Run/Test mode.
Setup FlutterFlow
- Go to FlutterFlow Website
Visit flutterflow.io and log in with your Google or GitHub account. If you don’t have an account, sign up for free. - Create a New Project
- After logging in, click the “Create New” button on the Flutter Flow dashboard.
- Choose “Blank App” or select from templates if you want a head start.
3. Name Your Project
Enter a name for your app and optionally add a project description.
4. Choose a Platform
Select the platforms you’re building for: Android, iOS, Web, or All.
5. Set Up Firebase (Optional but Recommended)
- You can skip this for now or connect your Firebase project.
- Firebase enables authentication, Firestore database, storage, and more.
6. Select a Layout
Choose a layout like mobile app, tablet, or web view based on your target platform.
7. Start Building Your App
Once inside the project, you can:
- Drag and drop widgets from the UI builder
- Add pages, components, and navigation
- Connect backend APIs or Firebase
- Use Custom Functions and Custom Widgets for advanced logic
8. Run/Test Your App
- Use the Run/Test tab to preview your app in real-time on the web.
- You can also use the FlutterFlow Preview App on mobile for live testing.
Defining the Custom Action
- From the Navigation Menu (present on the left), select Custom Functions.
- Go to the Custom Actions tab and click + Create.
- Enter the action name as QrCode.
- Add the package
Most well-known packages provide a simple usage example to help you get started quickly. On the qr_flutter package page, if you scroll down, you’ll find an Examples section. It includes a basic QR code generation snippet that serves as a great starting point for integrating the package into your app.
5. Add this Code in your Custom Code Widget.
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart';
import '/flutter_flow/custom_functions.dart';
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:qr_flutter/qr_flutter.dart';
import 'package:qr_flutter/qr_flutter.dart';
class QrCode extends StatefulWidget {
const QrCode({
super.key,
this.width,
this.height,
});
final double? width;
final double? height;
@override
State<QrCode> createState() => _QrCodeState();
}
class _QrCodeState extends State<QrCode> {
TextEditingController qrCodeController = TextEditingController();
String qrData = '';
@override
void dispose() {
qrCodeController.dispose();
super.dispose();
}
void generateQrCode() {
setState(() {
qrData = qrCodeController.text;
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextFormField(
controller: qrCodeController,
decoration: InputDecoration(
hintText: "Enter your text",
hintStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1),
borderRadius: BorderRadius.circular(20))),
),
const SizedBox(
height: 50,
),
QrImageView(
data: qrData,
version: QrVersions.auto,
size: 300,
),
const SizedBox(
height: 50,
),
Container(
height: 50,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.green,
),
child: MaterialButton(
onPressed: generateQrCode,
child: Text("Generate Qr Code"),
),
)
],
),
);
}
}
You can easily modify this code to support different types of QR code data such as URLs, phone numbers, email addresses, or even vCard/contact information. Instead of just plain text (like a name), predefined data formats allow users to generate QR codes that directly open links, dial numbers, or send emails when scanned. You can also enhance the UI with labels, validation, or by displaying the QR data below the code. Additionally, consider adding download or share functionality to improve usability.
6. After add this code then, Click the Save Button.
7. Go to the Widget Tree and click the add a click to this widget. Then navigate to the Components section, where you’ll find the custom widgets defined in your project. Locate the custom widget named “QrCode”, click on it to add it to your page, and design how you want it to appear within your layout.
8. Click the “Run” button at the top-right corner of the screen to start your FlutterFlow app.
The following shows the expression evaluation in action, running on an android emulator:
Output
Conclusion
The Custom QR Code Generator makes it easy to generate dynamic QR codes within your FlutterFlow app. Using the qr_flutter package, it ensures smooth rendering and user-friendly functionality. You can further enhance it by adding customization options, styling, or even QR scanning features to improve user experience.
References
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire Flutterflow developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.
