Developing a Flutter application using AI

Here at Multimedia Vision we have a lot of experience creating mobile applications for both iOS and Android, but lately we have been focusing our attention on Flutter, a cross-platform framework that allows for a single codebase for multiple operating systems. Flutter has allowed us to reduce our development time and create applications that look and feel the same on every platform. In this article we will explain how we used an AI Code Editor that helped speed up development and reduced our workload significantly.

AI Code Editor

We as developers usually spend a lot of time just boilerplating code, debugging, testing different scenarios, which is costing ourselves and our partners considerable time and money. Therefore most of us use Cursor which is an IDE (Integrated Development Environment) that has artificial intelligence built into it. It takes a bit of time for the AI Agent to figure out your preferences and you have to write some of your own rules, but once that is done it it like having a junior to mid-level developer right at your fingertips. You tell it what libraries you're using, how it should structure the code to match your own style and what kind of architecture you're using and it's done. The AI will then take over these tasks and have them done in 30 seconds while it would take you 10 minutes at least. It also helped us fix some obscure bugs during development and was very useful while implementing eSIM functionality where the official documentation was a bit lacking.

Examples of our workflow

Here we'll give some examples on how you can also use AI effectively to speed up some of your repetitive tasks.

New pages

We use a navigation library called auto_router, which has a specific structure of defining it's pages and the routes that correspond to those pages. This is the prompt example used:

Create a new auto_router page called HelloWorld, add it to the list of all routes

The AI Agent will then go through the codebase, find some examples of how a page should look and we get the following:

hello_world_page.dart:

import  'package:auto_route/auto_route.dart';
import  'package:flutter/material.dart';
import  'package:my_application/common/widgets/page_wrapper/page_wrapper.dart';
import  'package:my_application/router/app_router.dart';

/// {@template hello_world_page}
/// A simple Hello World page for testing purposes.
/// {@endtemplate}
@RoutePage()
class  HelloWorldPage  extends  StatelessWidget {
/// {@macro hello_world_page}

const  HelloWorldPage({super.key});

@override
Widget  build(BuildContext context) {
    return  PageWrapper(
    ...

app_router.dart

...
import  'package:my_application/pages/hello_world/hello_world_page.dart';
...

@override
List<AutoRoute> get routes => [
    ...
    AutoRoute(
        page:  HelloWorldRoute.page,
    ),
    ...
];

And since we're using code generationg using the build_runner package, the AI will then prompt us to run the following command: dart run build_runner build --delete-conflicting-outputs. After this we're dona and can start using the new page in our application.

Without AI this would definitely take us at least five minutes, but here we are done in under one. And while it's doing that we are free to turn our attention elsewhere to more pressing matters.

Generating models and APIs from the OpenAPI specification

The API we use has an OpenAPI JSON definition which is being updated constantly as new features are added. Since we are using the Bloc state management (https://bloclibrary.dev/architecture/) our application is split into three layers:

1. Presentation Layer
2. Business Layer
3. Data Layer

This means that every API change will require a change in the Data Layer and the Business Layer. Thankfully using AI we can turn the JSON definitions into Dart classes instantly in both layers. However it is very helpful to already define a single Data Layer and Business Layer class so that the AI has a template on how to do the rest of them. The prompt can be as simple as: Compare the latest version of the OpenAPI json with the previous one and add the new routes and models. Check for changes to the existing models as well.. Every change therefore takes us a minute or so whereas it would take us 10 to 20 minutes to find the updates, create a Data Layer class, create a Business Layer class, add a transformation method to convert the Data Layer class into the Business one and vice-versa, add the new API routes, etc.

Optimize widgets

Sometimes you'll find yourself writing a widget that is 200, 300 or even more lines long. It's always better to separate this widget into multiple smaller one but doing it by hand is cumbersome and time consuming. This is where the AI comes in. Using a prompt like this: Break this widget down into multiple smaller ones. will do the trick. It will take care of all the necessary parameters that need to be passed down and will use the application's code style to do so.

Conclusion

The redesign of the prepaid application was extremely successful and the reception was very positive. We have found that Flutter was the correct choice because we could develop both the Android and iOS apps simultaneously in almost the same time it would take us to develop a single native application. The eSIM installation was a bit of a hassle but we got there in the end. The AI Code Editor was also a big help as it enabled us to more or less automate some tasks and it also helped us with fixing some of the bugs that arose during development. However always keep in mind that AI is your assistant and not a replacement for you. The code should be reviewed and make sure you check why the AI is doing what it's doing as you'll also learn a lot. Happy coding!

A small note, you can also watch this video if you're interested in more: https://www.youtube.com/watch?v=EsklFa3nkwA.