How to make Qr Code Scanner and Generator app in a flutter 2021.

What is Flutter?
Flutter is an open-source mobile UI framework created by Google and it released in May 2017. In simple words, It allows creating of a native mobile application with only one codebase.

How to make QR Code Scanner and Generator app in Flutter ?

Step 1. Create your flutter project.
Type on Terminal or cmd flutter create my_project_name. Make sure before typing this command you must have connected your pc with the internet.

Step 2. Add dependency.
Go to pub.dev and search flutter_barcode_scanner and barcode_widget this to packages help to create QR code and scanner QR code.

flutter_barcode_scanner – This package is help to scanning the bar code.
barcode_widget – This packages help to scanning QR code.

step 3. Creating screens or widgets.
Go to lib/main.dart and this Code

import 'package:flutter/material.dart';
import 'package:qrcode/screens/home.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'QR Code Scanner',
        theme: ThemeData(
          primaryColor: Colors.red,
        ),
        home: HomeScreen());
  }
}

and create screen folder in the lib directory and on screen folder create home.dart file.

import 'package:flutter/material.dart';

import 'package:qrcode/widgets/buttonwidget.dart';

import 'QRCreateScreen.dart';
import 'QRScanScreen.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ButtonWidget(
              textBut: 'Create QR code',
              onClick: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => QRCreateScreen(),
              )),
            ),
            const SizedBox(
              height: 32,
            ),
            ButtonWidget(
              textBut: 'Scan QR Code',
              onClick: () => {
                Navigator.of(context).push(
                  MaterialPageRoute(
                      // builder: (BuildContext context) => QRScanPage(),
                      builder: (BuildContext context) => QRScanScreen()),
                )
              },
            ),
          ],
        ),
      ),
    );
  }


}

QRCreateScreen.dart in screen directory.

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




class QRCreateScreen extends StatefulWidget {
  const QRCreateScreen({Key? key}) : super(key: key);

  @override
  _QRCreateScreenState createState() => _QRCreateScreenState();
}

class _QRCreateScreenState extends State<QRCreateScreen> {
  final controller = TextEditingController();
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Generate QR Code'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: EdgeInsets.all(24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                controller.text.isEmpty
                    ? Container(
                        width: 200,
                        height: 200,
                      )
                    : BarcodeWidget(
                        barcode: Barcode.qrCode(),
                        color: Colors.black,
                        data: controller.text,
                        width: 200,
                        height: 200,
                      ),
                SizedBox(height: 40),
                Row(
                  children: [
                    Expanded(child: buildTextField(context)),
                    const SizedBox(width: 12),
                    FloatingActionButton(
                      backgroundColor: Theme.of(context).primaryColor,
                      child: Icon(Icons.done, size: 30),
                      onPressed: () => setState(() {}),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
   

      );

  Widget buildTextField(BuildContext context) => TextField(
        controller: controller,
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
          fontSize: 20,
        ),
        decoration: InputDecoration(
          hintText: 'Enter the data',
          hintStyle: TextStyle(color: Colors.grey),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(color: Colors.black),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(
              color: Theme.of(context).primaryColor,
            ),
          ),
        ),
      );
}

QRScanScreen.dart in screen directory.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
import 'package:qrcode/widgets/buttonwidget.dart';




class QRScanScreen extends StatefulWidget {
  const QRScanScreen({Key? key}) : super(key: key);

  @override
  _QRScanScreenState createState() => _QRScanScreenState();
}

class _QRScanScreenState extends State<QRScanScreen> {
  String qrCode = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scan QR Code'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Scan Result',
                    style: TextStyle(
                      fontSize: 25,
                      color: Colors.black54,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      Clipboard.setData(
                          ClipboardData(text: qrCode.isEmpty ? '' : qrCode));
                      ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text("Copied to Clipboard")));
                    },
                    icon: Icon(Icons.copy),
                    iconSize: 25,
                  )
                ],
              ),
              SizedBox(height: 8),
              Text(
                qrCode.toString(),
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.black54,
                ),
              ),
              SizedBox(height: 60),
              ButtonWidget(
                  textBut: 'Start QR scan', onClick: () => scanQRCode()),
            ],
          ),
        ),
      ),
  

    );
  }

// this functin will help to scann qr code.
  Future<void> scanQRCode() async {
    try {
      final qrCode = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666',
        "cancal",
        true,
        ScanMode.QR,
      );

      if (!mounted) return;

      setState(() {
        this.qrCode = qrCode;
        print(qrCode);
      });
    } on PlatformException {
      qrCode = 'Failed to get platform version.';
    }
  }
}

lib/widgets/buttonwidget.dart

import 'package:flutter/material.dart';

class ButtonWidget extends StatelessWidget {
  final String? textBut;
  final VoidCallback? onClick;
  const ButtonWidget({Key? key, @required this.textBut, @required this.onClick})
      : super(key: key);

  @override
  Widget build(BuildContext context) => RaisedButton(
      child: Text(
        textBut.toString(),
        style: TextStyle(fontSize: 24),
      ),
      shape: StadiumBorder(),
      color: Theme.of(context).primaryColor,
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      textColor: Colors.white,
      onPressed: onClick);
}

This is the code to create QR code scanner and QR code Creater