Different way to increase flutter performance

Improving performance in Flutter applications is essential for creating a smooth and responsive user experience. Below are various techniques and best practices, along with examples, to enhance the performance of Flutter apps:

Use const Constructors Using const constructors can help Flutter optimize widget rebuilding.

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text('Hello World');
  }
}

Avoid Rebuilding Widgets Use keys to preserve the state of widgets and avoid unnecessary rebuilding.

class MyList extends StatelessWidget {
  final List<String> items;

  MyList({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          key: ValueKey(items[index]),
          title: Text(items[index]),
        );
      },
    );
  }
}

Use ListView.builder for Long Lists For long lists, use ListView.builder instead of ListView to build items on demand.

class LongList extends StatelessWidget {
  final List<String> items;

  LongList({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

Use the provider Package for State Management Using provider for state management can help in efficiently managing state and reducing rebuilds.

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<Counter>().increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Use SizedBox Instead of Container for Fixed Size Use SizedBox when you need a fixed size box instead of Container.

Widget build(BuildContext context) {
  return SizedBox(
    width: 100,
    height: 100,
    child: Text('Hello'),
  );
}

Use RepaintBoundary Wrap parts of the widget tree with RepaintBoundary to prevent unnecessary repaints.

Widget build(BuildContext context) {
  return RepaintBoundary(
    child: SomeComplexWidget(),
  );
}

Use Memoization for Expensive Computations Cache the result of expensive computations to avoid repeating them.

int _expensiveComputationResult;
int expensiveComputation() {
  if (_expensiveComputationResult != null) {
    return _expensiveComputationResult;
  }
  _expensiveComputationResult = computeExpensiveValue();
  return _expensiveComputationResult;
}

Reduce the Usage of Opacity Widget Avoid using Opacity widgets frequently; prefer ColorFiltered or directly set transparency in colors.

Widget build(BuildContext context) {
  return ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop),
    child: Image.network('https://example.com/image.png'),
  );
}

Use the Flutter DevTools Use Flutter DevTools for performance profiling and to find and fix performance bottlenecks.

void main() {
  runApp(MyApp());
  // Start performance profiling
  Timeline.startSync('frame build');
  // Do your work
  Timeline.finishSync();
}

Optimize Images Use smaller image sizes and the appropriate image format. Consider using cached_network_image for caching images.

import 'package:cached_network_image/cached_network_image.dart';

Widget build(BuildContext context) {
  return CachedNetworkImage(
    imageUrl: 'https://example.com/image.png',
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
  );
}

Debug School

Different way to increase flutter performance

Top comments (0)

Read next

Troubleshooting Apache