ਧੜਕਣ: ਬਲੂਟੁੱਥ ਕਾਰਜਸ਼ੀਲਤਾ ਸ਼ਾਮਲ ਕਰਨਾ

ਇਹ ਲੇਖ ਫਲਟਰ ਨਾਲ ਬਲੂਟੁੱਥ ਕਾਰਜਕੁਸ਼ਲਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਸਹਾਇਤਾ ਕਰੇਗਾ.

ਜਾਣ -ਪਛਾਣ:

ਫਲੱਟਰ ਵਿੱਚ ਬਲੂਟੁੱਥ ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਕੋਈ ਦਸਤਾਵੇਜ਼ ਨਹੀਂ ਹਨ. ਇਸ ਲੇਖ ਵਿੱਚ, ਮੈਂ ਤੁਹਾਡੇ ਐਪ ਵਿੱਚ ਬਲੂਟੁੱਥ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਕੁਝ ਬੁਨਿਆਦੀ ਸੰਕਲਪਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਕੇ ਤੁਹਾਡੀ ਸਹਾਇਤਾ ਕਰਾਂਗਾ.

ਪਹਿਲਾਂ, ਪਲੱਗਇਨ/ਨਿਰਭਰਤਾ ਜੋ ਅਸੀਂ ਇਸ ਐਪ ਵਿੱਚ ਬਲੂਟੁੱਥ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤ ਰਹੇ ਹਾਂ flutter_bluetooth_serial , ਇਹ ਪਲੱਗਇਨ ਕਿਸੇ ਹੋਰ ਮੂਲ ਪਲੱਗਇਨ ਤੋਂ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿਸਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ flutter_blue . ਇਹ ਇੱਕ ਬਹੁਤ ਹੀ ਨਵਾਂ ਪਲੱਗਇਨ ਹੈ, ਬਲਿetoothਟੁੱਥ ਲਈ ਸਿਰਫ ਪਲੱਗਇਨ ਹੁਣ ਤੱਕ ਉਪਲਬਧ ਹੈ. ਇਸ ਵਿੱਚ ਕੁਝ ਬੱਗ ਹਨ ਪਰ ਮੇਰੇ ਤੇ ਵਿਸ਼ਵਾਸ ਕਰੋ, ਇਹ ਨਿਸ਼ਚਤ ਤੌਰ ਤੇ ਜ਼ਿਆਦਾਤਰ ਬੁਨਿਆਦੀ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਤੁਹਾਡਾ ਕੰਮ ਪੂਰਾ ਕਰ ਦੇਵੇਗਾ.

ਨੋਟ: ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਅਸੀਂ ਹੋਰ ਅੱਗੇ ਚੱਲੀਏ, ਇਹ ਜ਼ਿਕਰਯੋਗ ਹੈ ਕਿ ਇਹ ਪਲੱਗਇਨ ਸਿਰਫ ਐਂਡਰਾਇਡ ਲਈ ਕੰਮ ਕਰੇਗੀ ### ਲਾਗੂ ਕਰਨ:

ਆਪਣੀ pubspec.yaml ਫਾਈਲ ਵਿੱਚ ਇਹ ਨਿਰਭਰਤਾ ਸ਼ਾਮਲ ਕਰੋ:

dependencies: flutter_bluetooth_serial: ^0.0.4

Main.dart ਫਾਈਲ ਵਿੱਚ ਐਪ ਦਾ ਬੇਸ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: BluetoothApp(), // BluetoothApp() would be defined later ); } }

ਹੁਣ, ਆਓ ਇੱਕ | _+_ | ਬਣਾਉ ਬਲੂਟੁੱਥ ਐਪ ਕਿਹਾ ਜਾਂਦਾ ਹੈ. | _+_ | ਵਿੱਚ, ਸਾਨੂੰ ਕੁਝ ਵੇਰੀਏਬਲਸ ਅਤੇ ਏ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕੁੰਜੀ . ਸਾਨੂੰ | _+_ | ਦੀ ਉਦਾਹਰਣ ਵੀ ਲੈਣੀ ਪਵੇਗੀ ਇਸ ਕਲਾਸ ਵਿੱਚ. ਇਹ ਕਲਾਸ ਸਾਨੂੰ ਬਲੂਟੁੱਥ ਜਾਣਕਾਰੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗੀ.

