DEV Community: toykam

Stop Feeding Your AI Agents Fluff: Introducing API to MOJ Converter

toykam — Thu, 19 Feb 2026 17:14:14 +0000

🤖 The "Unstructured" Problem

We are living in the golden age of AI Agents. We want them to book flights, manage infrastructure, and interact with third-party services. But there's a major bottleneck: Context.

AI Agents (powered by LLMs) are incredibly smart, but they struggle with the same thing humans do—information overload.

When you point an agent to a standard API documentation page (like Swagger UI or Postman Documenter), you're asking it to:

Parse HTML layout.
Ignore navigation bars, footers, and CSS.
Understand which endpoints are relevant.
Piece together scattered parameters and schemas.

It's inefficient. It burns tokens. And often, the agent gets lost.

💡 Agents Crave Structure

Unlike a blog post or an e-commerce site where the content is the value, API documentation is about data structure. Agents don't need the marketing fluff about "how easy our API is." They need:

Path: /v1/users
Method: POST
Params: { "name": "string" }

They understand structured data (JSON) natively. So why are we feeding them HTML?

🛠 Solving It: API Doc to JSON

I realized that if I wanted my agents to be reliable, I needed a translation layer. Something that sits between the human-readable documentation and the machine brain.

So, I teamed up with @antigravity to build API to MOJ Converter.

What is MOJ?

Machine-Optimized JSON. It's a stripped-down, token-efficient format that prioritizes structural predictability over human readability.

Key Features

⚡️ Universal Ingestion: It supports Swagger/OpenAPI (v2, v3) and public Postman Collections.
🔍 Deep Scraping: It doesn't just read the page; it finds the underlying configuration. Hidden swagger-config.json? Nested Postman API calls? We handle that complexity for you.
🛡 Type Safety: It simplifies complex nested schemas into flat, predictable type definitions that LLMs can easily generate.
🎨 Developer Experience: Built with a sleek dark-mode UI, using Monaco Editor (the engine behind VS Code) for real-time verification.

🏗 The Stack

We built this using Next.js 14, TailwindCSS, and TypeScript.

One of the coolest technical challenges was the Ingestion Engine. Swagger UIs are often dynamically rendered single-page apps (SPAs). We had to build a robust scraper that:

Fetches the HTML.
Parses identifying scripts (like swagger-initializer.js).
Recursively resolves configuration URLs until it finds the actual Open API Spec.

For Postman, we reverse-engineered the structure of their public documentation pages to fetch the raw collection JSON directly from their gateway API, bypassing the heavy client-side rendering.

🚀 What's Next?

Right now, it's a web tool. But the vision is bigger.

We are currently building an API for the Converter. Imagine sending a POST request with a documentation URL and getting back the clean MOJ JSON instantly. You could plug this directly into your LangChain or AutoGPT pipelines to let your agents "learn" APIs on the fly.

👋 Try It Out

The tool is live and free to use:
👉 https://apidoctojson.vercel.app

Give it a spin with your favorite documentation link and let me know if it helps your agents work smarter, not harder!

Why Abstracting Business Logic from the Start Saves You Hours of Refactoring: A Lesson from Swapping GetX to GoRouter

toykam — Thu, 07 Nov 2024 20:16:20 +0000

In Software development, navigation is one of the most crucial parts of a user experience. So when I decided to switch my navigation from GetX to GoRouter, I thought it would be a simple swap—until I realized that navigation was directly referenced in every single screen of my app. What could have been a smooth transition turned into a challenge, and I quickly found myself wishing I had abstracted my navigation logic from the very beginning.

This experience taught me a valuable lesson about the power of abstraction in Flutter apps. In this article, I’ll walk you through why abstracting navigation functionalities early on is essential and how it could save you from hours of code refactoring in the future. Let's dive in!

The Problem: Tight Coupling with GetX Navigation

When I first built my app, I used GetX for navigation. It worked well, but all my navigation calls were scattered across individual screens. At the time, it felt natural to do Get.to() directly whenever I needed to move between screens. However, when I decided to transition to GoRouter for its powerful deep-linking capabilities, I realized this choice came at a cost: I had to replace Get.to() calls in every file where navigation happened.

If I had taken the time to abstract my navigation logic into a single service, swapping routing libraries would have been far simpler. But why, exactly, is abstraction so beneficial, and how can we make it work for our navigation needs?

