Flutter QR Code Integration

Generate QR codes in Flutter and Dart mobile applications using the QR Code API.

QR Code Service

Create a service class to handle QR code generation:

qr_code_service.dart
import 'dart:typed_data';
import 'package:http/http.dart' as http;
import 'dart:convert';

class QRCodeService {
  final String _apiKey;
  static const String _baseUrl = 'https://www.qrcodeapi.io/api';

  QRCodeService(this._apiKey);

  Future<Uint8List> generate(String data, {int size = 300}) async {
    final response = await http.post(
      Uri.parse('$_baseUrl/generate'),
      headers: {
        'Authorization': 'Bearer $_apiKey',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'data': data,
        'size': size,
        'format': 'png',
      }),
    );

    if (response.statusCode == 200) {
      return response.bodyBytes;
    } else {
      throw Exception('Failed to generate QR code');
    }
  }
}

QR Code Widget

qr_code_widget.dart
import 'package:flutter/material.dart';
import 'qr_code_service.dart';

class QRCodeWidget extends StatefulWidget {
  final String data;
  final int size;

  const QRCodeWidget({
    Key? key,
    required this.data,
    this.size = 200,
  }) : super(key: key);

  @override
  State<QRCodeWidget> createState() => _QRCodeWidgetState();
}

class _QRCodeWidgetState extends State<QRCodeWidget> {
  Uint8List? _qrImage;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _generateQR();
  }

  Future<void> _generateQR() async {
    final service = QRCodeService('YOUR_API_KEY');
    try {
      final image = await service.generate(widget.data, size: widget.size);
      setState(() {
        _qrImage = image;
        _loading = false;
      });
    } catch (e) {
      setState(() => _loading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_loading) {
      return const CircularProgressIndicator();
    }
    if (_qrImage == null) {
      return const Text('Error loading QR');
    }
    return Image.memory(_qrImage!);
  }
}

Usage

main.dart
import 'package:flutter/material.dart';
import 'qr_code_widget.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: QRCodeWidget(
            data: 'https://example.com',
            size: 300,
          ),
        ),
      ),
    );
  }
}

Ready to Build Mobile Apps?

Get your free API key and start generating QR codes in Flutter.

Get Your Free API Key