fz3hra's blog

The Evolution of My IT Career: 5 Years In

Umme Faatimah-Iz-Zaahra Mujore — Fri, 27 Feb 2026 20:50:47 GMT

I thought it was time for a check-in.

Who would have imagined that 5 years later, I would be writing this saying that becoming a Software Engineer was absolutely worth it?

The ups and downs? I embrace all of it. They are part of the experience for a reason. Growth is definitely not linear. It is built through challenges, new connections, new lessons, and by allowing yourself to evolve with change.

There is something special about working with like-minded people. When you give yourself the permission to explore, to let your soul wander, and to discover your true potential; it creates a thrilling effect, almost like a trance you don't ever want to leave. And yes... it can be addictive. But it is the kind that builds you.

Of course, with growth comes self doubt. It always shows up. But is it necessarily a bad thing? I don't think so.

We are human. We are meant to feel. Sometimes self-doubt is not a sign that you are failing but rather a sign that you are being projected towards the right direction.

My experience has taught me this; allow yourself to be guided by the process.

Feel it. Breath through it. Dance within it.

And that was 5 years in. and I am still evolving. =D

About Me

I am Zaahra, a Google Women Techmakers Ambassador who enjoy mentoring people and writing about technical contents that might help people in their developer journey. I also enjoy building stuffs to solve real life problems.

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

From Idea to Code - Building Rummy with Flutter - Part 2

Umme Faatimah-Iz-Zaahra Mujore — Sat, 10 Jan 2026 20:42:05 GMT

In part 1, we built the foundation of our Rummy game with the UI and the core game engine.

Traditionally, creating a computer opponent means writing algorithms. You might implement an complex decision trees or write hundreds of lines of heuristic code. This algorithmic approach is robust but rigid. It requires you, the developer, to encode the strategy explicitly.

But what if we could trade algorithms for intelligence?

What if, instead of hard-coding how to play, we build an AI agent powered by Gemini, that plays Rummy against us. We won't teach it strategy, we will basically just hand it the cards, and say your turn.

The packages required:

dependencies:
  # The core SDK for accessing Gemini models via Firebase
  firebase_ai: ^3.5.0
  
  firebase_core: ^4.2.1

Note: Make sure you have initialised Firebase in your project.

What is an 'AI Agent'?

In the context of software development, an Agent is more than just a chatbot. It's a system capable of:

Perception: Reading the environment (in our case, looking at the cards on the table).
Reasoning: Deciding on a course of action based on a goal (winning the game).
Action: Executing code to change the environment (drawing or discarding).

When we use a Large Language Model (LLM) like Gemini as an agent, we aren't just asking it to write a poem. We are treating it as a reasoning engine. We give it the current state of the game as a JSON object, and it "replies" by choosing which function in our code to call.

The Implementation

To make the AI play the game, we need three key components working in harmony. Let's look at them in order:

The Engine (EngineController): The game state.
The Brain (AppAgent): The AI service.
The Coordinator (GameScreen): The UI layer.

1. The Engine: EngineController

The EngineController is the "rule enforcer." It holds the deck, the hands, and manages the phases (Drawing -> Discarding). It doesn't know who is playing, only what determines a valid move.

We expose methods for the AI (and the player) to interact with the game:

setup(): Deals the cards.
handOf(playerId): Returns the cards for a specific player (needed for the AI to "see" its hand).
playerDrawFromStock() / playerDrawFromDiscard(): The drawing actions.
playerDiscard(card): The ending action.

class EngineController {
  // ... state variables ...
  
  // The AI needs to see the top of the discard pile to decide if it wants it
  Card? get discardTop => discardCard.isEmpty ? null : discardCard.last;
  // The AI needs to know if moves are compliant with game phases
  bool get canDrawFromStock => phase == GamePlayState.playing && !_hasDrawnThisTurn;
  // Key Action: Drawing
  void playerDrawFromStock() {
    Card card = stock.draw();
    hands.putIfAbsent(player, () => []).add(card);
    _hasDrawnThisTurn = true;
  }
  // Key Action: Discarding
  void playerDiscard(Card card) {
    final hand = hands[player]!;
    hand.remove(card);
    discardCard.add(card);
    _endTurn();
  }
}

2. The Brain: AppAgent

This is where the magic happens. The AppAgent translates the EngineController's state into a prompt for Gemini, and then translates Gemini's response back into EngineController function calls.

We configure Gemini with Function Calling definitions so it knows exactly what moves are legal.

class AppAgent {
  late final ChatSession _chat;
  AppAgent() {
    // 1. Configure the Model
    final model = FirebaseAI.googleAI().generativeModel(
      model: 'gemini-2.5-flash',
      // ... config ...
      systemInstruction: Content.text(
        'You are a Rummy opponent. In ONE response emit EXACTLY two tool calls: '
        '(1) draw_from_stock OR draw_from_discard, (2) discard_card. '
        'RULE: Only use draw_from_discard if the top card completes or improves a run (same suit consecutive) '
        'or a set (same rank, different suits). Otherwise draw_from_stock. '
        'Use ONLY tool calls. No text. Stop after the discard.',
      ),
      // 2. Define the Tools (The "Language" of our game)
      tools: [
        Tool.functionDeclarations([
          FunctionDeclaration('draw_from_stock', 'Draw from stock.', {}),
          FunctionDeclaration('draw_from_discard', 'Draw from discard.', {}),
          FunctionDeclaration('discard_card', 'Discard a card.', {
             'rank': Schema.integer(...),
             'suit': Schema.string(...)
          }),
        ]),
      ],
    );
    _chat = model.startChat();
  }
  // 3. The Play Loop
  Future playTurn({required EngineController engine, required int botPlayerId}) async {
    // A. Perception: Serialize the game state
    final state = {
      'hand': engine.handOf(botPlayerId).map((c) => ...).toList(),
      'discardTop': engine.discardTop?.toJson(),
      'canDrawFromDiscard': engine.canDrawFromDiscard,
    };
    // B. Decision: Send state to Gemini
    final response = await _chat.sendMessage(
      Content('user', [TextPart(jsonEncode(state))])
    );
    // C. Action: Execute the tool calls
    final calls = response.functionCalls;
    for (final call in calls) {
      if (call.name == 'draw_from_stock') {
        engine.playerDrawFromStock();
      } else if (call.name == 'discard_card') {
        // ... parse arguments and find the card object ...
        engine.playerDiscard(card);
      }
    }
    
    return "Opponent played.";
  }
}

3. The Coordinator: GameScreen

Finally, the GameScreen ties it all together. It watches the game state; when the player finishes their turn, it triggers the AI.

class _GameScreenState extends State {
  // ...
  
  // Triggered after the player discards
  void _discardCard() {
    // ... human player logic ...
    
    // Pass control to the bot
    _runBotTurn();
  }
  Future _runBotTurn() async {
    // 1. Validation
    if (_engineController!.currentPlayerId != _opponentId) return;
    setState(() => _gameMessage = "Opponent is thinking…");
    // 2. Execution
    // We await the result so the UI doesn't update until the bot is done
    final summary = await _agent!.playTurn(
      engine: _engineController!, 
      botPlayerId: _opponentId
    );
    // 3. Feedback
    setState(() => _gameMessage = summary);
    
    // 4. Check Win Condition
    if (_engineController!.phase == GamePlayState.finished) {
       _showGameResultModal(...);
    }
  }
}

And that's about it! This approach shows how AI Agents can replace rigid, rule based systems with adaptive reasoning.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

Optimistic Locking

Umme Faatimah-Iz-Zaahra Mujore — Wed, 31 Dec 2025 12:25:16 GMT

While researching about ways to make my application more production-ready, especially in situations where multiple users may interact with the same data, I came across a concept called Optimistic Locking.

Optimistic Locking is a concurrency control strategy commonly used in transactional systems to prevent data inconsistencies when several users attempt to update the same resource.

For now, this post will be more theoretical than practical. The goal is to explain what problem exists and how it can be handled conceptually.

I will get into the technical implementation details in a later post.

Scenerio

Let’s say you have two users managing product entries on a website.

Here’s the sequence of events:

User 1 opens a product and starts editing it.
They step away for a break without saving their changes.
User 2 opens the same product five minutes later.
- From their perspective, no changes have been made yet.
User 2 edits the product but gets interrupted and forgets to click Save.
User 1 comes back, completes their edits, and saves the product.

So far, everything looks normal.

Now imagine User 2 later clicks Save.

What really happens now?

Without any concurrency control in place:
User 1 successfully saves their changes

The problem here is that:

both users made valid changes
neither user is aware of the conflict
there is no clear trace of where the error originated
User 2 also saves their version afterward
User 1’s changes are overwritten, even though they were correct
The final product entry contains incorrect or incomplete information

Why this is a problem in Production Systems?

In a production ready system, we want to

protect data integrity
avoid silent overwrites
clearly detect and handle conflicts

And this is where optimistic locking becomes useful.

Optimistic locking is a strategy that assumes conflicts are possible but relatively rare.

Instead of locking a record as soon as a user starts editing it, the system allows multiple users to work concurrency, and checks for conflicts only when a save operation occurs.

How it works?

A common way to implement Optimistic Locking is by using the updatedAt, specially while developing backend solutions.

The idea is simple:

a user opens a product - the system sends the product data along with its current updatedAt value
the user make changes
when the user clicks on Save, the backend compares the updatedAt value of the user, and the current updatedAt value stored in the db.
If a match is found, it means no one else modified the data, henceforth, saves successfully. But if no match is found, a conflict is detected.

When a conflict is detected

the update is rejected
a collision conflict error is returned
the user is informed, so that they can review and decide on how to proceed.

And this makes managing data and conflict more practical.

And yeah... that's about it ;)

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

Community Contributions Summary (2024–2025)

Umme Faatimah-Iz-Zaahra Mujore — Tue, 30 Dec 2025 17:10:00 GMT

Summary:
Throughout 2024–2025, I actively contributed to the developer community through blog posts, workshops, and public talks focused on Flutter, AI, .NET, and emerging technologies.

Impact:
13 technical blogs, 4 public sessions (3 in-person, 3 online).
I consistently create content to empower developers—especially early-career and women in tech—by sharing practical insights, tutorials, and problem-solving experiences.

This article is divided into blog post and events and speaking engagements for the year 2024, and 2025.

Blog posts:

2024

21st Jan 2024 - [Python] My Whirlwind Adventure with Django and Virtual Environments

24th Jan 2024 - [IOS] Debugging a production nightmare ;)

