Creating User Interface and Notification System in Flutter .pptx
- 1. Creating User Interface and Notification System in Flutter BY: Sabeela Fiaz
- 2. What is UI User Interface (UI) is the point of interaction between the user and a digital device or application. It includes buttons, menus, screens, icons, notifications, and everything the user sees and interacts with. A well-designed UI makes the app easy to use, efficient, and visually appealing.
- 3. UI of an App:
- 4. Importance of UI UI (User Interface) is how the user interacts with the app. A good UI: 1. Makes the app easy to use 2. Increases user satisfaction 3. Builds trust and keeps users coming back 4. Helps visually represent the brand identity Example: Instagram's simple and visual UI makes it easy to scroll, like, and post.
- 5. Role of Notifications in UI Notifications are part of the UI that keep users informed and engaged. This Help deliver: Reminders Updates Messages Alerts Example: A social media app shows a notification: “Someone Liked your Post” etc.
- 6. Types of User Interface Different types of user interfaces exist, but Flutter mainly uses 1. Graphical User Interface (GUI) 2. Web-based Interface 3. Mobile-based Interface
- 7. Graphical User Interface (GUI) A Graphical User Interface allows users to interact with applications using visual elements like icons, buttons, windows, and menus. Requires more memory and processing power than CLI. Flutter is mainly GUI based Framework. Examples: Microsoft Windows Android or iOS apps
- 9. Enhancing UI with Notifications To improve UI experience and user engagement by using local notifications in a Flutter app. We’ll use the plugin: Flutter_local_notifications What are Local Notifications? Local notifications are messages that your app shows on the user’s device without using the internet. They are triggered by your app code, like when a user taps a button or at a scheduled time.
- 10. Enhancing UI with Notifications What It Does: Shows instant notifications. Schedules future notifications. Handles notification taps (open specific screen).
- 11. Flutter Local Notifications Plugin Step 1: Add Dependency pubspec.yaml To start using local notifications in Flutter, you first need to add the necessary package to your pubspec.yaml file:
- 12. Step 2: Import the Package Initialize the Plugin You typically do this in your main() function or in your app’s startup logic.
- 14. Showing a Simple Local Notification Add this function where you need to trigger the notification (e.g., on a button press):
- 15. You can trigger this using a button:
- 16. Push notifications using Firebase Cloud Messaging (FCM) Introduction to Push Notifications : What Are Push Notifications? Push notifications are short messages sent by apps to users’ devices. They appear even if the app is not open. Used to give reminders, alerts, or updates. Improve user engagement and keep users informed. Example: If you have a weather app, you can send daily weather updates to the user through a push notification.
- 17. What is Firebase Cloud Messaging (FCM)? Introduction to FCM FCM is a service by Google to send push notifications. It supports Android, iOS, and web. It's free and easy to integrate. Helps apps communicate with users in real-time. In simple words: FCM works like a postman – the app sends a message, and FCM delivers it to the user's device.
- 18. Setting Up Firebase How to Set Up Firebase for Notifications 1. Go to Firebase Console. https://console.firebase.google.com 2. Create a new project. 3. Add your app (Android/iOS). 4. Download google-services.json (for Android) or GoogleService-Info.plist (for iOS). 5. Add Firebase SDK to your app’s code.
- 19. Firebase Integration Code (Example for Android) In the AndroidManifest.xml file, we declare this service: <service android:name=".MyFirebaseMessagingService"> <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service> This is your custom service class that handles incoming messages from Firebase. public class MyFirebaseMessagingService extends FirebaseMessagingService { @Override public void onMessageReceived(RemoteMessage remoteMessage) { // This is where you handle the received message // You can extract the title, body, and data from the message // and use it to display a custom notification } }
- 20. Handling Notifications in App Handling Notifications – Icons, Sounds & Actions Icons: Use small app logo or notification symbol. Sounds: Set custom notification sounds for alerts. Actions: Add buttons like “Reply” or “Open”. Payload: Notification contains data like title, message, URL, etc.
- 21. Real-world Notification Example: Chat App { "notification": { "title": "New Message from Ali", "body": "Hey! How are you?”, "sound": "default" }, "data": { "chat_id": "12345" } }