Understanding the Power of Abstraction

Abstraction, in simple terms, is the process of separating implementation details from the main logic. In the case of navigation, it means centralizing routing logic in one place, separate from individual screens. This approach allows us to modify or swap the routing library without touching every screen component directly.

Let’s look at the key benefits:

Maintainability: With navigation logic centralized, we only need to make updates in one place, keeping our code more organized and manageable.
Flexibility: When it comes to swapping routing solutions, abstraction allows for seamless transitions by updating just the navigation service.
Separation of Concerns: Screens stay focused on UI logic, and routing is handled in one centralized service, creating a cleaner codebase.

Implementing a Navigation Service in Flutter

So, how can we apply this in a Flutter app? Let’s start by creating a simple NavigationService that abstracts our routing logic.

Step 1: Define the Abstract Class

Define an abstract class, NavigationService, with essential navigation methods like navigateTo, goBack, and replaceRoute.

abstract class NavigationService {
  void navigateTo(String route, {Map<String, String>? params});
  void goBack();
  void replaceRoute(String route, {Map<String, String>? params});
}

This abstract class will serve as the blueprint, and each router-specific implementation will need to follow it.

Step 2: Implement the NavigationService for Each Router

Here’s an implementation of NavigationService using GoRouter.

GoRouter Implementation

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class GoRouterNavigationService implements NavigationService {
  final GoRouter _router;

  GoRouterNavigationService(this._router);

  @override
  void navigateTo(String route, {Map<String, String>? params}) {
    _router.go(route, extra: params);
  }

  @override
  void goBack() {
    _router.pop();
  }

  @override
  void replaceRoute(String route, {Map<String, String>? params}) {
    _router.pushReplacement(route, extra: params);
  }
}

GetX Implementation

import 'package:get/get.dart';

class GetXNavigationService implements NavigationService {
  @override
  void navigateTo(String route, {Map<String, String>? params}) {
    Get.toNamed(route, arguments: params);
  }

  @override
  void goBack() {
    Get.back();
  }

  @override
  void replaceRoute(String route, {Map<String, String>? params}) {
    Get.offNamed(route, arguments: params);
  }
}

Step 3: Set Up Dependency Injection

Now, we introduce Dependency Injection (DI) using the get_it package to decide which navigation service to use. This will allow us to swap between different router libraries (like GoRouter or GetX) without changing the rest of the app’s code.

To get started, first add get_it to your pubspec.yaml:

dependencies:
  get_it: ^7.2.0

Then, set up DI in your app initialization:

import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void setupNavigationService() {
  // if you want to use GoRouter
  getIt.registerSingleton<NavigationService>(GoRouterNavigationService());
  // if you want to use GetRouter
  getIt.registerSingleton<NavigationService>(GetXNavigationService());
}

Step 4: Initialize DI in main.dart

In your main.dart, call the dependency injection (get_it) initialization function:

void main() {

  setupNavigationService();

  runApp(MyApp());
}

Step 5: Using the NavigationService in Your App

Now, when you need to navigate, you simply retrieve the NavigationService from get_it:

import 'package:get_it/get_it.dart';

class SomeScreen extends StatelessWidget {
  final NavigationService _navigationService = GetIt.instance<NavigationService>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _navigationService.navigateTo('/someRoute');
          },
          child: Text('Navigate'),
        ),
      ),
    );
  }
}

This way, you don’t have to worry about the routing logic inside your individual screens. Instead, you rely on the abstract NavigationService that points to whichever routing library you're using at the moment.

The Benefits in Action: A Cleaner, More Scalable Codebase

By using DI, I can easily switch between GoRouter and GetX without touching the screens. This keeps the app modular, flexible, and easy to maintain. Want to change the navigation library in the future? Just update the DI configuration.

Conclusion: The Value of Early Abstraction

If I had abstracted navigation from the beginning, I could have easily swapped between routing libraries without major changes. This lesson taught me the importance of abstraction not only for navigation but across all layers of an app. It keeps the code flexible, testable, and maintainable. So, if you’re starting a Flutter app, consider abstracting navigation—and other core features—from the start to save time in the long run.