25th Jan 2024 - [IOS] yet another issue with CocoaPods?

I found myself wrestling with yet another CocoaPods issue. The error message I encountered seemed quite daunting at first: Warning: CocoaPods not installed. Skipping pod install. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. CocoaPods not installed or not in valid state. Therefore in my blog, I explain how I solve the issue.

1st March 2024 - [Flutter Edition] Feeling Rusty? Let's Align Those Containers!

What we're aiming for is a clean and symmetrical design, with two distinct containers. In my blog I explain how to align 2 containers.

24th March 2024 - The Dunning-Kruger Effect in Action

I believe we have all been through a situation where someone expected to be of knowledgeable authority, displays actions and attitude that shows otherwise. They lack the basic of knowledge, and skills required for a role. They bark orders, make unrealistic demands and shut down any attempts at constructive feedbacks or collaboration. And worst of all, they genuinely believe that they are experts when the evidence suggests otherwise. This englobe the paradoxical situation of the Dunning-Kruger effect.

1st May 2024 - [React Native] Navigating ViewPropTypes Deprecation: A Step-by-Step Guide

Solving the "ERROR ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-react-native-prop-types' package" error

6th May 2024 - [Flutter] initState v/s didChangeDependencies methods

In an attempt to solve a bug in my code, I stumbled onto the didChangeDependencies method. While it did not solve my problem, it significantly expanded my understanding on the flutter lifecycle methods. In this article i therefore share my insights.

15th June 2024 - [Flutter] Create Private Packages

My journey with Flutter packages began when I had to build one from scratch. Today, I am excited to share my experiences and insights on this topic. I even discussed it at Google I/O'23, but here we are for those who truly want to understand the concepts and build their own packages.

2025

16 July 2025 - Azure Function and Its purpose

I just published a new article titled “Azure Functions and its Purpose.” This is a brief introduction to Azure Functions, aimed at helping you understand what they are, how they work, and where they fit into enterprise solutions. I wrote this based on my experience working with Azure Functions and while preparing for the AZ-900 and AZ-204 certifications. Read it here: https://lnkd.in/dV3Fu3n7 I hope you find it helpful! If you have questions, insights, or tips from your own experience with Azure or serverless technologies, feel free to share them in the comments — let’s learn and grow together. Thank you! 😁

15th September 2025 - [.NET]: Let’s Create a CLI with System.CommandLine

Hey There! I just built a small CLI task tracker in .NET! It’s a simple tool where you can: - Add, update, delete tasks - List tasks - Mark status: ToDo, InProgress, or Done I wrote up the full walkthrough here: https://lnkd.in/dFE9kcTE Thank you for checking it out

18th September 2025 - [.NET]: Creating an Expense Tracker CLI

Hey there! I’ve created something fun again — an Expense Tracker CLI in .NET. It’s small but shows how you can apply programming best practices even in CLI tools. It includes features such as: - Add, update, delete, and read expenses - Get summarized expenses by month - Export data to CSV Here are a few example commands: expense-tracker add --name "groceries" --amount "10" expense-tracker summary --month 9 expense-tracker export-csv --out ~/Documents/expenses.csv Full post can be read here: https://lnkd.in/d69NqNnB Would love to know — have you built a CLI tool before? What did it do?

11 October 2025 - [Dart]: Understanding Isolates

Hey everyone! I just published a new article on Dart isolates — a little guide to how Dart handles concurrency under the hood. Check it out here: https://zaahramujore.com/dart-isolates/

13th October 2025 - [Flutter - part 2] Understanding Stateful Widget

After previously exploring how Stateless Widgets work in Flutter, I wanted to continue the journey by sharing about Stateful Widgets, something Flutter devs use almost every day. I’ve crafted this article carefully to help you not only understand how to update your UI but also what happens under the hood when you do. Read the full article here: https://zaahramujore.com/flutter-understanding-stateful-widget-2/

15th October 2025 : [Flutter - part 3] Passing Data Efficiently Across Widgets

Today, we’ll be exploring how to pass data efficiently across widgets in Flutter!In my article, I dive into how data sharing really works under the hood, and walk you through both a bad example and a clean solution using InheritedWidget.

15th October 2025: [Dart] WildCard Variables

Did you know?With the release of Dart 3.7, developers can now use wildcards (_) to ignore values they don’t need — making code cleaner, safer, and easier to read.

16th October 2025: When Dart Stops Formatting Your Code the Way You Want

Have you been encountering Dart formatting issue?

28th October 2025: From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 1]

In this article, I share how I transformed my BMI Calculator design from Figma to a mobile app using Flutter. Today, I’m excited to share Part 1 of the journey where I walk you through building the Home Screen step by step.

28th October 2025: Flutter Merge Threads #BreakingChanges

Flutter Breaking Changes Just Got Real. Merge Threads is now something every Flutter dev should keep an eye on.

1st November 2025: From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 2]

In this article, we will be completing the Calculate and Result Screen, implement the BMI Logic and the Unit testing.

8th November 2025: From Design to Code – Building Agentic AI into “Your BMI Buddy” with Flutter and Gemini [Part 3]

A few days ago, I shared about Building Agentic Applications using Flutter and Gemini at Women in Tech Africa, Mauritius Chapter. 💙

Today, I’ve written an article diving deeper into its capabilities, showing how an agentic AI can act as a wellness coach, giving personalised tips, setting weekly goals, and even scheduling reminders!

21st December 2025: From Idea to Code - Building Rummy with Flutter - Part 1

31st December 2025: Optimistic Locking

In this post, I walk through scenarios where data conflicts can occur and explain how we can detect and resolve them using Optimistic Locking.

Events and Speaking Engagements

2024

4th May 2024 - Data Analytics

In this comprehensive session, you'll delve into the fundamentals of data analytics and Power BI, learning essential functionalities and techniques to harness the power of data in a professional setting. From understanding the basics to integrating advanced analytics into your workflow, this workshop covers it all.

PPT Link: https://docs.google.com/presentation/d/1EQVY8fSjxmsl6XnUI169vZwXN4R0fWB8/edit?slide=id.p1#slide=id.p1

18th July 2024 - Leveraging Generative AI in Mobile Applications

Join me as I delve into the cutting-edge world of Generative AI and its application in mobile development. This session will guide you through the practical aspects of incorporating AI technologies into mobile apps, with a special focus on Flutter. Learn how to design and implement AI-driven systems and enhance user interactions in real-world scenarios. Whether you’re looking to stay ahead in the industry or simply interested in the potential of AI in mobile apps, this talk will provide valuable insights and actionable strategies.

Event Link: https://gdg.community.dev/events/details/google-gdg-mauritius-presents-google-io-extended-2024/

28th September 2024 (ONLINE) - Exploiter l'Intelligence Artificielle Générative dans les Applications Mobiles

Rejoignez-moi pour plonger dans le monde de pointe de l'IA générative et son application dans le développement mobile. Cette session vous guidera à travers les aspects pratiques de l'intégration des technologies d'IA dans les applications mobiles, avec un accent particulier sur Flutter. Apprenez à concevoir et à mettre en œuvre des systèmes pilotés par l'IA et à améliorer les interactions utilisateur dans des scénarios réels. Que vous cherchiez à rester en tête dans l'industrie ou que vous soyez simplement intéressé par le potentiel de l'IA dans les applications mobiles, cette présentation vous fournira des informations précieuses et des stratégies concrètes.

Link: https://www.youtube.com/watch?v=pc4VpVAsMqY

19th October 2024 - Getting our hands dirty with Flutter GPU

Link: https://www.youtube.com/watch?v=ZvPRHV4iCiw&t=30s

2025

30th October 2025 - Building Agentic Apps with Flutter and Gemini

At Women in Tech Africa, Mauritius Chapter event.

Link: https://www.youtube.com/watch?v=hEN0AKmTuws&t=6s

In this session, we explored the foundational concepts of AI Agents — their definition, purpose, and how they have evolved into Agent AI. We discussed the key distinctions between Agent AI and Agentic AI, highlighting how Agentic AI represents a more autonomous, goal-driven, and adaptive form of intelligence.

The session then introduced Generative AI (GenAI) and its extension into Generative AI Agents, emphasizing how these agents combine reasoning, planning, and multimodal capabilities to perform complex tasks.

After establishing the conceptual groundwork, we examined Firebase AI tools — understanding why they are used, how they simplify the integration of AI features into mobile apps, and what advantages they provide for building Agentic experiences.

Finally, we transitioned into the hands-on coding segment, where participants implemented these ideas in practice, integrating Firebase AI functionalities directly into a Flutter project.

Number of People who attended the session: 150

22nd November 2025 - Creating Rummy, a card game, with Flutter, Gemini and Firebase. @ DevFest Lafia

In this session, I will talk you through how to build Rummy, a classical card game, using Flutter, Firebase and Gemini.

Rummy has always been one of my favourite game to play with friends and that sparked an idea. What if your gaming companion could think, reason and play like a real friend?

We will explore how to integrate agentic AI within the game, allowing it to understand the gameplay, make intelligence decisions and interact dynamically with players. By the end of the session, you will learn how Flutter handles the game logic and UI, how Firebase provides us with a service, allowing us to leverage onto building this Agentic AI with Gemini, to make your digital opponent come alive.

6th December 2025 - Adding AI Functionalities To Your Flutter App Using AI Toolkit. @ DevFest Pakistan

In this session, we will explore how to bring intelligence to your Flutter apps using the Flutter AI Toolkit. Through a simple use case, you’ll learn how to integrate AI seamlessly into your existing project.

We’ll begin with the basics, set up the toolkit, connect it to your Flutter app, and then walk through a live demo to see how AI can transform a regular Flutter application into a smart, interactive experience.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Portfolio[Made with Love in Flutter]: https://portfolio.zaahramujore.com/

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

From Idea to Code - Building Rummy with Flutter - Part 1

Umme Faatimah-Iz-Zaahra Mujore — Sun, 21 Dec 2025 15:46:06 GMT

This project stems from enjoying playing rummy with friends. So I thought, why not turn this into a mobile game?

Building this game wasn't an easy process because I was initially unsure of the direction I wanted to take. At first, I started by building the UI and also tried a TDD approach, but in this blog post, I will only be breaking things down by screen, and we will be integrating the logic as we go.

Okay, let us skip the talking and get into code.

The app and Sample Code

You can find the app on the App Store here: IO Rummy App

You can find the complete source code here: flutter_rummy repo

The app structure

The app is primarily composed of 2 main screens

