Hello friends, In today’s tutorial we would learn about Vibration Alert in flutter. Vibration alert is used in communication devices like mobile phones and pagers to notify the user when a incoming message or call came. In flutter we can use the Vibration PUB package to implement various type of vibration. I have tested this application in real android device and its working fine in real device. But I don’t have real iOS mobile phone so I was unable to check this project in real iOS device. But It works fine in iOS device. So in this tutorial we would learn about Example of Implement Vibration Alert in Flutter Android iOS App.
Contents in this project Example of Implement Vibration Alert in Flutter Android iOS App :-
1. First of all we have to install the Vibration Pub package in our flutter project. To do that open your flutter project’s pubspec.yaml file and add vibration: ^1.7.3 under dependencies block. For better understanding I’m putting my project’s pubspec.yaml file .
Source Code of my pubspec.yaml file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
name: app description: A new Flutter project. publish_to: 'none' version: 1.0.0+1 environment: sdk: ">=2.12.0 <3.0.0" dependencies: vibration: ^1.7.3 flutter: sdk: flutter cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
2. Now we have to download and install above added package. So open your project location in Command Prompt or Terminal and execute flutter pub get command.
|
1 |
<uses-permission android:name="android.permission.VIBRATE" /> |
Source code of my AndroidManifest.xml file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app"> <uses-permission android:name="android.permission.VIBRATE" /> <application android:label="app" android:icon="@mipmap/ic_launcher"> <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> <!-- Specifies an Android theme to apply to this Activity as soon as the Android process has started. This theme is visible to the user while the Flutter UI initializes. After that, this theme continues to determine the Window background behind the Flutter UI. --> <meta-data android:name="io.flutter.embedding.android.NormalTheme" android:resource="@style/NormalTheme" /> <!-- Displays an Android View that continues showing the launch screen Drawable until Flutter paints its first frame, then this splash screen fades out. A splash screen is useful to avoid any visual gap between the end of Android's launch screen and the painting of Flutter's first frame. --> <meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background" /> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <!-- Don't delete the meta-data below. This is used by the Flutter tool to generate GeneratedPluginRegistrant.java --> <meta-data android:name="flutterEmbedding" android:value="2" /> </application> </manifest> |
4. Now all the installation process has been done. Next step is to start the coding for application. Open your project’s main.dart file and import material.dart and vibration.dart package.
|
1 2 3 4 |
// @dart=2.9 import 'package:flutter/material.dart'; import 'package:vibration/vibration.dart'; |
5. Create our void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
6. Creating our main class MyApp extends StatelessWidget .
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
7. Creating Widget Build area -> MaterialApp -> Scaffold widget -> Body area -> Column widget .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Vibration Example in Flutter'), ), body: Builder( builder: (BuildContext context) { return Center( child: Column( children: <Widget>[ ], ), ); }, ), ), ); } |
8. Creating 3 Container widget, Each widget has ElevatedButton.icon() widget. Now on the onPressed event we would call Vibration.vibrate(), Vibration.vibrate(duration: 1000) and Vibration.vibrate( pattern: [ 500, 1000, 500, 2000, 500, 3000, 500, 500 ], ) method. Here 1000 is equal to 1 Second.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { Vibration.vibrate(); }, label: Text('Vibrate for default 500ms'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { Vibration.vibrate(duration: 1000); }, label: Text('Vibrate for 1000ms'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { final snackBar = SnackBar( content: Text( 'Pattern: wait 0.5s, vibrate 1s, wait 0.5s, vibrate 2s, wait 0.5s, vibrate 3s, wait 0.5s, vibrate 0.5s', ), ); Scaffold.of(context).showSnackBar(snackBar); Vibration.vibrate( pattern: [ 500, 1000, 500, 2000, 500, 3000, 500, 500 ], ); }, label: Text('Vibrate with pattern'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), |
9. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
// @dart=2.9 import 'package:flutter/material.dart'; import 'package:vibration/vibration.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Vibration Example in Flutter'), ), body: Builder( builder: (BuildContext context) { return Center( child: Column( children: <Widget>[ Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { Vibration.vibrate(); }, label: Text('Vibrate for default 500ms'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { Vibration.vibrate(duration: 1000); }, label: Text('Vibrate for 1000ms'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), Container( margin: const EdgeInsets.all(5), child: ElevatedButton.icon( onPressed: () { final snackBar = SnackBar( content: Text( 'Pattern: wait 0.5s, vibrate 1s, wait 0.5s, vibrate 2s, wait 0.5s, vibrate 3s, wait 0.5s, vibrate 0.5s', ), ); Scaffold.of(context).showSnackBar(snackBar); Vibration.vibrate( pattern: [ 500, 1000, 500, 2000, 500, 3000, 500, 500 ], ); }, label: Text('Vibrate with pattern'), icon: Icon(Icons.vibration), style: ElevatedButton.styleFrom( primary: Colors.green, textStyle: TextStyle( color: Colors.black, fontSize: 24, ), ), )), ], ), ); }, ), ), ); } } |
Screenshot :-