Now, I’d love to hear from you! Which part of your app’s business logic are you planning to abstract next? Or, if you’ve already implemented abstraction elsewhere in your app, how did you go about it? Drop a comment below and share your experience—I’d love to learn from your approach!

My Journey into Nested Functions in Dart: From Curiosity to Clarity.

toykam — Sun, 03 Nov 2024 12:58:10 +0000

While scrolling through Stack Overflow questions one day, I stumbled upon a piece of code that used something called a "nested function." Although I'd seen similar code structures before, I hadn't yet explored the concept of nesting functions in Dart, and I was intrigued.

Determined to learn more, I dove into a hands-on experiment with DartPad and consulted ChatGPT, which provided a thorough explanation. Here, I’ll share my journey of discovery, including what I learned about nested functions, how they can be used effectively, and a real-life example of where it is applicable.

The Stack Overflow Question That Sparked It All

The Stack Overflow post was a bit over my head at first, mainly because it introduced nested functions without much context. I’d used functions plenty of times but hadn’t thought about why or how one function could exist within another. Intrigued by the structure, I realized it was time to understand this concept more deeply.

First Steps: Experimenting on DartPad

To get a hands-on feel for nested functions, I opened DartPad and started with a simple example:

This example illustrated the basic setup: outerFunction contained another function, innerFunction, which was only accessible within the outer function. Running the code confirmed that the inner function would print its message only when called inside outerFunction.

Turning to ChatGPT for Insight

Still curious about practical applications and the inner workings of nested functions, I turned to ChatGPT for a deeper explanation. Here’s what I learned:

What Are Nested Functions?

Nested functions are simply functions defined within other functions. In Dart, they allow you to encapsulate functionality within another function, restricting access to only where it’s needed.

How to Use Them

Nested functions are especially useful when you need to create helper functions that assist the outer function but don’t need to be available outside of it. This encapsulation keeps the code tidy and prevents unnecessary exposure of functions that have limited relevance.

When to Use Nested Functions

Nested functions aren’t just a coding trick—they’re a practical solution for certain scenarios. Here are a few situations where using nested functions can make your code more efficient and readable:

Encapsulating Helper Logic:

When a function has multiple steps or requires small, task-specific operations, nested functions help keep that logic organized and close to where it’s used. These helper functions often don’t need to be available outside the main function, so nesting them keeps the code clean and maintains scope boundaries.

Avoiding Clutter in the Global Scope:

By limiting the scope of helper functions to where they’re needed, nested functions help reduce the number of global or class-level functions, which can make your code easier to maintain and read.

Improving Readability in Large Functions:

When a function grows too large, breaking down its logic into smaller, readable chunks can help. Nested functions allow you to segment the functionality within the main function without polluting the global or class-level namespace.

Avoiding Redundant Parameter Passing:

Nested functions can access the variables of their outer function without needing them as parameters, which simplifies the code. This can be particularly useful when multiple helper functions depend on the same set of variables.

Real-Life Use Case: Validating a Form in a Flutter App

One practical example of using nested functions is in a form validation scenario in a Flutter app. Imagine we have a form with multiple fields, and each field needs specific validation. Instead of writing separate validation functions in the global scope, we can create a single function that validates the form and nest each field’s validation logic within it. Here’s how it could look:

void validateForm(String username, String email, String password) {
  bool isFormValid = true;

  // Nested function to validate the username
  void validateUsername() {
    if (username.isEmpty) {
      print("Username cannot be empty.");
      isFormValid = false;
    } else if (username.length < 4) {
      print("Username must be at least 4 characters long.");
      isFormValid = false;
    }
  }

  // Nested function to validate the email
  void validateEmail() {
    if (!email.contains("@")) {
      print("Please enter a valid email address.");
      isFormValid = false;
    }
  }

  // Nested function to validate the password
  void validatePassword() {
    if (password.length < 6) {
      print("Password must be at least 6 characters long.");
      isFormValid = false;
    }
  }

  // Calling all validation functions
  validateUsername();
  validateEmail();
  validatePassword();

  // Final validation result
  if (isFormValid) {
    print("Form is valid.");
  } else {
    print("Form validation failed.");
  }
}

In this example, each field has its validation logic nested within validateForm. This approach keeps the form validation logic self-contained, making it easy to understand, maintain, and debug. The nested functions (validateUsername, validateEmail, and validatePassword) are only accessible within validateForm, encapsulating them within the context where they’re needed.