Home Screen
Game Screen

Building the Home Screen

The Home Screen is simple. It welcomes the user and asks them to enter their name.

The UI setup

To have a modern look, I have used a background gradient and some animation to make it pop.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F6FA),
      body: SafeArea(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                const Color(0xFFF5F6FA),
                const Color(0xFFE8EAF6),
              ],
            ),
          ),
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24),
              child: FadeTransition(
                opacity: _fadeAnimation,
                child: SlideTransition(
                  position: _slideAnimation,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'Welcome!',
                        style: TextStyle(
                          fontSize: 36,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF2C3E50),
                          letterSpacing: 1.2,
                        ),
                      ),
                      // ... Lottie animation and other widgets ...
                      
                      // Name Input
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.04),
                              blurRadius: 8,
                              offset: Offset(0, 2),
                            ),
                          ],
                        ),
                        child: TextField(
                          controller: _playerNameController,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                            color: Color(0xFF2C3E50),
                          ),
                          decoration: InputDecoration(
                            hintText: 'Player Name',
                            // ... styling ...
                          ),
                        ),
                      ),
                      
                      // ... Join Button ...
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

To achieve this look:

The entire screen is wrapped in a Container with a BoxDecoration
We use LinearGradient that flows from top left to bottom right, using soft colors, to create a nice feel.
FadeTransition and SlideTransition is used to animate the content when the screen loads.

Managing state and animations

Since we have animations and text input, we need a stateful widget.

class _HomeScreenState extends State with SingleTickerProviderStateMixin {
  final TextEditingController _playerNameController = TextEditingController();
  late AnimationController _animationController;
  late Animation _fadeAnimation;
  late Animation _slideAnimation;
  @override
  void initState() {
    super.initState();
    _playerNameController.text = "Player ${Random().nextInt(1000)}";
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );
    _fadeAnimation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeIn,
    );
    // ... slide animation setup ...
    _animationController.forward();
  }
  @override
  void dispose() {
    _playerNameController.dispose();
    _animationController.dispose();
    super.dispose();
  }

initState: we initialise the controller and start the animation
dispose: we clean up the controllers to prevent memory leaks

The logic

When the user clicks "Join Game", we simply push the user to the GameScreen. We pass the player's name to this game screen so that we can identify them.

  void _joinGame() {
    String name = _playerNameController.text.trim();
    if (name.isEmpty) {
      name = "Player ${Random().nextInt(1000)}";
    }

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => GameScreen(
          localPlayerName: name,
          startWithTutorial: false, 
        ),
      ),
    );
  }

Building the Game Screen

And now this is where things get interesting.

The models

Before we draw a single card, we need to define what a card is. Therefore, in our card_model.dart, we define the following

enum Suit { HEARTS, DIAMONDS, CLUBS, SPADES }

class Card {
  final int rank; // 2..10, and A, K, Q, J
  final Suit suit;
  const Card({required this.rank, required this.suit});
}

I have also created a deck_model.dart where I am able to create the 52 cards on deck, and make them shuffle. There is another method like draw(), which will allow a user to pick a card from the deck.

The game engine

The EngineController is where we handle the logic of the game.

What does it actually do?

Setup method: It creates the deck, shuffle, and deals cards to all players
Management of turns: It checks whose turn it is by using the currentPlayerIndex
Piles: It manages the stock (face down) and discard (face up) piles
Bot Logic: There is an algorithm (backtracking) to check what the computer opponent should do.

Therefore in engine_controller.dart

class EngineController {
  // ... state variables ...
  
  // assign random cards to players.
  // setup card on table
  // TODO: dont use seed in Production
  void setup(int cardsPerPlayer, int decksUsed, int? seed) {
    if (_state.players.isEmpty) throw StateError("No players");
    setupCardOnGameStart(decksUsed);
    setupPlayerCards(cardsPerPlayer);
    setupCardOnDesk();
    currentPlayerIndex = 0;
    _hasDrawnThisTurn = false;
    winnerPlayerId = null;
    phase = GamePlayState.playing;
  }
  
  void setupCardOnGameStart(int decksUsed, [int? seed]) {
    stock = Deck.standard(decks: decksUsed);
    stock.shuffle(seed);
  }
  void setupPlayerCards(int cardsPerPlayer) {
    hands
      ..clear()
      ..addEntries(
        _state.players.map((player) => MapEntry(player.id, [])),
      );
    for (var i = 0; i < cardsPerPlayer; i++) {
      for (final player in _state.players) {
        hands[player.id]!.add(stock.draw());
      }
    }
  }
  void setupCardOnDesk() {
    discardCard
      ..clear()
      ..add(stock.draw());
  }
}

Connecting the Logic to the UI

Now, how does the GameScreen actually use this?

In the game screen, we hold a reference to this controller. When the screen loads, we initialise the engine.

  void _setupGame() {
    if (!mounted) return;
    final gameState = _startController.gameState;
    if (gameState == null) {
      debugPrint('Cannot start game: gameState is null.');
      return;
    }
    setState(() {
      _engineController = EngineController(gameState: gameState);
      final e = _engineController!;
      e.setup(_cardsPerPlayer, _decksUsed, _seed);
      _arrangedHand = List.from(e.handOf(_localPlayerId));
      _isGameSetup = true;
      _isWaitingForOpponent = false;
      _hasDrawnCurrentTurn = false;
      // ... tutorial logic ...
    });
  }

Handling of user interaction

When you tap the deck to draw a card, we call the engine and then setState to show the new card.

void _drawFromStock() {
    // 1. Validate: Can we draw?
    final e = _engineController;
    if (e == null || !e.canDrawFromStock) return;
    setState(() {
      // 2. Action: Tell engine to draw
      e.playerDrawFromStock();
      // 3. UI: Update our local hand view
      final newHand = e.handOf(_localPlayerId);
      // ... logic to animate the new card into _arrangedHand ...
    });
  }

This pattern, action -> engine update -> setstate, is the heart of the game. The engine keeps the truth and the UI reflects it.

Rendering the hand

We want the cards to look like they are being held in a hand. We use a GridView to display the cards.

  Widget _buildCardGrid(bool isLocalTurn, GamePlayState phase) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: _cardsPerRow,
        childAspectRatio: _cardWidth / _cardHeight,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: _arrangedHand.length,
      itemBuilder: (context, index) {
        return _buildDraggableCard(index, isLocalTurn, phase);
      },
    );
  }

And each card is made draggable so you can move it around:

Widget _buildDraggableCard(int index, bool isLocalTurn, GamePlayState phase) {
    final card = _arrangedHand[index];
    final isSelected = _selectedCard == card;
    return Draggable(
      data: index,
      feedback: Material(
        color: Colors.transparent,
        child: _buildCardWidget(card, isSelected: isSelected, elevation: 12.0),
      ),
      childWhenDragging: Opacity(
        opacity: 0.3,
        child: _buildCardWidget(card, isSelected: false),
      ),
      onDragStarted: () {
        setState(() {
          _draggedIndex = index;
          _dragCard = card;
        });
      },
      onDragEnd: (_) {
        setState(() {
          _draggedIndex = null;
          _dragCard = null;
        });
      },
      child: DragTarget(
        builder: (context, candidateData, rejectedData) {
          return GestureDetector(
            onTap: isLocalTurn && phase == GamePlayState.playing
                ? () {
                    // ... selection logic ...
                    setState(() {
                      if (_selectedCard == card) {
                        _selectedCard = null;
                      } else {
                        _selectedCard = card;
                      }
                    });
                    // ...
                  }
                : null,
            child: _buildCardWidget(card, isSelected: isSelected),
          );
        },
        onWillAccept: (data) => data != null && data != index,
        onAccept: (draggedIndex) {
          _swapCards(draggedIndex, index);
        },
      ),
    );
  }

Draggable: Allows the user to pick up a card. We use feedback and a childWhenDragging as parameters.
DragTarget: Allows the card to be dropped onto another card to swap positions.

The "Winning" Logic

This was the hardest part. How do we know if a player has won? They need to form sets or runs. I created a MeldController that uses a backtracking algorithm to check if all the cards in a hand fit into a valid melds.


  bool isAllMeldsExact(List cards, {bool allowPairs = false}) {
    if (cards.isEmpty) return true;
    if (cards.length < 2) return false;
    // --- build candidate melds from current cards ---
    final candidates = >[];
    // sequences (same suit, consecutive, len >= 3)
    for (int k = 3; k <= cards.length; k++) {
      for (final g in _combinations(cards, k)) {
        if (isSequenceSameSuit(g)) candidates.add(g);
      }
    }
    // sets (3/4-of-a-kind, different suits)
    // ... (finding sets logic) ...
    // --- backtracking: try to cover ALL cards with disjoint melds ---
    final used = List.filled(cards.length, false);
    candidates.sort((a, b) => b.length.compareTo(a.length)); // try longer first
    bool dfs(int idx) {
      while (idx < cards.length && used[idx]) idx++;
      if (idx == cards.length) return true;
      final target = cards[idx];
      for (final m in candidates) {
        if (!m.contains(target)) continue;
        // ... check if meld can be used ...
        // ... mark used ...
        if (dfs(idx + 1)) return true;
        // ... backtrack ...
      }
      return false;
    }
    return dfs(0);
  }

And that's it!

Next I will be showing you how we can use Firebase and flutter_ai as a package to make our opponent more intelligent.

Stay tuned!

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

Community Contribution [2021-2024]

Umme Faatimah-Iz-Zaahra Mujore — Sun, 23 Nov 2025 13:13:43 GMT

As GDSC Lead (2021/2022)

- Mentor students
- Organise technical events so as to bridge the bap between theory and practice.
- Manage a team.

Successful events/Workshops:
- Zero to Hero (speaker: myself):
https://gdsc.community.dev/events/details/developer-student-clubs-nigerian-army-university-biu-presents-zero-to-hero/
- Flutter workshop organised by GDSC in collaboration with Oracle Club at UoM
- Python Workshop
- Introduction to Deep Learning
- Design Thinking Workshop organised by WTM in collaboration with GDSC
- Mastering Soft Skills - Speaker Session - I was among the panelists.
- Solution Challenge - global competition that was organised.
- Cybersecurity Awareness Workshop
- MDash Battle organised by Oracle Club in collaboration with GDSC
- SalesForce Workshop
- Web Development workshop
- Introduction to Git - conducted by myself
- Introduction to Flutter - conducted by myself (invited by another gdsc): https://gdsc.community.dev/events/details/developer-student-clubs-mcpherson-university-presents-introduction-to-flutter-1/
- Flutter Live coding - conducted by myself (invited by another gdsc): https://gdsc.community.dev/events/details/developer-student-clubs-mcpherson-university-presents-introduction-to-flutter-2-learning-to-code-using-flutter/
- Getting started in tech - conducted by DeepAfrica https://www.youtube.com/watch?v=cIldVnA6p3k

