Adding Local Notifications in Flutter Using flutter_local_notifications

<h1 id="adding-local-notifications-in-flutter-using-flutter_local_notifications">Adding Local Notifications in Flutter Using flutter_local_notifications</h1> <p>Local notifications are a powerful way to engage users and provide timely information even when they aren't actively using your app. In this guide, we'll walk through implementing local notifications in your Flutter application using the popular <code>flutter_local_notifications</code> plugin.</p> <h2 id="introduction-to-local-notifications">Introduction to Local Notifications</h2> <p>Local notifications are notifications that originate from the app itself rather than from a remote server. They can be scheduled, triggered by events within the app, or activated at specific times.</p> <p><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIEJhY2tncm91bmQgLS0+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNmYWZhZmEiLz4KICAKICA8IS0tIFBob25lIE91dGxpbmUgLS0+CiAgPHJlY3QgeD0iMTAwIiB5PSIzMCIgd2lkdGg9IjE1MCIgaGVpZ2h0PSIyNDAiIHJ4PSIxMCIgcnk9IjEwIiBmaWxsPSIjMzMzIiBzdHJva2U9IiMxMTEiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxyZWN0IHg9IjEwNSIgeT0iMzUiIHdpZHRoPSIxNDAiIGhlaWdodD0iMjMwIiByeD0iNSIgcnk9IjUiIGZpbGw9IiNmZmYiLz4KICAKICA8IS0tIEFwcCBTdGF0dXMgQmFyIC0tPgogIDxyZWN0IHg9IjEwNSIgeT0iMzUiIHdpZHRoPSIxNDAiIGhlaWdodD0iMjAiIGZpbGw9IiMzMzMiLz4KICA8Y2lyY2xlIGN4PSIxMTUiIGN5PSI0NSIgcj0iMiIgZmlsbD0iI2ZmZiIvPgogIDx0ZXh0IHg9IjE2MCIgeT0iNDgiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjZmZmIj45OjQxIEFNPC90ZXh0PgogIDxjaXJjbGUgY3g9IjIzNSIgY3k9IjQ1IiByPSIyIiBmaWxsPSIjZmZmIi8+CiAgPGNpcmNsZSBjeD0iMjI1IiBjeT0iNDUiIHI9IjIiIGZpbGw9IiNmZmYiLz4KCiAgPCEtLSBBcHAgQ29udGVudCAtLT4KICA8cmVjdCB4PSIxMDUiIHk9IjU1IiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjIxMCIgZmlsbD0iI2YwZjBmMCIvPgogIDxyZWN0IHg9IjExMCIgeT0iNjAiIHdpZHRoPSIxMzAiIGhlaWdodD0iNDAiIHJ4PSI1IiByeT0iNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cmVjdCB4PSIxMTUiIHk9IjY1IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHJ4PSI1IiByeT0iNSIgZmlsbD0iIzIxOTZGMyIvPgogIDx0ZXh0IHg9IjE3NSIgeT0iODAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMCIgZmlsbD0iIzQ0NCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+TXkgRmx1dHRlciBBcHA8L3RleHQ+CiAgPHRleHQgeD0iMTc1IiB5PSI5MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjgiIGZpbGw9IiM3NzciIHRleHQtYW5jaG9yPSJtaWRkbGUiPlRhcCB0byBzY2hlZHVsZSBhIG5vdGlmaWNhdGlvbjwvdGV4dD4KCiAgPCEtLSBOb3RpZmljYXRpb24gU2hvd2luZyBvbiBUb3AgLS0+CiAgPHJlY3QgeD0iMTA1IiB5PSI1NSIgd2lkdGg9IjE0MCIgaGVpZ2h0PSI3MCIgcng9IjAiIHJ5PSIwIiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuOCkiLz4KICA8cmVjdCB4PSIxMTAiIHk9IjYwIiB3aWR0aD0iMTMwIiBoZWlnaHQ9IjYwIiByeD0iNSIgcnk9IjUiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2RkZCIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPGNpcmNsZSBjeD0iMTI1IiBjeT0iODAiIHI9IjEwIiBmaWxsPSIjMjE5NkYzIi8+CiAgPHRleHQgeD0iMTI1IiBjeT0iODMiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iI2ZmZiI+QTwvdGV4dD4KICA8dGV4dCB4PSIxODYiIHk9IjczIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iOSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiPlJlbWluZGVyPC90ZXh0PgogIDx0ZXh0IHg9IjE0MCIgeT0iOTIiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI4IiBmaWxsPSIjNjY2Ij5XYWtlIHVwISBJdCdzIHRpbWUgdG8gY29kZSBpbiBGbHV0dGVyITwvdGV4dD4KICA8dGV4dCB4PSIxODUiIHk9IjExMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjciIGZpbGw9IiM5OTkiIHRleHQtYW5jaG9yPSJyaWdodCI+SnVzdCBub3c8L3RleHQ+CiAgCiAgPCEtLSBOb3RpZmljYXRpb24gQ29kZSBQYW5lbCAtLT4KICA8cmVjdCB4PSIyOTAiIHk9IjMwIiB3aWR0aD0iMTcwIiBoZWlnaHQ9IjI0MCIgcng9IjUiIHJ5PSI1IiBmaWxsPSIjMjgyODI4IiBzdHJva2U9IiMxMTEiIHN0cm9rZS13aWR0aD0iMiIvPgogIDx0ZXh0IHg9IjMwMCIgeT0iNTAiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iOCIgZmlsbD0iIzg4ZjRhYyI+YXdhaXQgZmx1dHRlckxvY2FsTm90aWZpY2F0aW9uc1BsdWdpbjwvdGV4dD4KICA8dGV4dCB4PSIzMDAiIHk9IjY1IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjgiIGZpbGw9IiM4OGY0YWMiPiAgICAuc2hvdyhuMDEsXG48L3RleHQ+CiAgPHRleHQgeD0iMzAwIiB5PSI4MCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSI4IiBmaWxsPSIjODhmNGFjIj4gICAgICBub3RpZmljYXRpb25EZXRhaWxzKTsiPC90ZXh0PgogIAogIDx0ZXh0IHg9IjMwMCIgeT0iMTEwIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjgiIGZpbGw9IiM4NGNlZmYiPnZhciBhbmRyb2lkUGxhdGZvcm1DaGFubmVsU3BlY2lmaWNzID08L3RleHQ+CiAgPHRleHQgeD0iMzAwIiB5PSIxMjUiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iOCIgZmlsbD0iIzg0Y2VmZiI+ICBBbmRyb2lkTm90aWZpY2F0aW9uRGV0YWlscyhcbiAgPC90ZXh0PgogIDx0ZXh0IHg9IjMwMCIgeT0iMTQwIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjgiIGZpbGw9IiM4NGNlZmYiPiAgICBjaGFubmVsSWQ6IGNoYW5uZWxJZCxcbiAgPC90ZXh0PgogIDx0ZXh0IHg9IjMwMCIgeT0iMTU1IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjgiIGZpbGw9IiM4NGNlZmYiPiAgICBjaGFubmVsTmFtZTogY2hhbm5lbE5hbWUpO1xuICA8L3RleHQ+CiAgCiAgPHRleHQgeD0iMzAwIiB5PSIxODUiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iOCIgZmlsbD0iI2ZkOWQ5ZCI+Ly8gU2NoZWR1bGUgbm90aWZpY2F0aW9uIGZvciA1IHNlY29uZHMgbGF0ZXI8L3RleHQ+CiAgPHRleHQgeD0iMzAwIiB5PSIyMDAiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iOCIgZmlsbD0iI2ZkOWQ5ZCI+VGltZVplb25lRGF0ZVRpbWUgc2NoZWR1bGVkRGF0ZSA9IFRpbWVaZW9uZSg8L3RleHQ+CiAgPHRleHQgeD0iMzAwIiB5PSIyMTUiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iOCIgZmlsbD0iI2ZkOWQ5ZCI+ICBsb2NhbCkubm93KCkuYWRkKER1cmF0aW9uKHNlY29uZHM6IDUpKTs8L3RleHQ+CiAgCiAgPCEtLSBBcnJvdyBmcm9tIENvZGUgdG8gTm90aWZpY2F0aW9uIC0tPgogIDxsaW5lIHgxPSIyOTAiIHkxPSI4MCIgeDI9IjI0MCIgeTI9IjgwIiBzdHJva2U9IiNmZmE1MDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iNSwyIi8+CiAgPHBvbHlnb24gcG9pbnRzPSIyNDUsMzAgMjQwLDgwIDI0NSw4MCIgZmlsbD0iI2ZmYTUwMCIvPgogIAogIDwhLS0gQXJyb3cgZm9yIFNjaGVkdWxlZCBOb3RpZmljYXRpb24gLS0+CiAgPGxpbmUgeDE9IjI5MCIgeTE9IjIwMCIgeDI9IjI0MCIgeTI9IjE1MCIgc3Ryb2tlPSIjZmY2NmNjIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1kYXNoYXJyYXk9IjUsMiIvPgogIDxwb2x5Z29uIHBvaW50cz0iMjQ1LDE1NSAyNDAsMTUwIDI0NSwxNDUiIGZpbGw9IiNmZjY2Y2MiLz4KICA8dGV4dCB4PSIyNjUiIHk9IjE3MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjgiIGZpbGw9IiNmZjY2Y2MiPlNjaGVkdWxlZDwvdGV4dD4KICAKICA8IS0tIFRleHQgTGFiZWxzIC0tPgogIDx0ZXh0IHg9IjE3NSIgeT0iMjcwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTEiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjMzMzIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Ob3RpZmljYXRpb24gb24gRGV2aWNlPC90ZXh0PgogIDx0ZXh0IHg9IjM3NSIgeT0iMjcwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTEiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjMzMzIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5GbHV0dGVyIENvZGUgSW1wbGVtZW50YXRpb248L3RleHQ+Cjwvc3ZnPg==" alt="Flutter Local Notifications" /></p> <h2 id="setting-up-the-project">Setting Up the Project</h2> <p>First, add the <code>flutter_local_notifications</code> package to your <code>pubspec.yaml</code> file:</p> <pre>dependencies: flutter: sdk: flutter flutter_local_notifications: ^9.1.4 timezone: ^0.8.0 flutter_native_timezone: ^2.0.0 </pre> <p>Run <code>flutter pub get</code> to install the dependencies.</p> <h2 id="initialize-the-plugin">Initialize the Plugin</h2> <p>Initialize the plugin in your main.dart file:</p> <pre>import &#39;package:flutter/material.dart&#39;; import &#39;package:flutter_local_notifications/flutter_local_notifications.dart&#39;; import &#39;package:timezone/data/latest.dart&#39; as tz; import &#39;package:timezone/timezone.dart&#39; as tz; import &#39;package:flutter_native_timezone/flutter_native_timezone.dart&#39;;

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

