Implementing Lazy Loading and Code Splitting in Flutter

In Flutter, as applications grow in complexity, optimizing performance becomes crucial. Two powerful techniques for enhancing performance are lazy loading and code splitting. Lazy loading defers the loading of resources until they are needed, while code splitting divides the application code into smaller chunks, loaded on demand. This article delves into implementing these techniques effectively in Flutter to create more responsive and efficient apps.

What are Lazy Loading and Code Splitting?

• Lazy Loading: Loading resources, such as images, data, or widgets, only when they are about to be displayed or used. This approach minimizes the initial load time and conserves resources.
• Code Splitting: Dividing the application’s code into multiple smaller files (chunks) and loading them as required. This reduces the initial download size, improving startup time and overall responsiveness.

Why Implement Lazy Loading and Code Splitting?

• Faster Startup Time: Reduce the amount of code and resources loaded initially.
• Reduced Memory Usage: Less resources in memory mean better performance, particularly on low-end devices.
• Improved Responsiveness: The application feels more responsive as only necessary components are loaded.
• Better Scalability: Easier to manage large projects with many features.

Implementing Lazy Loading in Flutter

1. Lazy Loading Images

Loading images lazily can significantly improve performance, especially when dealing with large sets of images. Here’s how to do it using the CachedNetworkImage package.

Step 1: Add the cached_network_image Dependency

First, add cached_network_image to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.0

Step 2: Implement Lazy Loading of Images

Use CachedNetworkImage widget in your UI to display images from network.

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

class LazyLoadingImages extends StatelessWidget {
  final List imageUrls = [
    "https://via.placeholder.com/600/92c952",
    "https://via.placeholder.com/600/771796",
    "https://via.placeholder.com/600/24f355",
    "https://via.placeholder.com/600/d32776",
    "https://via.placeholder.com/600/f66b97",
    // Add more URLs here
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lazy Loading Images'),
      ),
      body: ListView.builder(
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return Card(
            margin: EdgeInsets.all(8.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: CachedNetworkImage(
                imageUrl: imageUrls[index],
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
                fit: BoxFit.cover,
                height: 200,
              ),
            ),
          );
        },
      ),
    );
  }
}

Explanation:

• CachedNetworkImage caches the image after the first load.
• placeholder displays a loading indicator while the image is being fetched.
• errorWidget shows an error icon if the image fails to load.

2. Lazy Loading Lists with ListView.builder

Use ListView.builder to create long lists that only load items as they become visible.

import 'package:flutter/material.dart';

class LazyLoadingList extends StatelessWidget {
  final List items = List.generate(1000, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lazy Loading List'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

Here, the list items are built only when they are scrolled into view, improving performance for long lists.

3. Lazy Loading Widgets

Defer the building of widgets until they are needed using FutureBuilder or other conditional rendering techniques.

import 'package:flutter/material.dart';

class LazyLoadingWidget extends StatelessWidget {
  Future _loadWidget() async {
    // Simulate loading a widget after a delay
    await Future.delayed(Duration(seconds: 2));
    return Text('Widget Loaded!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lazy Loading Widget'),
      ),
      body: Center(
        child: FutureBuilder(
          future: _loadWidget(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return snapshot.data!;
            }
          },
        ),
      ),
    );
  }
}

In this example, the widget is loaded after a delay, showing a progress indicator in the meantime.

Implementing Code Splitting in Flutter

1. Route-Based Code Splitting

Separate the application into different modules, each associated with a route. Load these modules on demand as the user navigates through the application.

Step 1: Create Separate Files for Routes

Create different Dart files for each route (screen).

main.dart:

import 'package:flutter/material.dart';
import 'package:lazyloading/home_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Code Splitting Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
      routes: {
        '/home': (context) => HomeScreen(),
        // Route to other screens defined in other files
      },
    );
  }
}

home_screen.dart:

import 'package:flutter/material.dart';
import 'package:lazyloading/second_screen.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to the Home Screen!',
            ),
            ElevatedButton(
              child: Text('Go to Second Screen'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

second_screen.dart:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(
          'This is the Second Screen!',
        ),
      ),
    );
  }
}

Each screen is defined in a separate file. When you navigate to a route, Flutter loads the associated file if it hasn’t been loaded already.

2. Conditional Imports

Use conditional imports to load different implementations based on platform or other conditions.

Step 1: Define Abstract and Platform-Specific Implementations

Create an abstract class or interface and provide different implementations for different platforms.

api_service.dart (abstract class):

abstract class ApiService {
  Future getData();
}

api_service_web.dart (web implementation):

import 'api_service.dart';

class ApiServiceWeb implements ApiService {
  @override
  Future getData() async {
    return "Data from Web API";
  }
}

api_service_mobile.dart (mobile implementation):

import 'api_service.dart';

class ApiServiceMobile implements ApiService {
  @override
  Future getData() async {
    return "Data from Mobile API";
  }
}

Step 2: Use Conditional Imports in main.dart

import 'package:flutter/material.dart';
import 'api_service.dart';
import 'api_service_mobile.dart'
    if (dart.library.html) 'api_service_web.dart';

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

class MyApp extends StatelessWidget {
  Future fetchData() async {
    ApiService apiService = ApiServiceMobile(); // or ApiServiceWeb based on the platform
    return await apiService.getData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Conditional Imports'),
        ),
        body: FutureBuilder(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else {
              return Center(child: Text('Data: ${snapshot.data}'));
            }
          },
        ),
      ),
    );
  }
}

This approach uses conditional imports to choose between different implementations based on the platform. When running on the web, the api_service_web.dart implementation is used; otherwise, the api_service_mobile.dart is used.

3. Deferred Loading with deferred Keyword

The deferred keyword allows you to load a library lazily, but it requires additional tooling and setup.

Step 1: Create a Deferred Library

Create a separate Dart file that you want to load lazily. For instance, create deferred_library.dart:

library deferred_library;

String getMessage() {
  return "This message is from deferred library!";
}

Step 2: Use Deferred Loading in Main File

import 'package:flutter/material.dart';
import 'deferred_library.dart' deferred as deferred_lib;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deferred Loading'),
        ),
        body: Center(
          child: FutureBuilder(
            future: loadDeferredMessage(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text(snapshot.data.toString());
              }
            },
          ),
        ),
      ),
    );
  }

  Future loadDeferredMessage() async {
    try {
      await deferred_lib.loadLibrary();
      return deferred_lib.getMessage();
    } catch (e) {
      return 'Failed to load library: $e';
    }
  }
}

Here’s what the code does:

• Imports the library with deferred as deferred_lib.
• The loadDeferredMessage function loads the library using deferred_lib.loadLibrary() before using any of its functions.
• It shows a progress indicator while the library is being loaded.

Conclusion

Implementing lazy loading and code splitting are effective ways to optimize Flutter applications, enhancing performance and user experience. Lazy loading of images, lists, and widgets minimizes the initial load and conserves resources. Code splitting through route-based division, conditional imports, and deferred loading reduces initial download size and improves startup time. Employing these techniques appropriately can significantly improve your Flutter app’s performance and scalability, resulting in more responsive and efficient applications.