As GDSC Mentor [2022-2024]

Mentored people on:
- JAVA (current)
- Flutter (current)

Invited to speak on:
- Spoke at GDSC Lead's 2022-2023 onboarding session on "How to make an impact as a Lead"
- Spoke on How to change the world using some of the programming languages
- Mentor about 17 GDSC Lead Alumnis for Getting Started in Data Structures: Lists, Sets, Maps, Stacks, Queues, Trees
- Spoke on Leveraging Tech Communities as a student at GDSC FUNAAB
- Spoke on Starting out in Tech (Mobile App Development) at GDSC ADUN
- Spoke on what is GDSC on Info Session at GDSC Muni
- Spoke on Impact of GDSC at GDSC ACity
- Spoke on Info Session at GDSC UOM
- Spoke on Info Session at GDSC Academic City College
- Spoke on Info Session at GSDC Technical University of Mombasa
- Spoke on Info Session at GDSC Ndejje University

Speaker session - 2023:
https://zaahramujore.com/what-i-have-been-doing-in-2023/

References:
- https://gdsc.community.dev/events/details/developer-student-clubs-the-federal-polytechnic-ede-presents-the-impact-of-tech-in-the-ecosystem/
- https://gdsc.community.dev/events/details/developer-student-clubs-federal-university-of-agriculture-abeokuta-presents-20222023-info-session/
- https://gdsc.community.dev/events/details/developer-student-clubs-admiralty-university-of-nigeria-presents-gdsc-adun-info-session-starting-out-in-tech/
- https://gdsc.community.dev/j/wuetj3ju9dtbd/
- https://bit.ly/gdscfulafia_info
- https://gdsc.community.dev/events/details/developer-student-clubs-university-of-mauritius-presents-info-session/
- https://bit.ly/GDSC-ACity_info-session

I was also the Sub Saharan Africa Mentor During 2022/2023 where I helped build leads.

From Design to Code – Building Agentic AI into “Your BMI Buddy” with Flutter and Gemini [Part 3]

Umme Faatimah-Iz-Zaahra Mujore — Sat, 08 Nov 2025 16:11:43 GMT

At Women in Tech Africa, Mauritius Chapter, I spoke about "Building Agentic Applications Using Flutter and Gemini".

During my session, I explained the core concepts of agents, their evolution into AI agents, and how Agentic AI differs from traditional AI. We also explored the idea of Generative AI Agents as they are intelligent models that can reason, decide, and act within defined boundaries.

I even demoed a fun example where the agent could decide whether to change a button color in an app based on context, and reason. That was a small but powerful example of an AI that doesn’t just follow instructions, but thinks in context.

In this article, we’ll explore another side of Agentic AI — this time, through a friendly wellness coach that can guide users based on their BMI.
(If you missed my talk, you can catch the full session on my YouTube channel!)

Meet your Agentic BMI Buddy 💙

Ever wondered what it would be like to have a wellness coach right inside your app? One that takes into account your height, weight, age, sex, and more, and then gives you short, actionable advice?

That's exactly what Your Agentic BMI Buddy does.

After you calculate your BMI, your virtual coach will

Offer a few personalised tips,
Propose weekly goals
Remind you to stay on track (if you ask it to)

Setting up Firebase

Before diving into the AI part, we will connect our app to Firebase since we will be using Firebase AI Tools to enable our agentic features.

Step 1: Login and Configure your project by running the following commands:

firebase login
flutterfire configure

Firebase CLI will ask you to either create a new project or select an existing one. You can choose the platforms you need, for example; Android, IOS, Web or Windows.

Once done, each platform will be assigned an App ID, and a firebase_options.dart file will be automatically generated inside your lib/ folder.

Step 2: Add dependencies in pubspec.yaml

Here is the list of packages we will be using

dependencies:
  firebase_core: ^latest
  firebase_ai: ^latest   
  hive: ^latest
  hive_flutter: ^latest
  gap: ^latest

Step 3: Initialise Firebase and Hive

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();
  await Hive.openBox('profile');
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

We initialise the widget binding so the framework can talk to native OS.
Then we setup Firebase with platform-specific configurations using the DefaultFirebaseOptions.

And that's it! Your Firebase Project is ready and the app is connected. Let us move into the fun part.

The agent (how it thinks and act)

We start by creating an instance of the Gemini Model 2.5 Flash model through Firebase AI and expose a few tools so it knows what it's allowed to do. [For development purposes, we will be using Gemini Developer API, but in production, it is best to use vertexAI]

late final GenerativeModel _model = FirebaseAI.googleAI().generativeModel(
  model: 'gemini-2.5-flash',
  systemInstruction: Content.text('''
    You are "Your BMI Buddy"—a friendly, concise wellness coach.
    Always personalize using provided context. Avoid diagnoses/medications/calorie targets.
    When BMI very low/high, gently suggest seeing a clinician.
    Outputs must be short, practical, and culturally neutral.
  '''),
  tools: [Tool.functionDeclarations([
    setUserContextTool,
    storeGoalTool,
    storePlanTool,
    logDailyTool,
    scheduleReminderTool,
  ])],
);

The systemInstruction defines the agent's role; giving our application an intelligent layer that can reason, respond and perform contextual actions.

GenAI Limitations

Since Generative AI models can access external information, we use function calling to call external API or functions.

To implement this pattern:

write a function that provides the model with the information it needs.
create a function declaration for the model to know which function to use.
send all declared tools to the model.
provide the function response back to the model.

Tool Configuration

Tool configurations are defined in order to tell our model what it is allowed to do. For instance, we could request the agent to store our goals.

Function Declarations

Allows us to define our tool's api contract.

final storeGoalTool = FunctionDeclaration(
  'storeGoal',
  'Persist a single user-selected wellness goal.',
  parameters: {
    'goal_id': Schema.string(description: 'Machine id like "walk_20_min_5x"'),
    'goal_text': Schema.string(description: 'What the user chose/typed'),
  },
);

The Function Declaration takes a function name called storeGoal. It is given a description "Persist a single user selected wellness goal.". And it takes parameters; goal id and goal text.

Pushing contexts to the model

Whenever the user opens the coach, their profile data is pushed to the model. This ensures that the AI does not re ask for the same information.

Future pushContextToAgent() async {
  final ctx = getProfile().toJson();
  await chat.sendMessage(Content.text('''
    SYSTEM CONTEXT (do not ignore). Use this as the user's current profile.
    If "bmi_value" and "bmi_category" exist, DO NOT ask for height/weight again.

    ```json
    ${jsonEncode(ctx)}
  '''));
}

Handing Function Calls

If the model decides to call one of the functions, for example, storeGoal we can capture that call, perform the action, and then send back a confirmation using functionResponse.

 case 'storeGoal':
          final goalId = (call.args['goal_id'] as String?) ?? '';
          final goalTxt = (call.args['goal_text'] as String?) ?? '';
          if (goalId.isNotEmpty && goalTxt.isNotEmpty) {
            await saveGoal(goalId, goalTxt);
          }
          await chat.sendMessage(
            Content.functionResponse('storeGoal', {"ok": true}),
          );
          break;

The agent only suggests what to do (save a goal, create a reminder) and the Flutter app decides on how to persist this information.

Putting it all together

In order to make this application work properly, we will be prompting the user to enter his weight and height, then we calculate the BMI.

Once the BMI is computed, it is categorized using:

String bmiCategoryKey(double bmi) {
  if (bmi < 18.5) return 'underweight';
  if (bmi < 25.0) return 'healthy';
  if (bmi < 30.0) return 'overweight';
  if (bmi < 35.0) return 'obesity_class_1';
  if (bmi < 40.0) return 'obesity_class_2';
  return 'obesity_class_3';
}

The information is saved in the user's profile.

And we pass that BMI data to the model to get context-specific advice:

final tips = await _agent.adviseForBmi(
  bmi: _profile.bmiValue!,
  category: _profile.bmiCategory!,
);
setState(() => _aiTips = tips);

As a result, the agent returns some tips and weekly goals.

Saving goals

If I respond with “Save Goal 1”, the model calls:

storeGoal(goal_id, goal_text)

The app persists the goal locally using Hive. Later if i ask: "What is my goal for this week", the agent retrieves and restates my saved goal.

Scheduling reminders!

The agent can also set reminders!

I said: “Since I’ve to walk 3 times a week, send me a reminder on Monday, Wednesday and Friday at 5 PM.”

The agent replied:

So, I responded with: "yes, 10th, 12th, and 14th November "

And here is what was logged in my console.

 Schedule reminder: Time to Walk! @ 2024-11-10T17:00:00
flutter: Remember your 10-15 minute walk!
flutter: Schedule reminder: Time to Walk! @ 2024-11-12T17:00:00
flutter: Remember your 10-15 minute walk!
flutter: Schedule reminder: Time to Walk! @ 2024-11-14T17:00:00
flutter: Remember your 10-15 minute walk!

And... That was the agent in action!

I hope you liked it!.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 2]

Umme Faatimah-Iz-Zaahra Mujore — Fri, 31 Oct 2025 19:53:37 GMT

Welcome back to part 2 of turning design to code.

In part 1 of this series, we completed the HomeScreen for Your BMI Buddy.

In this article, we will be completing the Calculate and Result Screen, implement the BMI Logic and the Unit testing.

Let us dive right in!

Building the CalculatorScreen

The background shares the same gradient as the Home Screen. Therefore to avoid duplication, we will be refactoring our code into an extension.

I previously wrote an article on extension. Please feel free to check out the Link to learn more.

Creating a gradient extension

extension BackgroundGradient on BuildContext {
  BoxDecoration get backgroundGradient => BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.bottomRight,
      end: Alignment.topLeft,
      colors: [
        Color(0xFF0F2333),
        Color(0xFF247BA0),
        Color(0xFF189AE5),
      ],
      stops: [0.50, 0.90, 1.00],
    ),
  );
}

This extension adds a getter to the buildContext.

decoration: context.backgroundGradient

Setting up the structure

The calculator screen has 5 components

GreetingWidget
CustomTextFields (from Part 1)
CustomPrimaryButton (from Part 1)
EditProfileWidget
PointerWidget

