Generating QR Codes in Flutter Across Multiple Platforms: iOS, Android, Linux, macOS, and Windows

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. In this article we will go through how we can create QR codes in flutter on any of these platforms: ANDROID, IOS, LINUX, MACOS, WEB, WINDOWS.

Step 1: Set Up a Flutter Project

If you haven’t already, install Flutter by following the instructions on the official Flutter website (https://flutter.dev/docs/get-started/install). Create a new Flutter project using the following commands:

flutter create my_qr_app
cd my_qr_app

Open the project in your preferred code editor.

Step 2: Add QR Code Generator Dependency

Flutter has several packages available for generating QR codes. One popular package is qr_flutter. Open the pubspec.yaml file in your Flutter project and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  qr_flutter: ^4.1.0

Save the file, and run flutter pub get in your terminal to fetch and install the new dependency.

Step 3: Import the QR Code Package

In your Dart file where you want to generate QR codes, import the qr_flutter package:

import 'package:qr_flutter/qr_flutter.dart';

Step 4: Create a QR Code Widget

Now, let’s create a widget that will display the QR code. You can use the QrPainter widget provided by the qr_flutter package. Here’s an example:

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';

class QRCodeGenerator extends StatelessWidget {
 final String message;
 const QRCodeGenerator({super.key, required this.message});

 @override
 Widget build(BuildContext context) {
  const double size = 280.0;
 
  return Material(
   color: Colors.white,
   child: SafeArea(
    child: Expanded(
     child: Center(
      child: SizedBox(
       width: size,
       child: CustomPaint(
        size: const Size.square(size),
        painter: QrPainter(
         data: message,
         version: QrVersions.auto,
        ),
       ),
      ),
     ),
    ),
   ),
  );
 }
}

This QRCodeGenerator widget can now be used to generate QR code by passing the `message` data to it.

Step 5: Implement the QR Code Widget

We will now use the QRCodeGenerator widget in your main application. Update the `main.dart` file with the following:

import 'package:flutter/material.dart';
import 'package:my_qr_app/qr_code_generator.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
 const MyApp({super.key});
 
 @override
 State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 String message = 'Hey this is a QR code. Change this value in the main_screen.dart file.';
 late TextEditingController qrMessageController;
 
 @override
 void initState() {
  super.initState();
  qrMessageController = TextEditingController(text: message);
 }

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Create QR Code',
   theme: ThemeData.light(),
   debugShowCheckedModeBanner: false,
   home: Column(
    children: [
     QRCodeGenerator(message: message),
     Padding(
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40).copyWith(bottom: 40),
      child: TextField(
       controller: qrMessageController,
       onChanged: (value) {
        setState(() {
         message = value;
        });
       },
      ),
     ),
    ],
   ),
  );
 }
}

Step 6: Run Your Flutter App

Save your changes and run your Flutter app:

flutter run

You should see your QR code displayed on the screen. Congratulations!🙌 You have successfully integrated a QR code generator into your Flutter application.

Conclusion

In this tutorial, we covered the steps to create QR codes in Flutter using the qr_flutter package. You can now customise the QR code appearance and use it to encode various types of information. Happy Coding!

Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.