Future&lt;void&gt; main() async { WidgetsFlutterBinding.ensureInitialized();

// Initialize timezone tz.initializeTimeZones(); final String currentTimeZone = await FlutterNativeTimezone.getLocalTimezone(); tz.setLocalLocation(tz.getLocation(currentTimeZone));

// Initialize notification settings const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings(&#39;@mipmap/ic_launcher&#39;);

final IOSInitializationSettings initializationSettingsIOS = IOSInitializationSettings( onDidReceiveLocalNotification: onDidReceiveLocalNotification, );

final InitializationSettings initializationSettings = InitializationSettings( android: initializationSettingsAndroid, iOS: initializationSettingsIOS, );

await flutterLocalNotificationsPlugin.initialize( initializationSettings, onSelectNotification: selectNotification, );

runApp(MyApp()); }

Future selectNotification(String? payload) async { // Handle notification tap if (payload != null) { print(&#39;Notification payload: $payload&#39;); // Navigate to specific screen based on payload } }

Future onDidReceiveLocalNotification( int id, String? title, String? body, String? payload) async { // For iOS when the app is in the foreground // You might want to show an alert dialog here }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: &#39;Local Notifications Demo&#39;, theme: ThemeData( primarySwatch: Colors.blue, ), home: NotificationScreen(), ); } } </pre> <h2 id="creating-notification-channels-android">Creating Notification Channels (Android)</h2> <p>For Android 8.0 (API level 26) and higher, you need to create notification channels:</p> <pre>Future&lt;void&gt; createNotificationChannel() async { const AndroidNotificationChannel channel = AndroidNotificationChannel( &#39;high_importance_channel&#39;, // id &#39;High Importance Notifications&#39;, // name description: &#39;This channel is used for important notifications.&#39;, // description importance: Importance.high, );

await flutterLocalNotificationsPlugin .resolvePlatformSpecificImplementation&lt;AndroidFlutterLocalNotificationsPlugin&gt;() ?.createNotificationChannel(channel); } </pre> <h2 id="showing-an-immediate-notification">Showing an Immediate Notification</h2> <p>To show a notification immediately:</p> <pre>Future&lt;void&gt; showNotification() async { const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails( &#39;your_channel_id&#39;, &#39;your_channel_name&#39;, channelDescription: &#39;your_channel_description&#39;, importance: Importance.max, priority: Priority.high, showWhen: false, );

const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

await flutterLocalNotificationsPlugin.show( 0, // notification id &#39;Plain Notification&#39;, // notification title &#39;This is a plain notification&#39;, // notification body platformChannelSpecifics, payload: &#39;item x&#39;, // optional payload that will be passed to the app when the notification is tapped ); } </pre> <h2 id="scheduling-a-notification">Scheduling a Notification</h2> <p>To schedule a notification for a future time:</p> <pre>Future&lt;void&gt; scheduleNotification() async { await flutterLocalNotificationsPlugin.zonedSchedule( 1, // notification id &#39;Scheduled Notification&#39;, // notification title &#39;This notification is scheduled to show in 5 seconds&#39;, // notification body tz.TZDateTime.now(tz.local).add(const Duration(seconds: 5)), // scheduled date const NotificationDetails( android: AndroidNotificationDetails( &#39;your_channel_id&#39;, &#39;your_channel_name&#39;, channelDescription: &#39;your_channel_description&#39;, ), ), androidAllowWhileIdle: true, uiLocalNotificationDateInterpretation: UILocalNotificationDateInterpretation.absoluteTime, payload: &#39;scheduled notification&#39;, ); } </pre> <h2 id="periodic-notifications">Periodic Notifications</h2> <p>For repeating notifications at a specified interval:</p> <pre>Future&lt;void&gt; schedulePeriodicNotification() async { await flutterLocalNotificationsPlugin.periodicallyShow( 2, // notification id &#39;Periodic Notification&#39;, // notification title &#39;This notification repeats every minute&#39;, // notification body RepeatInterval.everyMinute, // notification interval const NotificationDetails( android: AndroidNotificationDetails( &#39;repeating_channel_id&#39;, &#39;Repeating Notifications&#39;, channelDescription: &#39;Channel for repeating notifications&#39;, ), ), androidAllowWhileIdle: true, payload: &#39;periodic notification&#39;, ); } </pre> <h2 id="adding-notification-actions-android">Adding Notification Actions (Android)</h2> <p>You can add buttons to notifications on Android:</p> <pre>Future&lt;void&gt; showNotificationWithActions() async { // Define actions AndroidNotificationAction action1 = AndroidNotificationAction( &#39;action_1&#39;, &#39;Action 1&#39;, showsUserInterface: true, );

AndroidNotificationAction action2 = AndroidNotificationAction( &#39;action_2&#39;, &#39;Action 2&#39;, showsUserInterface: true, );

AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails( &#39;action_channel_id&#39;, &#39;Action Notifications&#39;, channelDescription: &#39;Channel for notifications with actions&#39;, importance: Importance.max, priority: Priority.high, actions: [action1, action2], );

NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

await flutterLocalNotificationsPlugin.show( 3, // notification id &#39;Notification with Actions&#39;, // notification title &#39;This notification has action buttons&#39;, // notification body platformChannelSpecifics, ); } </pre> <h2 id="canceling-notifications">Canceling Notifications</h2> <p>To cancel a specific notification:</p> <pre>Future&lt;void&gt; cancelNotification(int id) async { await flutterLocalNotificationsPlugin.cancel(id); } </pre> <p>To cancel all notifications:</p> <pre>Future&lt;void&gt; cancelAllNotifications() async { await flutterLocalNotificationsPlugin.cancelAll(); } </pre> <h2 id="full-example-notification-screen">Full Example: Notification Screen</h2> <p>Here's a complete example of a screen that demonstrates these notification capabilities:</p> <pre>class NotificationScreen extends StatefulWidget { @override _NotificationScreenState createState() =&gt; _NotificationScreenState(); }

class _NotificationScreenState extends State&lt;NotificationScreen&gt; { @override void initState() { super.initState(); createNotificationChannel(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(&#39;Local Notifications Demo&#39;), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: &lt;Widget&gt;[ ElevatedButton( onPressed: showNotification, child: Text(&#39;Show Immediate Notification&#39;), ), SizedBox(height: 20), ElevatedButton( onPressed: scheduleNotification, child: Text(&#39;Schedule Notification (5 seconds)&#39;), ), SizedBox(height: 20), ElevatedButton( onPressed: schedulePeriodicNotification, child: Text(&#39;Show Periodic Notification&#39;), ), SizedBox(height: 20), ElevatedButton( onPressed: showNotificationWithActions, child: Text(&#39;Show Notification with Actions&#39;), ), SizedBox(height: 20), ElevatedButton( onPressed: () =&gt; cancelNotification(0), child: Text(&#39;Cancel First Notification&#39;), ), SizedBox(height: 20), ElevatedButton( onPressed: cancelAllNotifications, child: Text(&#39;Cancel All Notifications&#39;), ), ], ), ), ); } } </pre> <h2 id="platform-specific-considerations">Platform-Specific Considerations</h2> <h3 id="ios">iOS</h3> <p>For iOS, notifications require additional setup:</p> <ol> <li>Add the following to your <code>ios/Runner/AppDelegate.swift</code>:</li> </ol> <pre>if #available(iOS 10.0, *) { UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate } </pre> <ol start="2"> <li>Add the necessary permissions to your <code>ios/Runner/Info.plist</code>:</li> </ol> <pre>&lt;key&gt;UIBackgroundModes&lt;/key&gt; &lt;array&gt; &lt;string&gt;fetch&lt;/string&gt; &lt;string&gt;remote-notification&lt;/string&gt; &lt;/array&gt; </pre> <h3 id="android">Android</h3> <p>For Android, ensure you have:</p> <ol> <li>Set the proper minimum SDK version in your <code>android/app/build.gradle</code>:</li> </ol> <pre>minSdkVersion 16 </pre> <ol start="2"> <li>Added the required permissions to your <code>android/app/src/main/AndroidManifest.xml</code>:</li> </ol> <pre>&lt;uses-permission android:name=&quot;android.permission.RECEIVE_BOOT_COMPLETED&quot;/&gt; &lt;uses-permission android:name=&quot;android.permission.VIBRATE&quot; /&gt; &lt;uses-permission android:name=&quot;android.permission.WAKE_LOCK&quot; /&gt; </pre> <h2 id="best-practices">Best Practices</h2> <ol> <li><p><strong>Use Channels Appropriately</strong>: Create different channels for different types of notifications.</p> </li> <li><p><strong>Don't Overuse Notifications</strong>: Excessive notifications can annoy users.</p> </li> <li><p><strong>Provide Clear Actions</strong>: Make it obvious what tapping the notification will do.</p> </li> <li><p><strong>Respect User Settings</strong>: Always check if notifications are enabled.</p> </li> <li><p><strong>Handle Foreground Notifications</strong>: Consider showing in-app messages for notifications received while the app is in the foreground.</p> </li> <li><p><strong>Test on Real Devices</strong>: Notification behavior can vary between emulators and real devices.</p> </li> </ol> <h2 id="conclusion">Conclusion</h2> <p>Local notifications are a powerful way to keep users engaged with your Flutter application. The <code>flutter_local_notifications</code> package makes it relatively straightforward to implement notifications across both iOS and Android platforms.</p> <p>By following this guide, you've learned how to initialize the plugin, create notification channels, show immediate notifications, schedule future notifications, add actions to notifications, and handle user interactions with notifications.</p> <p>Remember to adapt these examples to fit your specific app's needs and to always test on real devices to ensure the best user experience.</p> <p>Happy coding!</p>