Final Thoughts

Experimenting with nested functions demonstrates their importance in organizing code effectively. Dart’s flexibility allows for clean and readable code, especially when small helper functions serve specific tasks, keeping the global scope uncluttered and improving maintainability. This approach is particularly useful in scenarios like form validation, where encapsulating logic within a larger function enhances tidiness and modularity. Understanding when and why to use nested functions adds a valuable tool to a developer's coding toolkit.

I’d love to hear from you! What are some other use cases for nested functions that you’ve encountered in your projects? Share your experiences and examples in the comments below. Your insights could help others discover new ways to implement this powerful concept in their own code!

Creating Receipt Sharing Functionality in a Flutter Fintech App

toykam — Thu, 31 Oct 2024 13:52:17 +0000

In today's digital landscape, sharing transaction receipts effortlessly is crucial for any fintech application. Users often need to share transaction details for various reasons, and implementing a receipt-sharing feature can greatly enhance their experience. In this article, we'll explore how to create this functionality in a Flutter app using the screenshot package to capture receipt widgets as images.

Step 1: Setting Up Your Flutter Environment

Make sure you have Flutter installed and create a new Flutter project:

flutter create fintech_app
cd fintech_app

Step 2: Adding Dependencies

Add the screenshot and share_plus packages to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  screenshot: ^3.1.0
  share_plus: ^4.0.10

Run flutter pub get to install the packages.

Step 3: Designing the Receipt Model

Define a simple model for a transaction receipt in a file called receipt_model.dart:

class Receipt {
  final String id;
  final double amount;
  final String date;
  final String recipient;

  Receipt({required this.id, required this.amount, required this.date, required this.recipient});
}

Step 4: Creating the Receipt Widget

Next, create a widget to display the receipt details and wrap it in a Screenshot widget. You can add this to your main widget or in a separate file:

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'receipt_model.dart';

class ReceiptWidget extends StatelessWidget {
  final Receipt receipt;
  final ScreenshotController screenshotController;

  ReceiptWidget({required this.receipt, required this.screenshotController});

