<![CDATA[ <div data-elementor-type="wp-post" data-elementor-id="540" class="elementor elementor-540">
<section class="elementor-section elementor-top-section elementor-element elementor-element-315841 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="315841" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-background-overlay"></div>
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c01acc6" data-id="6c01acc6" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-49fdf44e elementor-widget elementor-widget-jkit_post_title" data-id="49fdf44e" data-element_type="widget" data-widget_type="jkit_post_title.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-title jeg_module_540__671a1af7c0ca9" ><h2 class="post-title style-color ">Implementing Push Notifications in Flutter with Firebase</h2></div> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-4d37b5bd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4d37b5bd" data-element_type="section">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-e4b2495" data-id="e4b2495" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-2392d9f1 elementor-widget__width-auto elementor-view-default elementor-widget elementor-widget-icon" data-id="2392d9f1" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-far-user-circle" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path d="M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-6dc9e52 elementor-widget__width-auto elementor-widget elementor-widget-jkit_post_author" data-id="6dc9e52" data-element_type="widget" data-widget_type="jkit_post_author.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-author jeg_module_540_1_671a1af7c3f31" ><p class="post-author ">Fasil Getie</p></div> </div>
</div>
<div class="elementor-element elementor-element-2eb3afe9 elementor-widget__width-auto elementor-view-default elementor-widget elementor-widget-icon" data-id="2eb3afe9" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-far-calendar-alt" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-29150483 elementor-widget__width-auto elementor-widget elementor-widget-jkit_post_date" data-id="29150483" data-element_type="widget" data-widget_type="jkit_post_date.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-date jeg_module_540_2_671a1af7c57da" ><p class="post-date ">October 24, 2024</p></div> </div>
</div>
<div class="elementor-element elementor-element-75f3a952 elementor-widget__width-auto elementor-view-default elementor-widget elementor-widget-icon" data-id="75f3a952" data-element_type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-far-folder-open" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-13d25ce7 elementor-widget__width-auto elementor-widget elementor-widget-jkit_post_terms" data-id="13d25ce7" data-element_type="widget" data-widget_type="jkit_post_terms.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-terms jeg_module_540_3_671a1af7c6ad1" ><span class="post-terms"><span class="term-list ">Education</span></span></div> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-c3bc2ce elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c3bc2ce" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5023612d" data-id="5023612d" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-6efa73fe elementor-widget elementor-widget-jkit_post_featured_image" data-id="6efa73fe" data-element_type="widget" data-widget_type="jkit_post_featured_image.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-featured-image jeg_module_540_4_671a1af7ccc0a" ><div class="post-featured-image "><img fetchpriority="high" decoding="async" width="1024" height="1024" src="/wp-content/uploads/2024/10/DALL·E-2024-10-24-12.21.37-A-visual-diagram-illustrating-Firebase-push-notifications-integration-with-a-Flutter-app.-The-diagram-should-show-key-elements-such-as-the-Firebase-Cl.webp" class="attachment-full size-full wp-post-image" alt="" srcset="/wp-content/uploads/2024/10/DALL·E-2024-10-24-12.21.37-A-visual-diagram-illustrating-Firebase-push-notifications-integration-with-a-Flutter-app.-The-diagram-should-show-key-elements-such-as-the-Firebase-Cl.webp 1024w, /wp-content/uploads/2024/10/DALL·E-2024-10-24-12.21.37-A-visual-diagram-illustrating-Firebase-push-notifications-integration-with-a-Flutter-app.-The-diagram-should-show-key-elements-such-as-the-Firebase-Cl-300x300.webp 300w, /wp-content/uploads/2024/10/DALL·E-2024-10-24-12.21.37-A-visual-diagram-illustrating-Firebase-push-notifications-integration-with-a-Flutter-app.-The-diagram-should-show-key-elements-such-as-the-Firebase-Cl-150x150.webp 150w, /wp-content/uploads/2024/10/DALL·E-2024-10-24-12.21.37-A-visual-diagram-illustrating-Firebase-push-notifications-integration-with-a-Flutter-app.-The-diagram-should-show-key-elements-such-as-the-Firebase-Cl-768x768.webp 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></div></div> </div>
</div>
<div class="elementor-element elementor-element-14bd4e2a elementor-widget elementor-widget-text-editor" data-id="14bd4e2a" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"> </div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="0449c086-0550-44c1-a2e5-a00cb93b440f" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert dark">
<p>Push notifications are a crucial aspect of mobile applications, keeping users engaged by delivering timely updates. In this blog post, I’ll walk you through how to implement push notifications in your Flutter app using Firebase Cloud Messaging (FCM).</p>
<h3>Step 1: Setting Up Firebase for Your Flutter App</h3>
<h4>1.1. Create a Firebase Project</h4>
<p>Head over to the <a target="_new" rel="noopener">Firebase Console</a>, create a new project, and follow the steps to set up Firebase for your app.</p>
<h4>1.2. Add Your Flutter App to Firebase</h4>
<ul>
<li>Select your project in Firebase Console.</li>
<li>Add your Android and/or iOS app. For Android, you’ll need the package name. For iOS, you’ll need the <strong>iOS bundle ID</strong>.</li>
<li>Download the <code>google-services.json</code> (for Android) or <code>GoogleService-Info.plist</code> (for iOS) and place them in the appropriate folders in your Flutter project:
<ul>
<li><code>android/app/</code> for <code>google-services.json</code>.</li>
<li><code>ios/Runner/</code> for <code>GoogleService-Info.plist</code>.</li>
</ul>
</li>
</ul>
<h4>1.3. Add Firebase SDK to Your App</h4>
<p>In your Flutter project, add the necessary dependencies for Firebase:<br />d<i>ependencies:<br />firebase_core: latest_version<br />firebase_messaging: latest_version</i></p>
<p><strong>Then, run <code>flutter pub get</code> to install the packages.</strong></p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-7e963e82 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7e963e82" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-6cb43dc8" data-id="6cb43dc8" data-element_type="column" data-settings="{"background_background":"classic"}">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-3f907cfe elementor-widget__width-auto elementor-absolute elementor-hidden-phone elementor-view-default elementor-widget elementor-widget-icon" data-id="3f907cfe" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<i aria-hidden="true" class="jki jki-quote-light"></i> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-6954554d elementor-widget elementor-widget-text-editor" data-id="6954554d" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p><em>Firebase Cloud Messaging takes the complexity out of delivering notifications to users at the right time. It gives developers powerful tools to engage users while ensuring seamless integration with mobile apps.</em></p> </div>
</div>
<div class="elementor-element elementor-element-23f8ed40 elementor-widget elementor-widget-text-editor" data-id="23f8ed40" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>David East, Firebase Developer Advocate</p> </div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-6d968126 elementor-widget elementor-widget-text-editor" data-id="6d968126" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h3>Step 2: Configure Firebase in Your Flutter Project</h3>
<h4>2.1. Android Configuration</h4>
<p>To integrate Firebase into your Android app, update the following files:</p>
<ul>
<li>
<p>Add the classpath to the project-level <code>build.gradle</code>:</p>
</li>
<li>
<p>Apply the plugin in the app level <code>build.gradle</code>:<br /><em>classpath ‘com.google.gms:google-services:latest_version’ apply plugin: ‘com.google.gms.google-services’<br /></em></p>
</li>
</ul> </div>
</div>
<div class="elementor-element elementor-element-54cb2815 elementor-widget elementor-widget-text-editor" data-id="54cb2815" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h4>2.2. iOS Configuration</h4>
<p>For iOS, make sure you have the necessary permissions by modifying the <code>Info.plist</code> file:</p>
<p><i><key>UIBackgroundModes</key><br /><array><br /><string>fetch</string><br /><string>remote-notification</string><br /></array><br /><key>FirebaseAppDelegateProxyEnabled</key><br /><false/></i></p>
<p>Run the following command to ensure the Firebase SDK is set up correctly:</p>
<p>flutter pub run flutterfire configure</p> </div>
</div>
<div class="elementor-element elementor-element-0fc3e6e elementor-widget elementor-widget-text-editor" data-id="0fc3e6e" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h3>Step 3: Implement Push Notifications in Flutter</h3>
<h4>3.1. Initialize Firebase in Your App</h4>
<p>In your <code>main.dart</code>, initialize Firebase before running the app:</p>
<p><em>void main() async {</em><br /><em>WidgetsFlutterBinding.ensureInitialized();</em><br /><em>await Firebase.initializeApp();</em><br /><em>runApp(MyApp());</em><br /><em>}</em></p>
<h4>3.2. Setup Firebase Messaging</h4>
<p>Now, set up Firebase Messaging for handling push notifications:</p>
<p><em>import ‘package:firebase_messaging/firebase_messaging.dart’;</em></p>
<p><em>class PushNotificationService {</em><br /><em>final FirebaseMessaging _fcm = FirebaseMessaging.instance;</em></p>
<p><em>Future<void> init() async {</em><br /><em>// Request permissions for iOS</em><br /><em>NotificationSettings settings = await _fcm.requestPermission();</em><br /><em>if (settings.authorizationStatus == AuthorizationStatus.authorized) {</em><br /><em>print(‘User granted permission’);</em><br /><em>} else {</em><br /><em>print(‘User declined or has not accepted permission’);</em><br /><em>}</em></p>
<p><em>// Handle foreground messages</em><br /><em>FirebaseMessaging.onMessage.listen((RemoteMessage message) {</em><br /><em>print(‘Received a message while in the foreground!’);</em><br /><em>print(‘Message data: ${message.data}’);</em></p>
<p><em>if (message.notification != null) {</em><br /><em>print(‘Message also contained a notification: ${message.notification}’);</em><br /><em>}</em><br /><em>});</em><br /><em>}</em><br /><em>}</em></p>
<h4>3.3. Receive Notifications</h4>
<p>Use Firebase Cloud Messaging to send push notifications. You can test it by going to the Firebase Console -> Cloud Messaging -> New Notification and sending a test notification.</p> </div>
</div>
<div class="elementor-element elementor-element-757b8e0 elementor-widget elementor-widget-text-editor" data-id="757b8e0" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h3>Step 4: Handling Notification Clicks</h3>
<p>You can also handle notification taps and background messages using these Firebase callbacks:</p>
<ul>
<li><strong>onMessageOpenedApp</strong>: Handle when the user taps the notification and opens the app.</li>
<li><strong>onBackgroundMessage</strong>: Handle background messages. </li>
</ul>
<p><em>FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {</em><br /><em>print(‘Notification clicked! ${message.data}’);</em><br /><em>});</em></p>
<p><em>FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);</em></p>
<p><em>Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {</em><br /><em>print(“Handling a background message: ${message.messageId}”);</em><br /><em>}</em></p> </div>
</div>
<div class="elementor-element elementor-element-420d38e elementor-widget elementor-widget-text-editor" data-id="420d38e" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h3>Step 5: Sending Notifications From the Backend</h3>
<p>To send notifications to specific users or topics, you can use Firebase’s backend service or a custom backend setup with Firebase Admin SDK.</p>
<p>Here’s an example of how you can send a push notification to a specific device:</p>
<p><em>curl -X POST -H “Authorization: Bearer YOUR_SERVER_KEY” -H “Content-Type: application/json” \</em><br /><em>-d ‘{</em><br /><em>“to”: “DEVICE_TOKEN”,</em><br /><em>“notification”: {</em><br /><em>“title”: “Hello!”,</em><br /><em>“body”: “You have a new notification”</em><br /><em>}</em><br /><em>}’ \</em><br /><em>https://fcm.googleapis.com/fcm/send</em></p> </div>
</div>
<div class="elementor-element elementor-element-727ee92 elementor-widget elementor-widget-text-editor" data-id="727ee92" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h3>Conclusion</h3>
<p>Integrating Firebase push notifications into your Flutter app is essential for engaging your users. With Firebase Cloud Messaging, you can ensure that your app users receive timely updates, whether the app is in the foreground or background.</p> </div>
</div>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-1ecd5299 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1ecd5299" data-element_type="section">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3434a274" data-id="3434a274" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-3c3c90ab elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-text-editor" data-id="3c3c90ab" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Tags : </div>
</div>
<div class="elementor-element elementor-element-3cd4dc0e elementor-widget__width-auto elementor-widget elementor-widget-jkit_post_terms" data-id="3cd4dc0e" data-element_type="widget" data-widget_type="jkit_post_terms.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-terms jeg_module_540_5_671a1af7d3880" ><span class="post-terms"><span class="term-list ">Education</span></span></div> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-17ae09bc" data-id="17ae09bc" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-29e9ceaf elementor-widget__width-auto elementor-widget-mobile__width-initial elementor-widget-tablet__width-auto elementor-widget elementor-widget-text-editor" data-id="29e9ceaf" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Share This : </div>
</div>
<div class="elementor-element elementor-element-430b2107 elementor-widget__width-auto jkit-social-shape shape-none elementor-widget elementor-widget-jkit_social_share" data-id="430b2107" data-element_type="widget" data-widget_type="jkit_social_share.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-social-share jeg_module_540_6_671a1af7d73ef" ><ul class="social-share-list"><li class="elementor-repeater-item-e461d32" data-social="facebook">
<a href="#" class="facebook social-icon" aria-label="social-share"><svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></a>
</li><li class="elementor-repeater-item-05e922a" data-social="twitter">
<a href="#" class="twitter social-icon" aria-label="social-share"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a>
</li><li class="elementor-repeater-item-0bf393d" data-social="whatsapp">
<a href="#" class="whatsapp social-icon" aria-label="social-share"><i aria-hidden="true" class="jki jki-whatsapp-1-light"></i></a>
</li></ul></div> </div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-8e775bd elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="8e775bd" data-element_type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator">
</span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-7636f99b elementor-widget elementor-widget-jkit_post_comment" data-id="7636f99b" data-element_type="widget" data-widget_type="jkit_post_comment.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-post-comment jeg_module_540_7_671a1af7dd0c1" ></div> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-21b5ae42" data-id="21b5ae42" data-element_type="column" data-settings="{"background_background":"classic"}">
<div class="elementor-widget-wrap elementor-element-populated">
<section class="elementor-section elementor-inner-section elementor-element elementor-element-21497119 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="21497119" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-530313a7" data-id="530313a7" data-element_type="column" data-settings="{"background_background":"classic"}">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-23da0ee5 elementor-widget elementor-widget-heading" data-id="23da0ee5" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Recent Posts</h3> </div>
</div>
<div class="elementor-element elementor-element-5f16d14 elementor-widget elementor-widget-jkit_post_list" data-id="5f16d14" data-element_type="widget" data-widget_type="jkit_post_list.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-postlist layout-horizontal post-element jkit-pagination-disable jeg_module_540_8_671a1af7e5438" data-id="jeg_module_540_8_671a1af7e5438" data-settings="{"post_type":"post","number_post":{"unit":"px","size":3,"sizes":[]},"post_offset":0,"unique_content":"disable","include_post":"","exclude_post":"","include_category":"","exclude_category":"","include_author":"","include_tag":"","exclude_tag":"","sort_by":"latest","pagination_mode":"disable","pagination_loadmore_text":"Load More","pagination_loading_text":"Loading...","pagination_number_post":{"unit":"px","size":3,"sizes":[]},"pagination_scroll_limit":0,"pagination_icon":{"value":"","library":""},"pagination_icon_position":"before","sg_content_layout":"horizontal","sg_content_image_enable":"","sg_content_background_image_enable":"","sg_content_icon_enable":"","sg_content_icon":{"value":"fas fa-circle","library":"fa-solid"},"sg_content_meta_enable":"yes","sg_content_meta_date_enable":"yes","sg_content_meta_date_type":"published","sg_content_meta_date_format":"default","sg_content_meta_date_format_custom":"F j, Y","sg_content_meta_date_icon":{"value":"fas fa-clock","library":"fa-solid"},"sg_content_meta_category_enable":"","sg_content_meta_category_icon":{"value":"fas fa-tag","library":"fa-solid"},"sg_content_meta_position":"bottom","sg_content_image_size_imagesize_size":"medium","paged":1,"class":"jkit_post_list"}"><div class="jkit-block-container"><div class="jkit-posts jkit-ajax-flag">
<article class="jkit-post post-list-item">
<a href="/implementing-push-notifications-in-flutter-with-firebase/" >
<div class="jkit-postlist-content"><span class="jkit-postlist-title">Implementing Push Notifications in Flutter with Firebase</span><div class="meta-lists"><span class="meta-date"><svg aria-hidden="true" class="e-font-icon-svg e-fas-clock" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg>October 24, 2024</span> </div></div>
</a>
</article><article class="jkit-post post-list-item">
<a href="/understanding-react-hooks/" >
<div class="jkit-postlist-content"><span class="jkit-postlist-title">Understanding React Hooks: A Comprehensive Guide</span><div class="meta-lists"><span class="meta-date"><svg aria-hidden="true" class="e-font-icon-svg e-fas-clock" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg>February 3, 2024</span> </div></div>
</a>
</article><article class="jkit-post post-list-item">
<a href="/10-tips-for-writing-cleaner-code-in-react-js/" >
<div class="jkit-postlist-content"><span class="jkit-postlist-title">10 Tips for Writing Cleaner Code in React</span><div class="meta-lists"><span class="meta-date"><svg aria-hidden="true" class="e-font-icon-svg e-fas-clock" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg>February 3, 2024</span> </div></div>
</a>
</article>
</div></div></div> </div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-15580d43 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="15580d43" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-background-overlay"></div>
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4034204b" data-id="4034204b" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-171cfdab elementor-widget elementor-widget-heading" data-id="171cfdab" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Have Any Question?</h3> </div>
</div>
<div class="elementor-element elementor-element-3345f92f elementor-widget elementor-widget-text-editor" data-id="3345f92f" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p><em>“Implementing push notifications in your Flutter app can significantly improve user engagement by delivering timely updates. With Firebase, you have a reliable and scalable platform to manage these notifications with ease. If you haven’t already, start experimenting with Firebase Cloud Messaging in your Flutter apps and see the difference it can make!”</em></p>
<p>Feel free to leave any questions or feedback in the comments section below. Let’s keep building great apps together!</p> </div>
</div>
<div class="elementor-element elementor-element-24ba3f03 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="24ba3f03" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-phone-alt" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"></path></svg> </span>
<span class="elementor-icon-list-text">(+251) 930 5617 28</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<svg aria-hidden="true" class="e-font-icon-svg e-fas-envelope" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg> </span>
<span class="elementor-icon-list-text">fasilgetie12@gmail.com</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-9af141b elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="9af141b" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7d6c8c14" data-id="7d6c8c14" data-element_type="column" data-settings="{"background_background":"classic"}">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-55ca21c0 elementor-widget elementor-widget-heading" data-id="55ca21c0" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Categories</h3> </div>
</div>
<div class="elementor-element elementor-element-502ca328 elementor-widget elementor-widget-jkit_category_list" data-id="502ca328" data-element_type="widget" data-widget_type="jkit_category_list.default">
<div class="elementor-widget-container">
<div class="jeg-elementor-kit jkit-categorylist layout-vertical jeg_module_540_9_671a1af7ecec2" ><div class="jkit-category category-list-item">
<a href="/category/education/">
<span class="icon-list"><svg aria-hidden="true" class="e-font-icon-svg e-fas-chevron-right" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></span>
<div class="jkit-categorylist-content">Education</div>
</a>
</div></div> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
</div>
]]>