Obumuneme Nwabude
GDE Dart & Flutter
Abakaliki, Nigeria
Actions
Obum is a Google Developer Expert (GDE) in the Dart & Flutter category. He is also a Full-Stack Blockchain and Web developer with professional frontend, backend, and web3 experiences. He has written several articles on Flutter in various publications and volunteers in tech communities.
Badges
Area of Expertise
Topics
Understanding Platform Channels: How Flutter is platform-agnostic
Flutter as a mobile framework achieves cross-platform ability through 2 ways: UI Rendering and Platform Channels.
In this session on Platform Channels, the audience will understand how Flutter is capable of executing platform-native features irrespective of the platform.
We will look at how Flutter apps are built on or running on a host/native app on the user's Operating System.
That through Platform Channels, the flutter side can call methods and listen to events whose declarations are found in the native side and vice versa.
We will look at an example code snippet from the docs on Battery Level from the device.
We will also comment on how Flutter achieves these channels on the web with plugins since browsers are not devices.
How to Implement Adaptive or Pixel-Perfect UIs in Flutter
Flutter can build for multiple devices. Your UI code will render on various screen sizes.
Different Devices have separate pixel densities. These differences affect spacing and sizing of your app's UI across devices. They compress or squash the UI on the device.
You want pixel-perfect apps. You want apps that are the same on every device and adapt the way you want.
In this session, the audience will better understand the above problem and why it exists. They'll also figure out why it is not a Flutter-specific issue. And that as we build cross-platform with Flutter, it is easy to handle it from here.
We will talk about how to solve this problem using the ScreenUtil package in Flutter. About setting a design size and when to use the appropriate number extension for spacing or sizing.
Comment Utiliser l'IA de Google pour les Tests A/B
Les tests A/B stimulent l'engagement car ils fournissent des méthodes de déploiement de fonctionnalités basées sur l'utilisateur. En d'autres termes, nous publions des fonctionnalités si les utilisateurs les aiment.
Cependant, la segmentation manuelle de la base d'utilisateurs n'est pas optimale. Nous ne pouvons pas dire si les utilisateurs d'un groupe de test ou d'une expérience donnée sont adaptés à une nouvelle fonctionnalité. C'est là qu'interviennent les IA de Google.
Nous pouvons utiliser l'API Vertex AI Gemini dans nos applications pour en savoir plus sur nos utilisateurs que de simples données d'analyse. Nous pouvons utiliser Firebase GenKit côté serveur pour savoir quels utilisateurs recevront un ensemble d'expériences avec une analyse prédictive.
Au cours de cette session, nous verrons comment utiliser les IA de Google pour comprendre nos utilisateurs, leur donner ce qu'ils veulent et donc une meilleure fidélisation des utilisateurs et une augmentation des ventes.
How AI improves User Experience on Mobile
The aim of this session is to encourage builders and developers to leverage AI responsibly in their products by explaining the benefits of doing so. These benefits include user productivity, personalization, cheap cost, improved speed, and developer experience (an indirect benefit). While deep diving in each benefit of AI in mobile devices, we will also mention legal and security touchpoints in the building and usage processes.
For user productivity, AI can be used in generative sections of apps like replying to text, interacting with customer support, generating hash tags, etc. For personalisation, AI can make the user happier with search or content suggestions peculiar to users' preferences. Furthermore, we can make UI controls to change their positions based on how AI detects users' usage at runtime.
The cheap cost benefits is in cases of users with AI-powered chipsets. These devices can carry out some AI computations that we would have rather sent to the server. Same is with the benefit of improved speed. Since executions are on-device, there is an overall faster experience and mobile device users are happier.
AI faciliates development by suggesting code snippets and carrying-out some minor developer tasks as we see with Gemini in Android Studio. Since developers' experiences get improved by AI, the developers can build more and ship faster, hence leading to improved User Experiences.
Comment l'IA améliore l'expérience utilisateur sur mobile
Cette session servira à encourager les développeurs à exploiter l'IA dans leurs produits en expliquant les bénéfices de tel engagement. Ces bénéfices comprennent la productivité de l'utilisateur, la personnalisation, le faible coût, la vitesse améliorée et l'expérience du développeur (un avantage indirect).
Pour la productivité de l'utilisateur, l'IA peut être utilisée dans les fonctionnalités génératives comme la messagerie, l'interaction avec des services clientèle, générer des hashtags, etc. Pour la personnalisation, l'IA peut rendre l'utilisateur plus heureux avec des suggestions de recherche ou de contenu à leur préférence. De plus, nous pouvons modifier quelques parties des applis (comme la position des boutons) avec l'IA dans le but de retenir les utilisateurs.
Les avantages en termes de coût sont dans le cas des utilisateurs qui possèdent des chipsets intégrés à l'IA. Ces appareils peuvent effectuer certains calculs d'IA qu'avant maintenant, nous avons dû envoyer au serveur. Il en va de même pour l'avantage de la vitesse améliorée. Étant donné que les exécutions sont sur l'appareil, l'expérience est globalement plus rapide et les utilisateurs d'appareils mobiles sont plus satisfaits.
Bringing Blockchain & Web3 into Flutter
Blockchain & Web3 power decentralized applications in browsers. On mobile devices, we can add them into our Flutter Apps to give users a better experience and hence increase user retention.
Whether your app's core features are blockchain-related, or whether you are using crypto for payments, or you want to add these functionalities in your existing applications: there is a place for you with Flutter.
This session will start with a quick overview of blockchain and web3 and then showcase successful large-userbase apps that are built with Flutter and also provide crypto features.
From there, we will discuss how to use web3 for Authentication and handling wallet connections. In addition, participants will learn how to read from and write to the blockchain with smart contract calls directly within Flutter.
Furthermore, we will explore the combinations of your custom server's API calls with the above blockchain methods for backend interactions, depending on your app's features.
We will then round up with hinting on security and on improving user experiences by reacting to Smart Contract Events and integrating deep links (if need be) in your Flutter applications.
Dart Macros and a Better Flutter
In line with Flutter updates at Google I/O this year 2024, this session would be about the latest from Dart and Flutter. These latest are as follows:
1. Macros in Dart
2. Gemini Google AI
3. Games in Flutter
4. Impeller in Android
5. WebAssembly for Flutter Web
Macros are an entirely new feature to the Dart programming language. They are like decorators in TypeScript. They are more performant because they evaluate at coding time through Dart analyzer, so this is an improved developer experience in the overall ecosystem. Though macros are still in beta and not yet publicly availalble, we can experiment with it.
The first part of this session will demo Macros to build enthusiasm with the new feature.
After that, we will now showcase the other new features in Flutter. How Gemini can power AI features, how Flame (Flutter-based game engine) can build games, how Impeller is now in Android and can improve performance, and lastly for Flutter Web now has WebAssembly and it is way faster than JavaScript.
How to customize a Flutter package to suit your needs
Dart and Flutter have more than 20000 packages on pub.dev. These are open-source packages developed by the huge Flutter community.
At times, some packages might not fulfill what you want. You might need extra customizations.
In this session, we will look at how to access a package's source code. We will also look at how to analyze and understand the source code.
Finally, using Fluttertoast package as an example, we will look at customizing any Dart package to suit your needs.
This session is adapted from an article I published earlier on SweetCode at https://sweetcode.io/how-to-customize-flutter-packages-to-suit-your-needs
How Flutter CustomPaint resembles SVG Image Spec
SVG is Scalable Vector Graphics. It is HTML & CSS code that draws animations, arcs, colors, lines, shadows, shapes, text, etc.
It is an image specification that renders any image with the same clarity, irrespective of the viewport size.
Flutter has the CustomPaint widget. With CustomPaint, you specify how painting should be done in every detail as if on a canvas.
Turns out that CustomPaint's APIs and methods closely resemble the SVG Image Spec.
Just as with SVG, you can specify animations, arcs, colors, lines, shadows, shapes, text, etc. all in CustomPaint. There are options you don't get with the basic Container widget.
In this session, the audience will learn more about both CustomPaint and SVG. They will learn these complex UI tools from the angle of their features.
We will show a side-by-side comparison of achieving the same complex UIs with both tools.
Using Streams and Services for Flutter State Management
In Dart, Streams continuously emit values.
In Flutter, we can create service classes. These services are globally available singletons that can keep track of values.
In your Flutter codebase, you can combine them such that services expose stream(s), while at the same time emitting values to those stream(s).
In the UI, you can use StreamBuilders to auto-update the UI when the streams emit values. Also, services can listen to changes in streams of other services.
The above is a neat App-Wide State Management architecture you can use in any Flutter codebase (irrespective of the large scale).
You can use it in place of other state management architectures that come with performance issues. learning curves, and many dependencies.
In this session, the audience will get to understand the above with a simple demo of the Counter App.
As a bonus, the session will also explain how to navigate from anywhere using the above architecture.
Understanding UI Rendering: How Flutter is platform-agnostic
Flutter as a mobile framework achieves cross-platform ability through 2 ways: UI Rendering and Platform Channels.
In this session on UI Rendering, the audience will understand how Flutter is capable of painting the exact same UI across any device or platform.
Event participants will also understand how Flutter is capable of keeping to the promised 60 frames per second, given that Flutter uses some rendering canvas for each device.
Finally, we will explore some tips on how to implement any UI in Flutter as a bonus.
How to improve Flutter Forms
Forms are how we collect input from users in our apps. We should improve forms to give users a good experience in our app.
Improving Flutter Forms involves:
* Overall UI of the Forms
* Proper Input Validation Messages
* Toggling obscureText on password fields
* Making other input types to be fields (dropdowns, pickers, and radios)
* Autofill where necessary
* KeyBoard Types for each input field type
* Having onSubmit for the Enter key
* Disabling Fields when the form is submitting
* Loading UI feedback for when the form is submitting
This article tells the full story https://dev.to/obumnwabude/how-to-improve-flutter-forms-ni3
How to animate in Flutter
- On using built-in animated equivalents of most widgets.
- On managing animations yourself with AnimationController or built-in transitions.
- On setting up animations yourself with AnimatedWidget or Animated holder.
- On using CustomPaint
- On using third party packages like Lottie or Rive.
Flutter for Web Developers
The aim of this session is to show the concepts that a web developer can transfer over when learning Flutter and the things that will be new to him/her.
At the end of the session, it is expected that web developers in the audience will be more willing to try Flutter because they would have understood the things they don't need to learn again and figure out what might be a hurdle for them.
For concepts that transfer over, the following have similarities in front-end web development and Flutter:
1. Implementing User Interfaces.
2. Coding for Multiple Screen Resolutions.
3. Working with developer tools.
For concepts that will be new to a web developer:
1. Handling Scrolling yourself.
2. Setting Up developer environment.
3. Packaging and Deployment.
This session is adapted from an article I previously published on CSS-Tricks at https://css-tricks.com/flutter-for-front-end-web-developers/
Scrolling Insights: Flutter vs CSS
In browsers, with HTML and CSS, scrolling is active by default. HTML elements auto-scroll when there is need for that. On the other hand, in mobile apps, when coding for Android & iOS, you must be intentional about what should scroll. As Flutter builds for these platforms, it is inherently constrained to “intentional scrolling”. This is especially technical when you want to implement specific scrolling flavors.
In this session, we will simultaneously look at how to achieve the following scrolling behaviors in Flutter and in CSS (side-by-side comparison):
* How to scroll (you have to use Scrollable widgets)
* How to scroll horizontally (Axis.horizontal)
* How to achieve nested scrolling (slivers and shrinkWrap)
* How to pin some items when you scroll (combining slivers)
* How to occupy free space while allowing scrolling too (SliverFillRemaining)
* How to prevent the user from scrolling (NOT using Scrollable Widgets)
Expert Tips for Flutter UI Performance
Flutter as a UI framework powers devices and renders animations fast and without jank. Performance is core to Flutter and has been the reason for continuous optimizations and improvements.
However, aside from the framework's actions, the developer/builder of the Flutter app also has a role to play in the performance of Flutter's UI in their apps. They have to collaborate with the framework and not fight it to achieve the best performant UI ever.
In this session, we will go through expert tips that anyone building Flutter must take into account when working with UI code. They are as follows:
* Use widgets instead of functions that return them
* Use "const" keyword where obtainable
* Cache images after they are fetched
* Cache results of computation
* Use Isolates when needed
How to Build Android Conversation Bubbles in Flutter
Conversation Bubbles are an Android 11+ OS-level feature. They allow users to interact with chats from various apps simultaneously.
Building the Bubbles feature in an Android application requires a tight integration with notifications. In addition, you need to provide "dynamic Shortcuts" and "Persons" for every bubble displayed to the Android system. These make it demanding to build in Flutter because of the heavy MethodChannels usage and the extra work to do in Android's native side (Kotlin).
During this technical workshop session, the audience will learn how they can integrate the Android Bubbles feature in a given Flutter application. The session will start with explaining the feature, showcasing its proposed value, and brainstorming on other unexplored apps that can use it (like customer support, multi-session multiplayer gaming, and real-time monitoring of trades).
Next, we will deeper explain the prerequisites for an application to show bubbles. From there, we will go through the core things we need to handle or provide from Flutter to Android to ensure that users can interact with Bubbles in Flutter apps as if they were Android native apps.
There will be a demo of the code and how it works during the workshop. Finally, we will look at the User Experience Best Practices to follow while using the Bubbles feature especially as users can opt out of notifications at any point in time.
How to use Google AI for A/B Testing
A/B Testing drives engagement because it gives provides a user-based methods of rolling out features. In other words, we publish features if users like them.
However, manually segmenting the user base is not optimum. We can't tell if users in a given test group or experiment are the right fit for a new feature. This is where Google’s AIs come in.
We can use Vertex AI Gemini API in our applications to learn about our users better than plain analytics Data. We can the use Firebase GenKit on the server-side to know which users will receive a set of experiments with predictive analysis.
In this session, we will look into how to use Google AIs to understand our users, give them what they want and hence more user retention and increased sales.
How Flutter is Platform-Agnostic
Platform-agnosticism is a relative measure of how an app works the same way, irrespective of the operating system on which the app is running.
Flutter is platform-agnostic because it gives users of Flutter-built apps the same experience across their different devices. Flutter is platform-agnostic through how it renders user interfaces and through platform channels.
For UI, Flutter's rendering uses multiple layers. Also, Flutter grabs a blank canvas on the target platform and paints as it likes. In addition, the same Flutter engine is shipped in every app so Flutter paints the Dart code in exactly the same way.
For Platform Channels, Dart (the flutter side) can call methods and listen to events whose declarations are found in the native side (of the target platform) and vice versa. This enables plugin development and streamlines native features in the Flutter app.
In this session, the audience will understand the crucial benefits of platform-agnosticism especially in this our modern times of the sovereignty of cross-platform tools. Furthermore, session participants will appreciate how Flutter achieves this fit of being platform-agnostic through rendering UI and using platform-channels.
We will walk through how a host/native app is different from the "inner" Flutter app and engine. We will also see how Dart's Binary Messenger serializes/deserializes function calls across both sides. Finally, the audience will grasp the difference with Flutter's execution on the Web as browsers are not Operating Systems.
Leveraging BigQuery for Business Data in Google Cloud
BigQuery is Google Cloud's offering for petabytes of compute, storage, and AI scale in any product. It is a data warehouse that can:
* Take in Data from multiple Sources
* Allow you view and analyse Data for Business Insights
* Create AIs and improve decisions
* etc.
In this session, we will overview how and what BiqQuery does for you. We will also use CloudSkillsBoost to study a dataset from Firebase Analytics in BigQuery and create AI models that predict app features based on insights.
Value Proposition of Google Cloud Data and Storage
In Google Cloud Platform (GCP), we have multiple ways to store and manage data. The Data solutions offered by Google Cloud cut across extremes of varying factors such as:
* Structured, Semi-Structured, or Unstructured Data
* SQL, NoSQL, File, or External Database Compatibilities
* Small amounts to Petabytes Scale of Data
*Data Expiry to Very Long Term Retentions
* Cost Flexibility, Free Tiers, and Usage Discounts
* Combinations of Data Solutions
* Creating and Managing AIs from Data Abundances
* etc.
At all phases of hobby apps, startups, or full-blown business, builders always have to access and manage loads of data, either provided by themselves or generated by application usage.
In this session, we will look into popular GCP Data and Storage Solutions, common data and storage patterns of applications, and intersections of both to maximize efficiency, reduce cost, and make better architectural decisions.
Creating a multiplayer crossword with Gemini, Flutter, and Firebase
Using The "Big 3" Technologies (Gemini, Flutter, and Firebase) allows for a seamless intersection between AI, Apps, and Backend. Their latest innovations and new features empowers you to build practically anything.
GenKit for Gemini makes it easy to use Google AI for generative content like hints and suggestions. Flutter gives a rendering engine for UI across Android, iOS, web, and desktop. Firebase furnishes most backend services any app needs. And with Firebase Studio, you can build all these in the browser/Cloud much for faster than ever.
In this session, we will use a Multiplayer Crossword Game to showcase how to use these technologies to equip your development flow and enable you ship fast.
Specifically, we will be using the Google I/O lab/pathway at https://developers.google.com/learn/pathways/solution-crossword for workshop/demo.
Create your AI with RAG in Google Cloud
Retrieval-Augmented Generation (RAG) enhances large language models by retrieving and grounding answers in external data sources, making responses more accurate and trustworthy. Grounding ensures outputs are tied to verifiable facts, helping you build AI solutions tailored to unique datasets.
Google Cloud’s Vertex AI simplifies RAG by combining vector search, data pipelines, and foundation models on a secure, scalable platform. With Vertex AI, you can quickly embed custom knowledge into AI systems and deploy them to production.
In this session, participants will build their own RAG-powered AI in Vertex AI with the help of Google Colab (Jupyter Notebooks). Specifically, we will walk through the steps with the workshop content at https://github.com/GoogleCloudPlatform/generative-ai/tree/main/rag-grounding
Participants will leave with practical experience, a working AI in Vertex AI, and the skills to create grounded, reliable AI for their projects.
Flutter UIs: Adaptive, Responsive, and Pixel-Perfect.
Designing mobile apps that look great across any screen is essential. In this session, we’ll dive into the concepts of adaptive and responsive design in Flutter, exploring their definitions, differences, and why both are critical for delivering a seamless user experience.
Participants will learn how to approach implementing UIs from the least screen width to scaling for wider screens. We’ll also discuss using breakpoints update UI layouts dynamically. Furthermore, we will incorporate scrollable layouts to handle unpredictable content sizes while keeping interactions smooth.
Takeaways:
* Understand the difference between responsive and adaptive design in Flutter.
* Learn how to plan and implement UI layouts for various screens.
* Use breakpoints effectively to optimize layouts.
* See why scrollable designs are essential for flexible apps.
* Build pixel-perfect Flutter UIs that feel natural everywhere.
DevFest Kaduna 2024 Sessionize Event
FlutterBytes Conference 2024 Sessionize Event
Google IO Extended Asaba Sessionize Event
DevFest Asaba 2023 Sessionize Event
Devfest Enugu 2023 Sessionize Event
DevFest Abakaliki 2023 Sessionize Event
Google I/O Extended Owerri Sessionize Event
Google IO Extended Enugu '23 Sessionize Event
Google I/O Extended Onitsha Sessionize Event
Flutter Forward Enugu Sessionize Event
Obumuneme Nwabude
GDE Dart & Flutter
Abakaliki, Nigeria
Actions
Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.
Jump to top