  @override
  Widget build(BuildContext context) {
    return Screenshot(
      controller: screenshotController,
      child: Card(
        child: Column(
          children: [
            ListTile(
              title: Text("Receipt for ${receipt.recipient}"),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Amount: \$${receipt.amount}"),
                  Text("Date: ${receipt.date}"),
                  Text("ID: ${receipt.id}"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Step 5: Implementing the Share Functionality

To share the screenshot, first, you need to capture it and then share it as an image:

import 'package:share_plus/share_plus.dart';
import 'package:screenshot/screenshot.dart';

void shareReceipt(ScreenshotController screenshotController) async {
  final imageFile = await screenshotController.capture();
  if (imageFile != null) {
    // Share the image file
    Share.shareFiles([imageFile.path], text: 'Here is my receipt!');
  }
}

Step 6: Adding the Share Button

In your main widget or wherever you want to display the receipt, add a button to capture and share the receipt:

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'receipt_model.dart';
import 'share_receipt.dart'; // Import your sharing function

class ReceiptScreen extends StatelessWidget {
  final Receipt receipt = Receipt(id: '12345', amount: 50.0, date: '2024-10-31', recipient: 'John Doe');
  final ScreenshotController screenshotController = ScreenshotController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Receipt')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ReceiptWidget(receipt: receipt, screenshotController: screenshotController),
            ElevatedButton(
              onPressed: () => shareReceipt(screenshotController),
              child: Text("Share Receipt"),
            ),
          ],
        ),
      ),
    );
  }
}

Step 7: Testing the Functionality

Run your app, and when you click the "Share Receipt" button, it should capture the receipt as an image and present the sharing options on your device.

Conclusion

Adding receipt-sharing functionality to your fintech app using the screenshot package is a straightforward way to enhance user experience. By allowing users to capture and share transaction details as images, you provide a more flexible and visually appealing method for managing their finances.

Feel free to expand on this by adding features like formatting the image or customizing the receipt layout!.

We’d love to hear your thoughts! If you have a different approach to implementing receipt-sharing functionality in your Flutter app or project, please share it in the comments below!

Shorebird x Flutter: Some Things You Should Know.

toykam — Tue, 01 Aug 2023 14:46:54 +0000

Shorebird is a fantastic CLI tool designed to simplify the process of quickly pushing product updates or fixes to users without the hassle of waiting for app store reviews from platforms like Apple or Google. It's a handy tool that allows developers to make immediate changes and improvements to their apps, making life easier for both developers and end-users alike.

If you're a mobile Flutter developer, having Shorebird in your toolbox is a real asset. However, to make the most of this tool, there are some essential things you should know. These insights will help you understand how Shorebird operates and empower you to use it effectively in your development workflow.

Below are the things you must understand so as to use Shorebird effectively.

Shorebird Updater
Release Update
Patch Update

Shorebird Updater:

Shorebird Updater serves as the engine responsible for managing the download and installation of new updates (patches) on your users' devices whenever they become available. To ensure smooth functionality, the updater needs to be packaged with your application. As a result, during the installation process of Shorebird, a forked version of the Flutter engine will also be downloaded since it includes the necessary components of the updater. This ensures that your app stays up-to-date effortlessly, providing your users with the latest improvements and fixes without any delays.
Don't worry; we have a guide that explains how to set up Shorebird on your computer, here.
You can read more about this here

Release Update:

This scenario is comparable to when we execute the following commands in Flutter.

flutter build appbundle // for android
flutter build ipa // for ios

When you run the above command, the build/artifacts you obtain are the same as those you get from using the shorebird release [platform] command. However, there's an important distinction between the two processes. When you execute the shorebird release command, it employs a modified version of the Flutter engine (a forked version) to create the build/artifacts. The reason for using this modified version is to seamlessly integrate the updater we discussed earlier into the build. This ensures that the updater becomes an integral part of the final application package, enabling it to effectively handle updates on users' devices. In simple terms, the shorebird release command ensures that your app includes the necessary tools to manage updates smoothly for your users.
The build/artifacts obtained from shorebird release [platform] command must be distributed to your users so as to be able to get later patch update on that release.

shorebird release android // for android
shorebird release ios-alpha // for ios

All release obtained from the shorebird release [platform] command must be distributed to user (for example: uploading it to google play / apple store) as they are not available to them over-the-air.

Shorebird saves the compiled Dart code from your application in order to make updates smaller in size.

To view the list of your app releases, simply run the command shorebird releases list in your terminal or command prompt.

For a more detailed understanding of the process, you can refer to the documentation provided here.

Patch Update:

After you have published your release update, you have the capability to quickly push fixes/features, which are referred to as patches, to your users. Once these updates are ready, they will be automatically downloaded the moment your users open your app on their devices. The changes will then take effect the next time your users use your app.

To push a patch, simply run any of the commands below depending on the platform you want to push a patch for:

shorebird patch android // for android
shorebird patch ios-alpha // for ios

The command mentioned above will carry out the following action:

Builds the artifacts for the update.
Downloads the corresponding release artifacts.
Generates a patch using the diff between the release and the current changes.
Uploads the patch artifacts to the Shorebird backend
Promotes the patch to the stable channel.

That covers the basics, but it's not the entirety of what you need to know. There's more to explore and understand beyond what has been mentioned so far.

It's essential to keep in mind that not all updates you make to your app can be provided as patches using Shorebird. Shorebird's patch updates are specifically designed for changes that involve Dart code only (at least for now). If your update includes changes to assets or platform-specific code, you'll need to distribute it as a new release update instead as discussed above.

When you push a patch, you don't need to publish the store, as the patch will be available your users with the help of the updater packaged in to your app as discussed earlier.
You also don't need to update the version or build number

Thank you for taking the time to explore this article with us. We hope you found it informative and engaging. Your interest and support inspire us to continue creating valuable content for you.

If you have any questions, feedback, or suggestions, we would love to hear from you. Feel free to reach out and share your thoughts.

Shorebird x Flutter

toykam — Sun, 30 Jul 2023 17:02:51 +0000

In a world where app updates are the lifeblood of user experience, imagine a cloud service that empowers developers to seamlessly deliver the latest features and improvements directly to users' devices in real time.

Meet Shorebird – a groundbreaking cloud service designed to revolutionize app development and distribution. It offers developers an ingenious solution to effortlessly push app updates straight to users' devices, streamlining the update process and ensuring users always have access to the most cutting-edge features.

Requirements for Using Shorebird

Create an account on shorebird console
Install Shorebird on your computer:

Make sure to have git installed before you start the shorebird installation.

Windows

Set-ExecutionPolicy RemoteSigned -scope CurrentUser # Needed to execute remote scripts
iwr -UseBasicParsing 'https://raw.githubusercontent.com/shorebirdtech/install/main/install.ps1'|iex

MacOS

curl --proto '=https' --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash

When you install Shorebird, it will be placed in a special folder called ~/.shorebird/bin on your computer. This folder is added to your PATH, which means you can run Shorebird commands from any location in your terminal or command prompt.

Inside the ~/.shorebird/bin/cache/flutter directory, Shorebird also includes a modified version of Flutter and Dart. This customized version of Flutter has been enhanced with Shorebird's code push feature, allowing you to easily deliver app updates directly to users' devices.

The best part is that this modified Flutter and Dart installation won't interfere with any existing installations of Flutter and Dart that you may have on your system. You can continue using your usual versions of Flutter and Dart for other projects without any issues.

Once the installation is completed, Shorebird should be available on your computer. Run the command below to see the available commands shipped with shorebird:

shorebord help

"shorebird doctor" is a helpful command you can run to check if Shorebird and its components are properly installed and configured on your system. It ensures that everything is in place, so you can use Shorebird without any problems.

Login into your account: After you've completed Step 1 and Step 2, the next thing to do is to log in to your Shorebird account using the Shorebird Command Line Interface (CLI) we installed in Step 2. It's a straightforward process – just open your terminal or command prompt and enter the following command:

shorebird login

When you execute this command, Shorebird will generate a unique login URL. You should copy and paste this URL into your web browser. Once you open the URL, it will take you to a page where you can select the Google account that you used to create your Shorebird account.

Choose the correct Google account from the list, and you'll be instantly logged in to your Shorebird account through the CLI. The best part is that you won't be required to grant any additional access or permissions – it's a secure and seamless process.

Now you're all set to take full advantage of Shorebird's features and easily manage app updates and distribution for your projects!

Visit here to continue to explore the magical abilities of Shorebird

Now that we've completed the requirement step, it's time to look ahead to our next article. In the upcoming piece, we'll explore how we can use Shorebird to distribute app updates to our users effectively. This is where things get really interesting, as we'll get hands-on with Shorebird's features and see how it simplifies the entire app update process.

Throughout the article, we'll guide you through the different commands and functionalities that Shorebird offers. Together, we'll learn how to seamlessly deliver updates, ensuring our users always get the latest and greatest features.

Get ready for an exciting journey as we dive into the world of Shorebird and revolutionize how we handle app updates for our users. So, stay tuned, and let's take our app distribution game to a whole new level!

Thank You.

Getting Started As A Flutter Developer: Basic Things To Know.

toykam — Mon, 21 Nov 2022 19:04:08 +0000

Hi, I am Abdulkabir Toyyib, a mobile developer (Flutter). As a beginner in any tech stack, we can get stuck at the beginning of our learning phase because we don't know the basic things to learn to get started. In this article, I will be listing and explaining (will try my best) the basic things to know to get started as a flutter developer.
Yeah, let's get to it.

Below are the basic things to learn to get started as Flutter Developer.

Dart Programming Language
OOP (Object Oriented Programming)
The Flutter Widgets
Navigation
State Management
Working With External Data (API)

Dart Programming Language

Dart is a programming language created by google, it is the programming with which the Flutter framework is developed. So to learn Flutter, you must have a basic understanding of the dart Language.
To learn more about dart, visit any of the links below:

OOP (Object Oriented Programming)

As the name suggests, Object-Oriented Programming or OOPs refers to languages that use objects in programming, they use objects as a primary source to implement what is to happen in the code. Objects are seen by the viewer or user, performing tasks assigned by you. Object-oriented programming aims to implement real-world entities like inheritance, hiding, polymorphism, etc. in programming. The main aim of OOP is to bind together the data and the functions that operate on them so that no other part of the code can access this data except that function.
Flutter is based on OOP, basic understanding of OOP is required. To learn more about OOP in Dart, click here

The Flutter Widgets

Why are these widgets important, they are because that is what Flutter is all about. Widgets are key components required to build beautiful UIs in Flutter. Understanding the type, use and when to use these widgets is important to be a Flutter Developer. A flutter developer must be familiar with the Flutter widgets, what they are used for and how they work with each other

Examples of these widgets are Scaffold, Container, Text, Padding, SizedBox, etc, you can read more about these widgets on the flutter doc page, link below.
Flutter Widgets

Navigation

This requires you to learn how to move from point A to point B in a Flutter app, this is when you will learn about the Flutter Navigator. Like moving from the login screen to the home page after a user has successfully logged in to the app.

State Management

State management refers to the state of one or more user interface controls in a graphical user interface, such as text fields, OK buttons, radio buttons, etc. This is especially the case when the state of any particular message or form on the page depends on factors outside of the current page, or available throughout several pages. For example, consider a user who is logged in and sees the 'welcome' message on their first visit to any page, but not on subsequent page visits. Does each page manage the state of the user being logged in? That would create too much copy-pasting and duplication of code. Instead, you can use a state management pattern for handling messages (this may also include handling error messages and informative messages, along with the described welcome message) and then call this to receive a message as it becomes available.

To Manage State in a flutter project, you can use the following state management packages:

To learn more about state management in flutter, click here.

Working With External Data (APIs)

Yeah, working with external data will require you to use data that are not locally available in your App. This is where you learn how to get data from other services.
Examples are:

Getting the list of banks using the Paystack API
Getting the list of state and LCDA from an API
Getting a user's detail from a backend service.

To learn about how to communicate with API in Flutter click here

Thank you for reading, kindly share if this was helpful.
If you have more tips for beginners to get started with flutter, kindly drop them in the comment below.

Flutter: Getting Started.

toykam — Wed, 16 Nov 2022 23:32:43 +0000

Introduction: What is Flutter?

Flutter is a mobile app development framework that allows developers to create cross-platform apps. It uses the Dart programming language and provides a set of pre-built UI widgets, which are used to build the user interface of an app. Flutter also offers a set of core libraries for common tasks such as accessing the device camera or local storage, and it provides tools for building custom widgets.

What are the Benefits of Using Flutter?

Flutter is a mobile app development framework that is used to create native apps for both iOS and Android.

Flutter has many benefits, such as:

It is open source, which means it can be customized by anyone.
It has a large community of developers that are constantly contributing to it.
It is backed by Google, which means that it will always have the latest updates and features.
It provides a single codebase for both iOS and Android apps.
Its UI components are built with Material Design in mind, so they look great on any device.

How to Get Started with Flutter Development?

To get started with flutter, you can start with the resources below.

If you will prefer to watch an online video, below are the list of youtube channel I will recommend you start with.

Also to improve and fast-track your learning process, you can join flutter communities, below are the list (not all) of flutter communities you can join.

Flutter is bae, you should try it, 😊.

Thank you for reading, after trying it out, come give feedback on your experience, also if you have any questions on flutter, you can ask in the comment section below.

My Goals at Zuri Internship Program

toykam — Sun, 15 Aug 2021 07:30:20 +0000

Background

I am Abdulkair Toyyib Inuolaji, a software developer with 5 years of playing with code experience. Apart from UI development (Frontend), I am a full-stack developer, from backend to backend. I prioritize functionality to UI, that's why I love backend development a lot. I have always wanted to do learn UI development, but all I see online is the theory and principles of design, then I found the Zuri Internship Program, and I applied, then was selected, and here is my first task.

Zuri

There are 10 stages in the Zuri Internship Program starting from stage 1, participants who can graduate from stage 1 to 10 within 8 weeks will be select for an internship program. Here is my first task to move to stage 2. To know more about the Zuri Internship Program, click here.

My Goals at Zuri

At the end of the 8 weeks program with Zuri, I should be able to develop a complex mobile app UI using flutter, with complex animations and user experience interactions.
I want to have a network of co-developer who can work together to develop solutions, as the saying, 'Your network is your net worth'.

So Help Me God.

Do you want to learn Mobile App Development using flutter, UI development using figma or web development? these tutorial below will get you started.

Flutter Tutorial

Figma Tutorial

Web Development Tutorial

Congratulations you have reached the end of this article. I am very happy ☺️☺️☺️ you got here. Feel free to leave a comment below, also advice is also welcome for improvement as this is my first article.