StatefulWidget

ਹੁਣ, ਐਪ ਦੇ ਨਾਜ਼ੁਕ ਹਿੱਸੇ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਸਮਾਂ ਆ ਗਿਆ ਹੈ. ਸਾਨੂੰ ਪੇਅਰਡ ਬਲੂਟੁੱਥ ਉਪਕਰਣਾਂ ਦੀ ਸੂਚੀ ਪ੍ਰਾਪਤ ਕਰਨੀ ਹੈ ਅਤੇ ਜਾਂਚ ਕਰਨੀ ਹੈ ਕਿ ਕੀ ਬਲੂਟੁੱਥ ਜੁੜਿਆ ਹੋਇਆ ਹੈ. ਇਹ ਅਸਿੰਕਰੋਨਸਲੀ doneੰਗ ਨਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਸਾਨੂੰ ਉਪਕਰਣਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਵੀ ਬਣਾਉਣੀ ਪਵੇਗੀ, ਜੋ ਬਾਅਦ ਵਿੱਚ UI ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗੀ.

ਇਹ ਓਪਰੇਸ਼ਨ ਭਵਿੱਖ ਦੇ methodੰਗ ਨਾਲ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ, ਜਿਸਨੂੰ | _+_ | ਤੋਂ ਬੁਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.

_BluetoothAppState

UI 'ਤੇ ਜਾਣ ਦਾ ਸਮਾਂ, ਫਲਟਰ ਕੋਡਿੰਗ ਦਾ ਸਭ ਤੋਂ ਖੂਬਸੂਰਤ ਹਿੱਸਾ. ਕੋਡ ਥੋੜਾ ਲੰਮਾ ਹੋਵੇਗਾ ਪਰ ਇਸ ਵਿੱਚ ਜਿਆਦਾਤਰ ਅਸਾਨੀ ਨਾਲ ਪੜ੍ਹਨਯੋਗ ਕੋਡ ਹੋਵੇਗਾ, ਜੇ ਤੁਸੀਂ ਫਲਟਰ ਵਿਜੇਟਸ ਤੋਂ ਕੁਝ ਜਾਣੂ ਹੋ. ਇਸ UI ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਸਾਨੂੰ ਕੁਝ ਤਰੀਕਿਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਪਏਗਾ.

FlutterBluetoothSerial

ਇਸ ਲਈ, ਹੁਣ ਬਾਕੀ ਬਚੇ ਤਰੀਕਿਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਸਮਾਂ ਆ ਗਿਆ ਹੈ. ਪਹਿਲਾਂ ਆਓ ਅਸੀਂ | _+_ | ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ ੰਗ.