Creating the GreetingsWidget

class GreetingsWidget extends StatelessWidget {
  const GreetingsWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          "Hi, Zaahra!",
          style: GoogleFonts.caveat(
            color: Colors.white,
            fontSize: 40,
            fontWeight: FontWeight.bold,
            letterSpacing: 0.40,
          ),
        ),
        Text(
          "Let's Calculate Your \nBMI",
          textAlign: TextAlign.center,
          style: GoogleFonts.inter(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.w500,
            letterSpacing: 0.40,
          ),
        ),
      ],
    );
  }
}

This widget welcomes the user and displays a subtitle "Let's calculate your BMI".

"Zaahra" will be later made dynamic, therefore the code will become "Hi, $name"
GoogleFonts.caveat gives a friendly, handwritten feel.

Adding our TextFields

We reuse our CustomTextFields from Part 1:

CustomTextFields(
   keyValue: Key("weight"),
   controller: weightController,
   onChanged: (String value) => setState(() {}),
   hintText: 'Weight',
 ),
Gap(24),
CustomTextFields(
   keyValue: Key("height"),
   controller: heightController,
   onChanged: (String value) => setState(() {}),
   hintText: 'Height',
 ),

Each field listens to the user input and updates the UI accordingly

Adding the Button

Once again, we reuse our CustomPrimaryButton made in Part 1:

CustomPrimaryButton(
 onTap: () => Navigator.push(
  context,
  MaterialPageRoute(
  builder: (context) => ResultScreen(),
   ),
  ),
 buttonName: 'Calculate BMI',
),

This button triggers the "Calculate BMI", navigating us to "Results Screen". However shortly we will change this functionality to calculate the BMI and pass the results to the Result Screen.

Sometimes users may want to change their details (like name or DOB).
Let’s create an EditProfileWidget that takes them back to the Home Screen.

class EditProfileWidget extends StatelessWidget {
  final VoidCallback onTap;
  final String buttonName;

  const EditProfileWidget({
    super.key,
    required this.onTap,
    required this.buttonName,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Row(
        children: [
          Icon(
            Icons.edit,
            color: Colors.white,
            size: 18,
          ),
          Gap(16),
          Text(
            buttonName,
            style: GoogleFonts.inter(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}

Example:

 EditProfileWidget(
    onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => HomeScreen(),
        ),
    ),
    buttonName: 'Edit Profile',
),

Creating the PointerWidget

Indicating us to enter our height and weight to calculate our BMI (it is just a fun way)

Here we will be using Positioned widget, in order to make this work, we will also have to wrap our SizedBox Widget with Stack.

Positioned(
  right: 16,
  bottom: 16,
  child: IgnorePointer(
    child: Image.asset(
      'assets/finger.png',
      width: 240,
      fit: BoxFit.contain,
    ),
  ),
)

Now that we are done with Calculate Screen, we are going to build the Result Screen.

Building the ResultScreen

The result screen uses the same background gradient as the other pages, so we’ll keep things DRY with our extension: decoration: context.backgroundGradient

Beyond that, Result Screen has some complexities. We will be drawing an arc and a wave in the background. We will use CustomPainter for both.

Building the Arc

I’ll keep this as approachable as possible and add extra links in the references later for deeper dives into custom painting.

CustomPaint(
  size: Size(arcWidth, 200),
  painter: ArcsPainter(
  bmi: 20,
  minBmi: 10,
  maxBmi: 40,
  ),
)

class ArcsPainter extends CustomPainter {
  final double bmi, minBmi, maxBmi;
  ArcsPainter({required this.bmi, required this.minBmi, required this.maxBmi});

  @override
  void paint(Canvas canvas, Size size) {
    final startAngle = math.pi;
    final sweepAngle = math.pi;
    final strokeWidth = 22.0;
    final center = Offset(size.width / 2, size.height);
    final radius = size.width * 0.55;

    final rect = Rect.fromCircle(center: center, radius: radius);

    // 1) BACKGROUND TRACK (behind the arc)
    final trackPaint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = strokeWidth + 4
      ..color = const Color(0xFF0B2534).withOpacity(0.35)
      ..maskFilter = const MaskFilter.blur(
        BlurStyle.normal,
        2.0,
      );

    canvas.drawArc(rect, startAngle, sweepAngle, false, trackPaint);

    final gradient = SweepGradient(
      stops: [0.0, 0.5, 1.0],
      startAngle: startAngle,
      endAngle: startAngle + sweepAngle,
      colors: [
        Color(0xFF24A056),
        Color(0xFFFCE700),
        Color(0xFFFC1300),
      ],
    ).createShader(rect);

    final arcPaint = Paint()
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.butt
      ..shader = gradient;

    canvas.drawArc(rect, startAngle, sweepAngle, false, arcPaint);

    final capR = strokeWidth / 2;

    // ---- compute arc endpoints ----
    final startPt = Offset(
      center.dx + radius * math.cos(startAngle),
      center.dy + radius * math.sin(startAngle),
    );

    final endPt = Offset(
      center.dx + radius * math.cos(startAngle + sweepAngle),
      center.dy + radius * math.sin(startAngle + sweepAngle),
    );

    canvas.drawCircle(
      startPt,
      capR,
      Paint()..color = const Color(0xFF24A056),
    );
    canvas.drawCircle(
      endPt,
      capR,
      Paint()..color = const Color(0xFFFC1300),
    );

    // ---- animated indicator (white knob) ----
    final t = ((bmi - minBmi) / (maxBmi - minBmi)).clamp(0.0, 1.0);
    final angle = startAngle + sweepAngle * t;

    final knob = Offset(
      center.dx + radius * math.cos(angle),
      center.dy + radius * math.sin(angle),
    );

    // ---- white knob ----
    canvas.drawCircle(knob, capR * 1.4, Paint()..color = Colors.white);
    canvas.drawCircle(
      knob,
      capR * 1.4,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2
        ..color = Colors.white.withOpacity(0.25),
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

For this,

We draw a semi circle starting from the left to the right. We compute this using the Rect.fromCircle
We then draw a stroke with a blur behind the main arc.
SweepGradient is used for the sole purpose of adding a gradient to the arc. This is applied to the arc using shader method.
It was a challenge making the arc rounded at the endpoints, which is why I decided to go with building "circles" to add at the endpoint by calculating their angles.
A white knob is used to indicate at what level the BMI is.

Moving on to the WavePainter

To match the original design more closely, I drew a custom bezier wave behind the content. This bit is mostly visual math—so I’m keeping it lightweight here and will point to references later.

class WavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final w = size.width;
    final h = size.height;

    final path = Path()
      ..moveTo(0, h * 0.28)
      ..cubicTo(
        w * 0.18,
        h * 0.22,
        w * 0.58,
        h * 0.60,
        w * 0.82,
        h * 0.40,
      )
      ..cubicTo(
        w * 1.18,
        h * 0.10,
        w * 1.02,
        h * 0.38,
        w * 1.08,
        h * 0.52,
      )
      ..lineTo(w * 1.08, h)
      ..lineTo(0, h)
      ..close();

    final fillShader = const LinearGradient(
      begin: Alignment.bottomCenter,
      end: Alignment.topCenter,
      colors: [
        Color(0xFF64B8FF),
        Color(0xFFD9ECFF),
      ],
      stops: [0.0, 1.0],
    ).createShader(Rect.fromLTWH(0, 0, w, h));

    final fill = Paint()
      ..shader = fillShader
      ..style = PaintingStyle.fill;

    canvas.drawShadow(path, Colors.black.withOpacity(0.45), 22, false);

    canvas.drawPath(path, fill);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

The important parts are:

We start at the left, about 28% from the top
Then use 2 cubicTo to make the Bezier segment. We basically need to add "control points" in order to make this wave possible.
Then we will the background with a gradient color using LinearGradient.
shouldRepaint is used in case there is a need to repaint this background.

Let's wire these custom painters properly inside the ResultScreen.

We will layer the wave behind everything and draw the arc on top.

A stack widget is perfect here since the bottom layer uses Positioned.fill with a CustomPaint for the wave, and the top layer places the arc where we want it.

Positioned.fill(
  child: CustomPaint(
  painter: WavePainter(),
  ),
),

Positioned.fill keeps the wave perfectly stretched behind the page
Stack, fit expand, ensures the stack matches the screen bounds without extra containers

 Positioned(
  top: topInset,
  left: (size.width - arcWidth) / 2,
  child: TweenAnimationBuilder(
  tween: Tween(begin: 0, end: 23),
  duration: Duration(milliseconds: 900),
  curve: Curves.easeOutCubic,
  builder: (context, animatedBmi, _) {
    return CustomPaint(
      size: Size(arcWidth, 200),
      painter: ArcsPainter(
        bmi: bmiResult,
        minBmi: 10,
        maxBmi: 40,
        ),
      );
    },
  ),
),

And that's basically it for the UI portion.

Time to make this application functional!

We will start by creating Calculator that handles the logic for us. This class includes methods; parse(), bmiCalc(), and displayBMI().

class Calculator {
  const Calculator();

  double? parse(String text) {
    if (text.trim().isEmpty) return null;
    return double.tryParse(text.replaceAll(',', '.'));
  }

  double? bmiCalc(double? weight, double? height) {
    if (weight == null || height == null || height <= 0) return null;
    //check if height is in m or cm
    final convertedHeight = height > 3 ? height / 100 : height;
    return weight / pow(convertedHeight, 2);
  }

  double? displayBMI(String weightText, String heightText) {
    final weight = parse(weightText);
    final height = parse(heightText);

    if (weight != null && height != null) {
      var result = bmiCalc(weight, height);
      return result;
    }
    return -1;
  }
}

Basically, it has several methods.

parse checks if the input is empty or invalid. It then converts the numbers. For example if "70" is entered, the method will convert it to "70.0", or if "30,2" is entered, it will be converted to "30.2".
bmiCalc ensures that both the weight and the height are valid before calculating the BMI. It even checks whether height is meters or centimeters.
displayBMI is another method which calls the others, and returns the final BMI result to be displayed on the screen.

Once this logic is created, we call it inside of our CalculateScreen. Whenever a user taps on the "calculate BMI" button, the displayBMI is triggered, and the result is pushed to the ResultScreen as follows:

CustomPrimaryButton(
  onTap: () {
    // Calculate the BMI, then push to the result screen.
    final calc = const Calculator();
    final bmiResult = calc.displayBMI(
      weightController.text,
      heightController.text,
    );

    if (bmiResult == -1) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text(
            'Please enter a valid weight and height.',
          ),
        ),
      );
      return;
    }

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ResultScreen(
          bmiResult: bmiResult,
        ),
      ),
    );
  },
  buttonName: 'Calculate BMI',
);

In Result Screen, we simply accept the "bmiResult" in the constructor

final double? bmiResult;

const ResultScreen({
  super.key,
  required this.bmiResult,
});

And there you go...! That was the logic part done! :D

Unit tests for Calculator logic.

Unit tests ensures our logics work correctly before wiring it into the UI. We will use the test package to validate each method.

import 'package:flutter_bmi_calculator/calculator.dart';
import 'package:test/test.dart';

void main() {
  group('parse', () {
    test("Parsing value returns 4.9 if ',' is used", () {
      final calculator = Calculator();

      final result = calculator.parse("4,9");

      expect(result, 4.9);
    });

    test("Parsing value returns 5.1 if '.' is used", () {
      final calculator = Calculator();

      final result = calculator.parse("5.1");

      expect(result, 5.1);
    });

    test("If height/weight is empty", () {
      final calculator = Calculator();

      final result = calculator.parse("");

      expect(result, isNull);
    });

    test("If height/weight has whitespace", () {
      final calculator = Calculator();

      final result = calculator.parse("   ");

      expect(result, isNull);
    });

    test("If height/weight has non numeric", () {
      final calculator = Calculator();

      final result = calculator.parse("xyz");

      expect(result, isNull);
    });
  });

  group("calculation", () {
    test("BMI Calculation; returns 2", () {
      final calculator = Calculator();

      final result = calculator.bmiCalc(8, 2);

      expect(result, 2);
    });

    test("BMI Calculation; returns 4", () {
      final calculator = Calculator();

      final result = calculator.bmiCalc(16, 2);

      expect(result, 4);
    });

    test("If height is 0", () {
      final calculator = Calculator();

      final result = calculator.bmiCalc(0, 2);

      expect(result, 0.0);
    });

    test("If height is 0", () {
      final calculator = Calculator();

      final result = calculator.bmiCalc(8, 0);

      expect(result, isNull);
    });

    test("If weight/height is 0", () {
      final calculator = Calculator();

      final result1 = calculator.bmiCalc(null, 2);
      expect(result1, isNull);

      final result2 = calculator.bmiCalc(8, null);
      expect(result2, isNull);
    });
  });

  group("Display", () {
    test("Display Correct BMI result; returns 2.0", () {
      final calculator = Calculator();

      final result = calculator.displayBMI("8", "2");

      expect(result, 2.0);
    });

    test("Display Correct BMI result; returns 4.0", () {
      final calculator = Calculator();

      final result = calculator.displayBMI("16", "2");

      expect(result, 4.0);
    });
  });
}

After running the test, all assertions pass successfully, confirming our logic work as expected.

I will write a separate article later that dives deeper into Flutter testing. ;)

Thank you for reading! I hope you enjoyed this article :D.

Up next: We will be integrating AI Agents in the Application.

References

From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 1]

