Flutter: Adding Thermal Printer

Introduction

Printing receipts, coupons, QR Codes & Barcodes are common these days so it is very normal to add such functionalities to our Apps.

In this article, I will be showing how to set up and connect to a thermal printer through Bluetooth and print through it.

Note: You must have a Bluetooth enabled thermal printer like one there in the banner to connect.

Step 1

Add the dependency to your pubspec.yaml file. You can get the latest version from https://pub.dev/packages/esc_pos_printer

Change the minimum SDK version to at least 21 in android/app/build.gradle

defaultConfig {
    minSdkVersion 21
}

Step 2

Create an empty page with an AppBar and a Floating Action Button with Search Icon.

return Scaffold(
  appBar: AppBar(
    title: Text('Printer Demo'),
  ),
  floatingActionButton: FloatingActionButton(onPressed: (){
    //Code to search for devices
  },child: Icon(Icons.search),),
);

Step 3

Initialize an Object of PrinterBluetoothManager class & List<PrinterBluetooth> in the class.

PrinterBluetoothManager printerManager = PrinterBluetoothManager();
List<PrinterBluetooth> _devices = [];

Step 4

Search for Bluetooth Devices in the onClick of the FloatingActionButton

floatingActionButton: FloatingActionButton(onPressed: (){
printerManager.startScan(Duration(seconds: 4));
  printerManager.scanResults.listen((scannedDevices) {
    setState(() {
      _devices=scannedDevices;
    });
  });
},child: Icon(Icons.search),),

1. startScan() starts the scan for the Duration given to it

2. scanResults returns a stream by listening to which we can get the List<BluetoothDevices> in our _devices variable

Step 5

Show the devices with a ListView

body: ListView.builder(
  itemBuilder: (context,position)=>ListTile(
    onTap: (){
      //code to print with this device
    },
    title: Text(_devices[position].name),
    subtitle: Text(_devices[position].address),
  ),
  itemCount: _devices.length,
),

Step 6

Print something with the device on clicking on the ListTile. For that, we have to select that printer and take the help of the Ticket class in which we will set our data for printing.

printerManager.selectPrinter(_devices[position]);
Ticket ticket=Ticket(PaperSize.mm58);
ticket.text('Demo text');
ticket.feed(1);
ticket.cut();
printerManager.printTicket(ticket).then((result) {
  Scaffold.of(context).showSnackBar(SnackBar(content: Text(result.msg)));
}).catchError((error){
  Scaffold.of(context).showSnackBar(SnackBar(content: Text(error.toString())));
});

Demo Video

Step 7

We have to learn various methods of the Ticket class to print according to our requirements.

1. text() : To print text .There are some basic styles we can provide to it.

ticket.text('Demo text',styles: PosStyles(
  bold: true,
  height: PosTextSize.size1,
  width: PosTextSize.size8,
  align: PosTextAlign.center,
  fontType: PosFontType.fontA,
  reverse: false,
  underline: true,
));

2. image() : To print an image.You can print an image from your asset or from the network too.

Asset :

final ByteData data = await rootBundle.load('YOUR ASSET');
final Uint8List bytes = data.buffer.asUint8List();
final Image image = decodeImage(bytes);
ticket.image(image);

Network :

final ByteData data = await NetworkAssetBundle(Uri.parse('YOUR URL')).load("");
final Uint8List bytes = data.buffer.asUint8List();
final Image image = decodeImage(bytes);
ticket.image(image);

3. row(): You can put multiple columns in a row

ticket.row([
  PosColumn(
    text: 'Item',
    width: 9,
    styles: PosStyles(align: PosTextAlign.right, underline: true),
  ),
  PosColumn(
    text: 'Price',
    width: 3,
    styles: PosStyles(align: PosTextAlign.right, underline: true),
  ),
]);

4. feed(): Used to set the pages

ticket.feed(1);

5. cut(): Used to provide some space after the page to cut properly

ticket.cut();

6. barCode() : Used to print barcode

final List<int> barData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 4];
ticket.barcode(Barcode.upcA(barData));

7.emptyLines() : Used to fill empty lines

ticket.emptyLines(1);

Conclusion

Now, our “Flutter: Adding Thermal Printer” is complete. I hope that you have received some useful information from this article. You can find the demo project from https://github.com/SmarttersStudio/flutter-printer-demo

You can follow me on Twitter and LinkedIn . Also, don’t forget to checkout our Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

Happy coding…

Guru Prasad Mohapatra