Learn Refactoring a Messy API App | Clean Architecture for API Apps

When you build a Flutter app that interacts with a REST API, it can be tempting to put everything—network calls, data parsing, and UI logic—into a single file. This makes it quick to get started, but tightly-coupled, single-file API apps create serious problems. As your app grows, you face confusing code, repeated bugs, and a struggle to add new features. Debugging becomes harder, and onboarding new developers is a headache. The lack of clear separation between data fetching, business logic, and UI leads to a fragile codebase that is difficult to test or maintain.

before.dart

after.dart

user_service.dart

user_repository.dart

user_model.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
            
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserScreen(),
    );
  }
}

class UserScreen extends StatefulWidget {
  @override
  _UserScreenState createState() => _UserScreenState();
}

class _UserScreenState extends State<UserScreen> {
  List users = [];
  bool loading = true;

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  Future<void> fetchUsers() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
    if (response.statusCode == 200) {
      setState(() {
        users = json.decode(response.body);
        loading = false;
      });
    } else {
      setState(() {
        loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return Scaffold(
        appBar: AppBar(title: Text('Users')),
        body: Center(child: CircularProgressIndicator()),
      );
    }
    return Scaffold(
      appBar: AppBar(title: Text('Users')),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(users[index]['name']),
            subtitle: Text(users[index]['email']),
          );
        },
      ),
    );
  }
}

To refactor a messy, single-file API app, start by identifying and extracting the different responsibilities in your code. First, move your data models—such as the User class—into their own files. Next, create a repository that handles all network communication and data parsing. Then, add a service layer to coordinate between your UI and repository, making the business logic reusable and testable. Update your UI code to depend on these services and models, not on direct API calls or raw JSON. This separation makes your app easier to read, maintain, and extend. The refactored code is cleaner, with each class focused on a single job, reducing duplication and confusion.

Note

A clean architecture pays off in the long run, especially in team projects. It makes onboarding easier, reduces merge conflicts, and helps everyone understand where to find or add new features.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 5

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you give an example of how to structure the files for this refactoring?

What are the main benefits of using a repository and service layer in Flutter?

How do I start refactoring an existing single-file Flutter app?

Swipe to show menu