Today, I’m excited to introduce my very own design — Your BMI Buddy! Honestly, it wasn’t easy getting this done, and I have to say — hats off to all the designers out there! This may not be the most perfect design yet, but I’m still learning and trying

fz3hra's blogUmme Faatimah-Iz-Zaahra Mujore

Dart extension method in Flutter projects

What is the Dart Extension Method? The Dart Extension Method allows us to add functionality to existing libraries and classes. Extensions can not only define methods but also other members such as getter, setters, and operators. syntax for Dart Extension Method: extension ? on

fz3hra's blogUmme Faatimah-Iz-Zaahra Mujore

CustomPaint class - widgets library - Dart API

API docs for the CustomPaint class from the widgets library, for the Dart programming language.

Dart API

Flutter CustomPaint Tutorial

Master custom graphics with the Flutter CustomPaint tutorial.

DhiWise

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

Flutter Merge Threads #BreakingChanges

Umme Faatimah-Iz-Zaahra Mujore — Tue, 28 Oct 2025 17:17:32 GMT

In older versions, Flutter ran multiple threads to keep things smooth:

UI Thread → where your Dart code runs.
Raster Thread → where the engine turns that UI into pixels.
These two worked in sync to render frames efficiently.

Alongside them, Flutter also had the Platform Thread, which runs native code (Swift on iOS or Kotlin/Java on Android).

Every time Flutter needed to talk to these threads — Dart ↔ native, it caused problems.

Therefore, Platform Channels were built for the transmission of messages between the threads and languages.

You’d often use the Pigeon package to define the interface between Dart and native, but since platform calls are synchronous while Dart Futures are asynchronous, it got… complicated. Every payload had to be serialized, and every call had to bounce between threads and languages.

What’s Changing Now

With Flutter 3.35, the engine is getting smarter.
All Dart code is being migrated onto the main Platform Thread, bridging the gap between Dart and native more directly.

This allows FFI (Foreign Function Interface) to preserve type safety while calling native Swift or Kotlin code, no more fragile serialization back-and-forth.

The migration is rolling out in two phases, and it’s not yet fully applied everywhere, but it’s happening fast.

What You Should Do

If you have custom logic running on the Platform Thread, it’s time to relocate it.
Because with the Flutter UI thread now merging into the platform thread, heavy computations could block your UI and break frame budgets.

Move expensive work to standalone isolates instead.

Example

Before the merge, we had to write asynchronous code even when the underlying native function was synchronous.
Flutter’s calls to those APIs had to go through a Platform Channel and therefore, had to be async.

// Old
Future getBatteryCharge();

Now, it is much simpler:

// New
double getBatteryCharge();

That’s right! No more async placeholder!
Since the call is now synchronous, there’s no need for:

Null checks
initState setup
Helper async wrappers
Even StatefulWidget in some cases!

TL;DR

Flutter’s Merge Threads is all about simplifying the bridge between Dart and native layers, cutting down async overhead, improving type safety, and letting the engine run closer to the metal.

Less thread hopping.
Less serialization.
More performance.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 1]

Umme Faatimah-Iz-Zaahra Mujore — Tue, 28 Oct 2025 10:18:11 GMT

Today, I’m excited to introduce my very own design — Your BMI Buddy!

Honestly, it wasn’t easy getting this done, and I have to say — hats off to all the designers out there! This may not be the most perfect design yet, but I’m still learning and trying to apply all the right design principles and guidelines — so bear with me.

Let’s skip the design talk for now and move straight into the code.

The sample project

You can find the sample project right here.

The starter project with assets

I've set up a starter branch where all the required assets are already included in the new app, so you won’t have to worry about setting those up manually.

Normally, images and content would come from a backend, but for this tutorial, we’ll focus on:

Building the UI
Writing the logic
Running some unit tests (already included)
Integrating an AI Agent

Our app is composed of three main screens:

HomeScreen
CalculatorScreen
ResultScreen

Building the Home Screen

Okay let us get started with our home screen.

You’ll notice that the background has a gradient color effect.
Here are the colors I used:

0xFF0F2333

0xFF247BA0

0xFF189AE5

We’ll create this gradient using the DecoratedBox widget, which allows us to apply a LinearGradient directly.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomRight,
              end: Alignment.topLeft,
              colors: [
                Color(0xFF0F2333),
                Color(0xFF247BA0),
                Color(0xFF189AE5),
              ],
              stops: [0.50, 0.90, 1.00],
            ),
          ),
          // TODO: build the screen
          // child: Container(),
        ),
      ),
    );
  }
}

To achieve this gradient background:

The entire screen is wrapped inside a SizedBox with its width and height set using MediaQuery.of(context).size.width and MediaQuery.of(context).size.height.
Inside it, we use a DecoratedBox with a BoxDecoration that includes a LinearGradient.
The LinearGradient defines where the color begins and ends (bottomRight to topLeft), the list of colors, and their positions (stops).

Setting up other structures

To keep our code organised, we will create a separate widget called HomeContent() instead of placing everything inside HomeScreen().

An alternative would be to create a helper method within the same class, but that approach can lead to unnecessary widget rebuilds, which affects performance.

Our design has three main components:

Logo
TextFields
Primary Button

Let’s define these as separate widgets.

class HomeContent extends StatelessWidget {
  const HomeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 72.0,
        horizontal: 32,
      ),
      child: Column(
        children: [
          // LogoWidget
          // CustomTextFields
          // CustomPrimaryButton
        ],
      ),
    );
  }
}