class BluetoothApp extends StatefulWidget { @override _BluetoothAppState createState() => _BluetoothAppState(); } class _BluetoothAppState extends State { // Initializing a global key, as it would help us in showing a SnackBar later final GlobalKey _scaffoldKey = new GlobalKey(); // Get the instance of the bluetooth FlutterBluetoothSerial bluetooth = FlutterBluetoothSerial.instance; // Define some variables, which will be required later List _devicesList = []; BluetoothDevice _device; bool _connected = false; bool _pressed = false; @override Widget build(BuildContext context) { return Container( // We have to work on the UI in this part ); } }

UI ਦੇ ਰਸਤੇ ਤੋਂ ਬਾਹਰ ਹੋਣ ਦੇ ਨਾਲ, ਸਾਡੇ ਕੋਲ ਚਾਰ ਤਰੀਕਿਆਂ ਨਾਲ ਰਹਿ ਗਏ ਹਨ. ਇਸ ਉਦਾਹਰਣ ਲਈ, ਅਸੀਂ | _+_ | ਨੂੰ ਲਾਗੂ ਕਰਾਂਗੇ ਅਤੇ | _+_ | ੰਗ. ਅਸੀਂ ਉਪਭੋਗਤਾ ਨੂੰ ਸਨੈਕਬਾਰ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨ ਦੀ ਇੱਕ ਵਿਧੀ ਵੀ ਲਾਗੂ ਕਰਾਂਗੇ ਜੇ ਉਪਭੋਗਤਾ ਨਾਲ ਜੁੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਵੇਲੇ ਕੋਈ ਬਲੂਟੁੱਥ ਉਪਕਰਣ ਨਹੀਂ ਚੁਣਿਆ ਜਾਂਦਾ.

initState()

ਇਸ ਸਮੇਂ, ਅਸੀਂ ਲਗਭਗ ਖਤਮ ਹੋ ਗਏ ਹਾਂ. ਸਾਡੇ ਕੋਲ ਹੁਣ ਦੋ methodsੰਗ ਰਹਿ ਗਏ ਹਨ, ਇੱਕ ਬਲੂਟੁੱਥ ਚਾਲੂ ਕਰਨ ਲਈ ਸੁਨੇਹਾ ਭੇਜਣ ਲਈ ਅਤੇ ਦੂਜਾ ਬਲੂਟੁੱਥ ਬੰਦ ਕਰਨ ਲਈ ਸੁਨੇਹਾ ਭੇਜਣ ਲਈ.

class _BluetoothAppState extends State { ... @override void initState() { super.initState(); bluetoothConnectionState(); } // We are using async callback for using await Future bluetoothConnectionState() async { List devices = []; // To get the list of paired devices try { devices = await bluetooth.getBondedDevices(); } on PlatformException { print('Error'); } // For knowing when bluetooth is connected and when disconnected bluetooth.onStateChanged().listen((state) { switch (state) { case FlutterBluetoothSerial.CONNECTED: setState(() { _connected = true; _pressed = false; }); break; case FlutterBluetoothSerial.DISCONNECTED: setState(() { _connected = false; _pressed = false; }); break; default: print(state); break; } }); // It is an error to call [setState] unless [mounted] is true. if (!mounted) { return; } // Store the [devices] list in the [_devicesList] for accessing // the list outside this class setState(() { _devicesList = devices; }); } @override Widget build(BuildContext context) { return Container( // We have to work on the UI in this part ); } }

ਇਹ ਹੀ ਗੱਲ ਹੈ! ਇਸ ਕੰਮ ਨੂੰ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਡਾਰਟ ਕੋਡ ਹੁਣ ਪੂਰਾ ਹੋ ਗਿਆ ਹੈ. ਉਸ ਨੇ ਕਿਹਾ, ਜੇ ਅਸੀਂ ਆਪਣੇ ਐਪ ਨੂੰ ਚਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ ਤਾਂ ਇਹ ਕ੍ਰੈਸ਼ ਹੋ ਜਾਵੇਗਾ:

ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਸਾਨੂੰ | _+_ | ਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਹੈ ਨੂੰ | _+_ |. ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੇ ਜਾਓ ਅਤੇ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ: ਐਂਡਰਾਇਡ -> ਐਪ -> ਐਸਆਰਸੀ -> ਮੁੱਖ -> ਐਂਡਰਾਇਡਮੈਨੀਫੈਸਟ.ਐਕਸਐਮਐਲ

ਨਕਦ ਐਪ ਬੈਂਕ ਦਾ ਨਾਮ

ਆਪਣੀ AndroidManifest.xml ਫਾਈਲ ਵਿੱਚ ਕੋਡ ਦੀਆਂ ਇਹ ਦੋ ਲਾਈਨਾਂ ਸ਼ਾਮਲ ਕਰੋ:

... @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( key: _scaffoldKey, appBar: AppBar( title: Text('Flutter Bluetooth'), backgroundColor: Colors.deepPurple, ), body: Container( // Defining a Column containing FOUR main Widgets wrapped with some padding: // 1. Text // 2. Row // 3. Card // 4. Text (wrapped with 'Expanded' and 'Padding') child: Column( mainAxisSize: MainAxisSize.max, children: [ Padding( padding: const EdgeInsets.only(top: 8.0), child: Text( 'PAIRED DEVICES', style: TextStyle(fontSize: 24, color: Colors.blue), textAlign: TextAlign.center, ), ), Padding( padding: const EdgeInsets.all(8.0), // Defining a Row containing THREE main Widgets: // 1. Text // 2. DropdownButton // 3. RaisedButton child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Device:', style: TextStyle( fontWeight: FontWeight.bold, ), ), DropdownButton( // To be implemented : _getDeviceItems() items: _getDeviceItems(), onChanged: (value) => setState(() => _device = value), value: _device, ), RaisedButton( onPressed: // To be implemented : _disconnect and _connect _pressed ? null : _connected ? _disconnect : _connect, child: Text(_connected ? 'Disconnect' : 'Connect'), ), ], ), ), Padding( padding: const EdgeInsets.all(16.0), child: Card( elevation: 4, child: Padding( padding: const EdgeInsets.all(8.0), // Defining a Row containing THREE main Widgets: // 1. Text (wrapped with 'Expanded') // 2. FlatButton // 3. FlatButton child: Row( children: [ Expanded( child: Text( 'DEVICE 1', style: TextStyle( fontSize: 20, color: Colors.green, ), ), ), FlatButton( onPressed: // To be implemented : _sendOnMessageToBluetooth() _connected ? _sendOnMessageToBluetooth : null, child: Text('ON'), ), FlatButton( onPressed: // To be implemented : _sendOffMessageToBluetooth() _connected ? _sendOffMessageToBluetooth : null, child: Text('OFF'), ), ], ), ), ), ), Expanded( child: Padding( padding: const EdgeInsets.all(20), child: Center( child: Text( 'NOTE: If you cannot find the device in the list, ' 'please turn on bluetooth and pair the device by ' 'going to the bluetooth settings', style: TextStyle( fontSize: 15, fontWeight: FontWeight.bold, color: Colors.red), ), ), ), ) ], ), ), ), ); }

ਸਿੱਟਾ:

ਜਿਵੇਂ ਕਿ ਮੈਂ ਇਸ ਲੇਖ ਦੇ ਅਰੰਭ ਵਿੱਚ ਕਿਹਾ ਸੀ, ਇਸ ਪਲੱਗਇਨ ਵਿੱਚ ਕੁਝ ਬੱਗ ਹਨ ਅਤੇ ਅਜੇ ਵੀ ਵਿਕਾਸ ਅਧੀਨ ਹੈ.

ਹੇਠਾਂ ਕੁਝ ਸਕ੍ਰੀਨਸ਼ਾਟ ਹਨ ਜੋ ਵੱਖ ਵੱਖ ਪੜਾਵਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ. ਜੇ ਉਪਭੋਗਤਾ ਕੋਲ ਇਜਾਜ਼ਤ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਉਪਭੋਗਤਾ ਜੋ ਵੇਖਣਗੇ ਉਹ ਐਪ ਸਥਾਨ ਦੀ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਪ੍ਰੋਂਪਟ ਹੈ. ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਧਾਰਨ ਹੈ, ਸਿਰਫ ਆਗਿਆ ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਸਭ ਕੁਝ ਠੀਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ.

ਜਦੋਂ ਕੀ-ਬੋਰਡ ios ਸਵਿਫਟ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਤਾਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਉੱਪਰ ਲੈ ਜਾਓ

ਸਕ੍ਰੀਨਸ਼ਾਟ:

ਐਪ ਵਿੱਚ ਵਧੇਰੇ ਕਾਰਜਸ਼ੀਲਤਾ ਜੋੜਨ ਲਈ ਤੁਸੀਂ ਕੋਡ ਨੂੰ ਸੋਧਣ ਲਈ ਸੁਤੰਤਰ ਹੋ.

ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ ਗੀਟਹਬ ਰੈਪੋ ਲਿੰਕ ਹੈ ਇਥੇ

ਜੇ ਤੁਹਾਨੂੰ ਇਹ ਪ੍ਰੋਜੈਕਟ ਪਸੰਦ ਹੈ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਮੇਰੇ ਗੀਟਹਬ ਰੈਪੋ ਵਿੱਚ ਸਿਤਾਰੇ ਦਿਓ. ਪੜ੍ਹਨ ਲਈ ਤੁਹਾਡਾ ਧੰਨਵਾਦ, ਜੇ ਤੁਸੀਂ ਲੇਖ ਦਾ ਅਨੰਦ ਲਿਆ ਹੈ ਤਾਂ ਉਸ ਕਲੈਪ ਬਟਨ ਨੂੰ ਦਬਾ ਕੇ ਮੈਨੂੰ ਕੁਝ ਪਿਆਰ ਦਿਖਾਉਣਾ ਨਿਸ਼ਚਤ ਕਰੋ!

ਹੈਪੀ ਕੋਡਿੰਗ…