When developing a mobile app, developers aim to centre their efforts on coding elements that directly bring value to users, while minimizing the quantity of "glue code"— the necessary but non-functional code which simply links different components together. Virtually all apps need to interact with a backend, typically through a series of REST APIs. In this case, the client code of the app serves as the glue that bridges the front end and the underlying business logic on the backend.

This client code must implement all API calls, reproduce the models already present on the server, and verify that the schemas are synchronized with the server side. While this process can be time-consuming, the good news is we can bypass almost all of it by employing the OpenAPI standard alongside client-side code generation. OpenAPI is a specification designed for the development and documentation of RESTful APIs, providing a robust contract between the client and the server. Although OpenAPI is commonly used solely as a documentation tool, its utility is significantly enhanced when coupled with code generation. By doing so, developers can ensure efficient, consistent, and less error-prone development processes, further enhancing the user experience.

In the upcoming example, I'll illustrate the process of creating strongly-typed client code using the OpenAPI specification. We'll be working with the .NET Core framework for the server side due to its capability to auto-generate OpenAPI specs in alignment with your endpoints and models. However, if your backend stack differs, there's always the option to leverage an equivalent third-party library or write the OpenAPI spec from the ground up. It's noteworthy to mention that it's generally suggested to draft the specification first before creating your endpoint. This approach allows for the generation of both the client and server code from a single specification document, further saving you time.

1. Create a new minimal API project (using the default weather forecast template):

Use the command: dotnet new webapi -n NETFlutterCodeGen

Take note of the OpenAPI annotation incorporated into the endpoint, available by default:

The WeatherForecast object is a record that includes a date, a temperature in Celsius, a summary, and a computed property that converts and returns the temperature in Fahrenheit.

2. Execute the default app to observe the result. You can do this by using “dotnet run” command in your terminal.

Then, open your web browser and navigate to the following URL: http://localhost:5277/swagger/index.html.

We get a strongly-typed OpenAPI schema for our endpoint automatically. Now, let's explore how we can leverage this on the Flutter side to generate a repository.

3. Save the OpenAPI specification by downloading the JSON file generated by your server http://localhost:5277/swagger/v1/swagger.json  

Here is an example of the generated specification in JSON format: 

4. Download the OpenAPI Generator tool from this location: https://github.com/OpenAPITools/openapi-generator#13---download-jar. Then, place the jar file in the same folder as your JSON file.

   
   

5. Next, create an open-generator-config.yaml file with the following configuration:

6. Generate your Dart client API package by running the following command:

This command will create a Dart package with all the necessary networking code that you can import into your app.

7. Create a new Flutter project and import the newly created weather_api_client package. In your pubspec.yaml, include the following under dependencies:

8. You are now all set to make calls to your API. With strongly typed responses, making these calls becomes as straightforward as the following:

With a moderate amount of effort, we can establish a robust and reliable contract between our client and server. This approach reduces inconsistencies, enhances development productivity, and ultimately improves the overall quality of the application. In the world of mobile app development, this kind of efficient and effective process can make a significant difference in the project's timeline and success.

By utilizing the OpenAPI specification and client-side code generation, we can significantly streamline the app development process, saving substantial time and resources. Specifically, the .NET Core's ability to auto-generate specifications directly out of the box makes it a particularly powerful tool when paired with Flutter. Given the numerous syntactic and design similarities shared between C# (used in .NET) and Dart (used in Flutter), this combination becomes even more powerful. Developers can harness these to create clean, efficient, and highly maintainable code.

Resources

• Additional information about working with Open API in .NET Core: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis/openapi?view=aspnetcore-7.0 

• Open API Generator Tool: https://github.com/OpenAPITools/openapi-generator