class LogoWidget extends StatelessWidget {
  const LogoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class CustomTextFields extends StatelessWidget {
  const CustomTextFields({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class CustomPrimaryButton extends StatelessWidget {
  const CustomPrimaryButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Now let us create these widgets one by one.

Creating the Logo

Our logo comes from the assets folder.
Here’s the widget for that:

class LogoWidget extends StatelessWidget {
  const LogoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      "assets/logo.png",
    );
  }
}

Don’t forget to include the assets in your pubspec.yaml file:

After adding this image, you need to run flutter pub get.

  assets:
    - assets/

Creating the textfields section

The TextField widget in Flutter is powerful and highly customizable.
Here’s how we’ll structure our custom version:

class CustomTextFields extends StatelessWidget {
  final Key keyValue;
  final TextEditingController controller;
  final ValueChanged onChanged;
  final String hintText;
  const CustomTextFields({
    super.key,
    required this.keyValue,
    required this.controller,
    required this.onChanged,
    required this.hintText,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      key: Key(keyValue.toString()),
      controller: controller,
      onChanged: onChanged,
      decoration: InputDecoration(
        hintText: hintText,
        hintStyle: GoogleFonts.inter(
          textStyle: TextStyle(
            color: Color(0xFF546A7B),
            fontSize: 14,
          ),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        filled: true,
        fillColor: Color(0xFFE8F1F2),
      ),
    );
  }
}

Our textfield takes a key, controller, onChanged, and decoration.

Key is required to be set because we are using this for our widget testing
The controller lets you manage text changes.
onChanged triggers whenever the user types.
The InputDecoration defines visual styles. In this case, a soft background color, rounded corners, and a light hint text.

Creating the primary button

class CustomPrimaryButton extends StatelessWidget {
  final VoidCallback onTap;
  final String buttonName;

  const CustomPrimaryButton({
    super.key,
    required this.onTap,
    required this.buttonName,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      clipBehavior: Clip.none,
      child: InkWell(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => CalculatorScreen(),
          ),
        ),
        child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: const Color(0xFF1B98E1),
            boxShadow: const [
              BoxShadow(
                color: Color(
                  0x33247BA0,
                ),
                offset: Offset(0, 5),
                blurRadius: 14,
                spreadRadius: 0,
              ),
            ],
          ),
          child: SizedBox(
            width: double.infinity,
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Text(
                  "Continue",
                  style: GoogleFonts.inter(
                    color: Colors.white, // make text solid white
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

While ElevatedButton is great, here we need a custom shadow and more flexibility.
Using InkWell inside a DecoratedBox gives us both. Full control over design and a ripple effect when tapped.
We’re using a simple navigation method with MaterialPageRoute, but you can easily swap this with more advanced routing later.

Bringing it all together

Now that we have built our HomeContent widget, let’s bring everything together inside the HomeScreen class.

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
  late TextEditingController nameController;
  late TextEditingController genderController;
  late TextEditingController dobController;

  String bmi = "";

  @override
  void initState() {
    super.initState();
    nameController = TextEditingController();
    genderController = TextEditingController();
    dobController = TextEditingController();
  }

  @override
  void dispose() {
    nameController.dispose();
    genderController.dispose();
    dobController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // var bmiResult = displayBMI();
    final calc = const Calculator();
    final bmiResult = calc.displayBMI(
      nameController.text,
      genderController.text,
    );

    void onAnyFieldChanged(String _) => setState(() {});

    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomRight,
              end: Alignment.topLeft,
              colors: [
                Color(0xFF0F2333),
                Color(0xFF247BA0),
                Color(0xFF189AE5),
              ],
              stops: [0.50, 0.90, 1.00],
            ),
          ),
          child: HomeContent(
            nameController: nameController,
            genderController: genderController,
            dobController: dobController,
            onChanged: onAnyFieldChanged,
          ),
        ),
      ),
    );
  }
}

HomeScreen needs to store and manage state as the user types.

We create 3 textfield controllers (nameController, genderController, dobController) to handle user input.
The initState() method runs once when the widget is inserted into the widget tree, allowing us to initialize the controllers.
The dispose() method is called when the widget is removed, ensuring we properly release memory and avoid leaks.
Whenever a field value changes, we call setState() (inside onAnyFieldChanged) so the UI updates immediately with the latest data.

And we are done for the HomeScreen!

Next, we’ll move on to building the calculator screen.

Learn more about Stateless/Stateful & Lifecycle

Understanding stateless widget [Flutter Edition - Part 1]

fz3hra's blogUmme Faatimah-Iz-Zaahra Mujore

[Flutter - part 2] Understanding Stateful Widget

Previously in my post about “understanding stateless” widget🔗 we saw how they are immutable configurations. But, have you ever wondered how your UI gets updated? Well, that’s exactly where Stateful Widget comes in. Stateful Widget By definition, a stateful widget is one that has a mutable state.…

fz3hra's blogUmme Faatimah-Iz-Zaahra Mujore

[Flutter] initState v/s didChangeDependencies methods

fz3hra's blogUmme Faatimah-Iz-Zaahra Mujore

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

When Dart Stops Formatting Your Code the Way You Want

Umme Faatimah-Iz-Zaahra Mujore — Thu, 16 Oct 2025 19:39:11 GMT

I have been noticing something odd for a while now. Whenever I save a Dart file, my code suddenly gets formatted, in a not very good way.

Here is what it looks like after saving:

And here is what it used to look like before:

Honestly, it is not just ugly; it also makes the code harder to read.

So, I started digging.

That's when I found out that this change came with Dart's update, which is around version 3.7.

The new formatter, no longer preservers trailing commas by default.

So.. What's the fix?

Luckily, Dart gives us a simple way to take back control.

We can run the following command in our project root to reformat all of our Dart files properly:

dart format .

But there is a small catch. You also need to tell the formatter to preserve trailing commas explicitly.

To do that, we add the following configuration in our analysis_options.yaml file:

formatter:
  trailing_commas: preserve

Once this is in place, dart format . will restore your preferred formatting style.

References

dart format

Command-line tool for formatting Dart source code.

How to Configure the Updated Code Formatter in Dart 3.8

Dart 3.8 introduced an updated formatter with various configuration options. Learn what’s new and how to prepare your codebase.

CODE WITH ANDREAAndrea BizzottoUpdated May 21, 20256 min read

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

[Dart] WildCard Variables

Umme Faatimah-Iz-Zaahra Mujore — Wed, 15 Oct 2025 21:26:26 GMT

Did you know that wildcard variables were introduced in Dart 3.7?

Let’s explore what they are and why you might want to use them.

So... What is a WildCard Variable?

A wildcard variable _ declares a local variable or parameter that is non-binding. It serves as a placeholder.

Where Can You Declare Wildcards?

At its core, a wildcard can appear in:

local declarations
function parameters
catch clauses
loop variables
and even generic types

A quick recap

Before Dart 3.7, we were writing functions like below to avoid name collisions

function A(_ , __, ___)

Now since Dart 3.7, we can simply writing it as follows:

function A(_, _, _)

To use it, make sure your SDK in pubspec.yml is set to 3.7 or above

environment:
  sdk: ^3.8.1

Why use `_`?

Wildcards are useful when you want to ignore values that you don’t need.
They tell the compiler: “Yes, I’m aware of this value, but I don’t need it.”

They can match any type, and they don’t create assignments or memory bindings for those values.

Common Uses

Destructuring records, or lists.

void main() {
  var (country, _, _) = record;
  print(country); // France is returned
}

var record = ('France', 'Orange', 'Car');

Declaring local variable

var _ = 10;

Loop Variables

for (final _ in [1, 2, 3]) {
  print('tick');
}

Catch Clause Parameters

try {
  throw Exception('error');
} catch (_) {
  print('Something went wrong.');
}

Generic Types

List<_> values = [];

What you need to know

Wildcards do not create variables that you can use later.

And that's it. On that note, I hope you learned something new!

References

Variables

Learn about variables in Dart.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

[Flutter - part 3] Passing Data Efficiently Across Widgets

Umme Faatimah-Iz-Zaahra Mujore — Wed, 15 Oct 2025 18:56:18 GMT

As our Flutter projects grow, passing and accessing data down the widget tree can quickly become cumbersome.

Let us take a simple example.

Imagine you have a Parent Widget that has a color property which a deeply nested Child Widget (E) needs to access.

Normally, you would have to pass this value through the constructors and build methods, of all intermediate widgets.

ParentWidget → WidgetB → WidgetD → WidgetE

WidgetB(color: color);
WidgetD(color: color);
WidgetE(color: color);

This approach is known as prop-drilling, and it leads to tight coupling between widgets. Every intermediate immediate becomes responsible for passing data it does not even use, and also, changes at the top may not tripper proper rebuilds at the bottom.

Since this is an issue, Flutter has provided us with Inherited Widget.

Inherited Widget allows us to easily propagate information down the widget tree.

Examples where it is used internally by Flutter widget is Theme, MediaQuery, and Navigator.

Example.

Let us create a simple project, using the following command:

flutter create PROJECT_name

In the main.dart, The following widget are defined

Parent Widget
Child WidgetA, WidgetB, WidgetC, WidgetD, and WidgetE

Here, we will be passing the property color down to E from the parent Widget. [Bad Example] - Without InheritedWidget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: ParentWidget(color: Color(0xFF6EA2FF)),
    );
  }
}

class ParentWidget extends StatelessWidget {
  final Color color;
  const ParentWidget({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          WidgetA(),
          WidgetB(color: color),
        ],
      ),
    );
  }
}

class WidgetA extends StatelessWidget {
  const WidgetA({super.key});

  @override
  Widget build(BuildContext context) {
    return WidgetC();
  }
}

class WidgetB extends StatelessWidget {
  final Color color;
  const WidgetB({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return WidgetD(color: color);
  }
}

class WidgetC extends StatelessWidget {
  const WidgetC({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class WidgetD extends StatelessWidget {
  final Color color;

  const WidgetD({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return WidgetE(color: color);
  }
}

class WidgetE extends StatelessWidget {
  final Color color;

  const WidgetE({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      width: 200,
      height: 200,
      child: Text("Test"),
    );
  }
}

We are prop-drilling the color from parent to widget B, to D, then E, and each of these widget are now dependent of one another, i.e, tightly coupled, as you can see.

To solve this issue, we will be using Inherited Widget.

According to Flutter, Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state.

Now, how does it work under the hood?

Inherited Widget, has a method called of which calls dependOnInheritedWidgetOfExactType in order to get the property from the build context.

Otherwise, we would have to call the context.inheritFromWidgetOfExactType for our descendants widget to gain access to color property in its build method. This is actually asking Flutter to go up the tree, starting from the build context, and to look for a widget that matches that type. And the of static method in the InheritedWidget simplifies that for us.

Good Example:

TestColorScope is created and placed at the top of the true so that all of its data is accessible to its descendants. Color is added as a field of TestColorScope.

class TestColorScope extends InheritedWidget {
  const TestColorScope({super.key, required this.color, required super.child});

  final Color color;

  static TestColorScope? maybeOf(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }

  static TestColorScope of(BuildContext context) {
    final TestColorScope? result = maybeOf(context);
    assert(result != null, 'No Color found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(TestColorScope oldWidget) => color != oldWidget.color;
}

TestColorScope have 2 methods, of and maybeOf which is called to check if a widget exists.

TestColorScope Widget, is wrapped with the Parent Widget so all descendants can access its colors.

class ParentWidget extends StatelessWidget {
  final Color color;
  ParentWidget({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TestColorScope(
        color: color,
        child: Column(children: [WidgetA(), WidgetB()]),
      ),
    );
  }
}

Widget E can now directly access the inherited color in its build method by calling TestColorScope.of(context).

class WidgetE extends StatelessWidget {
  const WidgetE({super.key});

  @override
  Widget build(BuildContext context) {
    final inheritedColor = TestColorScope.of(context);

    return Container(
      color: inheritedColor.color,
      width: 200,
      height: 200,
      child: Text("Test"),
    );
  }
}

Full Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: ParentWidget(color: Color(0xFF6EA2FF)),
    );
  }
}

class ParentWidget extends StatelessWidget {
  final Color color;
  ParentWidget({super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TestColorScope(
        color: color,
        child: Column(children: [WidgetA(), WidgetB()]),
      ),
    );
  }
}

class WidgetA extends StatelessWidget {
  const WidgetA({super.key});

  @override
  Widget build(BuildContext context) {
    return WidgetC();
  }
}

class WidgetB extends StatelessWidget {
  const WidgetB({super.key});

  @override
  Widget build(BuildContext context) {
    return WidgetD();
  }
}

class WidgetC extends StatelessWidget {
  const WidgetC({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class WidgetD extends StatelessWidget {
  const WidgetD({super.key});

  @override
  Widget build(BuildContext context) {
    return WidgetE();
  }
}

class WidgetE extends StatelessWidget {
  const WidgetE({super.key});

  @override
  Widget build(BuildContext context) {
    final inheritedColor = TestColorScope.of(context);

    return Container(
      color: inheritedColor.color,
      width: 200,
      height: 200,
      child: Text("Test"),
    );
  }
}

class TestColorScope extends InheritedWidget {
  const TestColorScope({super.key, required this.color, required super.child});

  final Color color;

  static TestColorScope? maybeOf(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }

  static TestColorScope of(BuildContext context) {
    final TestColorScope? result = maybeOf(context);
    assert(result != null, 'No Color found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(TestColorScope oldWidget) => color != oldWidget.color;
}

And that’s it! We’ve managed to decouple our widgets and make the data flow much cleaner with InheritedWidget.

References

InheritedWidget class - widgets library - Dart API

API docs for the InheritedWidget class from the widgets library, for the Dart programming language.

Dart API

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

[Flutter - part 2] Understanding Stateful Widget

Umme Faatimah-Iz-Zaahra Mujore — Mon, 13 Oct 2025 16:26:47 GMT

Previously in my post about "understanding stateless" widget🔗 we saw how they are immutable configurations. But, have you ever wondered how your UI gets updated? Well, that's exactly where Stateful Widget comes in.

By definition, a stateful widget is one that has a mutable state. It can store data that can change synchronously and throughout its lifetime.

Just like a StatelessWidget creates an Element called Stateless Elementwhich mounts the widget on the element tree, the same way Stateful Widget does something similar, but with an extra step.

Instead of creating a stateless element, the StatefulWidget creates a StatefulElement, which is then mounted on the element tree. After that, this element calls createState() to produce a State object.

1. createState()

Called when Flutter needs a fresh State object for your widget.
It links your immutable StatefulWidget with its mutable State.

2. initState()

This is the first method that runs inside the State class.
It’s used for initial setup — starting animations, fetching data, initializing controllers, or subscribing to streams.
Always call super.initState() first.

3. didChangeDependencies()

Called after initState() and again whenever any inherited dependencies (like Theme, MediaQuery, or Provider) change.
Perfect for cases where your widget depends on external context.

4. build()

Defines the widget tree that describes your UI.
This method can run multiple times (for example, after calling setState()).

5. setState()

Used to update the UI.
When something changes (like a counter value), you wrap that change inside setState(() { ... }).
This marks the widget as dirty, triggering a rebuild via the framework.

6. didUpdateWidget

Called when the parent rebuilds the widget with new parameters.
You can compare oldWidget and widget to detect changes in configuration.

7. dispose()

The final cleanup step.
Called when the widget is permanently removed from the tree.
Cancel timers, dispose controllers, and clean up streams here.
Always call super.dispose() at the end.

Example

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

As you can see, title and count are used in the widget. Title comes from the widget itself while _counter comes from the state object. The StatefulElement maintains a reference to its State, so both the widget’s data title and its changing state _counter can be accessed and displayed.

When you tap the FloatingActionButton, the _incrementCounter() function runs. Inside it, setState() updates _counter and tells Flutter to rebuild the widget.

When you call setState(), Flutter doesn’t immediately rebuild your widget tree.
Instead, it marks that widget’s element as dirty, meaning this part of the UI is out of sync with its current state and needs to be rebuilt.

Flutter keeps track of all the elements that are marked dirty.
Then, during the next frame, it efficiently rebuilds only those widgets, not your entire app.
After rebuilding, those widgets become clean again until another state change happens.

The updated value is then reflected in the UI.

If MyHomePage is rebuild by its parent, the title changes but the stateful element and stateful object remains the same. The state is preserved.

And that's it for this small article about Understanding Stateful Widget... I hope you liked it!

Coming Next: Part 3 - Inherited Widget used in Flutter.

References

StatefulWidget class - widgets library - Dart API

API docs for the StatefulWidget class from the widgets library, for the Dart programming language.

Dart API

All About Flutter

Learn Flutter Life Cycle, Learn Flutter App Life Cycle, Flutter initstate, Flutter stateful widget

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

[Dart]: Understanding Isolates

Umme Faatimah-Iz-Zaahra Mujore — Fri, 10 Oct 2025 20:24:54 GMT

As you may know, Dart is a Single Thread Language where operations are executed one at a time, one after the other, in a purely synchronous manner.

In other languages like C++, multiple threads can share the same memory and run whatever code you may want. However, in Dart, each thread has its own isolate within its own memory, and processes events independently.

How Dart Manages Execution Flow

To understand how Dart manage its sequence of operation, we will need to look within a Flutter application.

When a Flutter application starts, a new thread process is created and launched. This thread is the only thread you'll work with throughout your application.

There are 2 different types of threads that handle tasks:

MicroTask
Event Queue

MicroTask always runs first, and developers do not need to worry about its internal tasks since it is taken care for us.

When you call a future, the task is placed on an event queue once the Future completes.

After the main method runs, the Event Loop is executed.

This invisible process determines how and in what order your code executes, depending on the content of the MicroTask and Event Queue.

Key differences - MicroTask vs Event Queue

A MicroTask handle short internal actions such as disposing of a resource. After this is done, it will hand back to the Event Queue.

An EventQueue on the other hand, is used to reference operations that result from external events such as IO, gesture, drawing, streams, timers, or futures.

Future and Async Methods

Before diving into Isolates, Let us understand how Futures and Async methods works

A Future is a task that runs asynchronously and completes later.
After it is created, it is added to an internal array which is placed in the Event Queue.
While running, the Future's status remains incomplete, allowing the next lines of code to execute without waiting.
Async methods are built around Futures.
It runs synchronously, up to the first "await" keyword then pauses execution of the remaining codes of that method until the Future completes.

MultiThreading

Question: Can we run parallel codes in Flutter?

Answer: Yes, this is made possible by using "Isolates"

What is an Isolate?

As explained earlier, Dart code runs on a single thread called isolate. However, the major difference is that, isolates do not hang together. They only communicate to each other through messages sent over "ports", without sharing any memory

Each isolate has an event loop, which schedules asynchronous tasks to run.

Ways to create an Isolate

Through low-level solutions.

As explained earlier, Isolates do not share memory and communicate using messages sent over ports. Therefore, in order to make this work, we need to establish communication between the "Caller", and the new Isolate

A SendPort is used by an isolate to convey messages.
A ReceivePort is used by another Isolate to listen to those messages.
Both the Isolate and the caller, will reference this port for communication.

A simple scenario:

Create a Dart project that returns 'Hello World' using Isolates.

a. To create a Dart Project, use the following command

dart create project_name

After having created the project, you will notice 2 main folders, bin and lib.

Bin is where your main dart file lives
Lib is where you will be keeping your helper functions

b. Within the main method,

Create a temporary ReceivePort

final receivePort = ReceivePort();

then instantiate a new Isolate.
This Isolate, will be taking a function, and 2 parameters, a value, and sendPort for communication.

await Isolate.spawn(callBackFunction, (
    value: 'Hello World',
    sendPort: receivePort.sendPort,
  ));

Listen for incoming messages.

receivePort.listen((value) {
    print('Result: $value');
  });

Define the callback function

callBackFunction(({String value, SendPort sendPort}) data) {
  data.sendPort.send(data.value);
}

Full Code

void main() async {
  final receivePort = ReceivePort();
  await Isolate.spawn(callBackFunction, (
    value: 'Hello World',
    sendPort: receivePort.sendPort,
  ));
  receivePort.listen((value) {
    print('Result: $value');
  });
}

// isolate
callBackFunction(({String value, SendPort sendPort}) data) {
  data.sendPort.send(data.value);
}

It is best practice to dispose of Isolate when it is no longer needed.

void dispose(){
  isolate?.kill(priority: Isolate.immediate);
  isolate = null;
}

That's one way to writing this code.

Instead of manually managing ports and isolates, Flutter provides a convenient helper method called compute, which automatically handles message passing for you.
It’s ideal for offloading heavy computations to another isolate without manual setup.

And thats' it.

References

Isolates

Information on writing isolates in Dart.

About Me

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer

fz3hra's blog

The Evolution of My IT Career: 5 Years In

About Me

From Idea to Code - Building Rummy with Flutter - Part 2

But what if we could trade algorithms for intelligence?

What is an 'AI Agent'?

The Implementation

1. The Engine: EngineController

2. The Brain: AppAgent

3. The Coordinator: GameScreen

About Me

Optimistic Locking

Scenerio

What really happens now?

Why this is a problem in Production Systems?

How it works?

About Me

Community Contributions Summary (2024–2025)

Blog posts:

2024

2025

Events and Speaking Engagements

2024

2025

About Me

From Idea to Code - Building Rummy with Flutter - Part 1

The app and Sample Code

The app structure

Building the Home Screen

Building the Game Screen

About Me

Community Contribution [2021-2024]

As GDSC Lead (2021/2022)

As GDSC Mentor [2022-2024]

From Design to Code – Building Agentic AI into “Your BMI Buddy” with Flutter and Gemini [Part 3]

Meet your Agentic BMI Buddy 💙

Setting up Firebase

The agent (how it thinks and act)

Putting it all together

Saving goals

Scheduling reminders!

About Me

From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 2]

Building the CalculatorScreen

Creating a gradient extension

Setting up the structure

Creating the GreetingsWidget

Adding our TextFields

Adding the Button

Creating and Using the Edit Profile Widget

Creating the PointerWidget

Building the ResultScreen

Building the Arc

Moving on to the WavePainter

Time to make this application functional!

Unit tests for Calculator logic.

References

About Me

Flutter Merge Threads #BreakingChanges

What’s Changing Now

What You Should Do

Example

TL;DR

About Me

From Design to Code - Creating “Your BMI Buddy” with Flutter [Part 1]

The sample project

The starter project with assets

Building the Home Screen

Setting up other structures

Creating the Logo

Creating the textfields section

Creating the primary button

Bringing it all together

Learn more about Stateless/Stateful & Lifecycle

About Me

When Dart Stops Formatting Your Code the Way You Want

So.. What's the fix?

References

About Me

[Dart] WildCard Variables

Why use `_`?