Как оптимизировать производительность Flutter-приложения?

Оптимизация производительности Flutter-приложения

Производительность — это многоуровневая задача. Рассмотрю конкретные техники, которые дают реальный результат.

1. Оптимизация Render Loop

Использование const конструкторов

// ❌ Плохо — пересоздаёт виджет каждый фрейм
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: Text('Hello'),
      ),
    );
  }
}

// ✅ Хорошо — const предотвращает пересоздание
class MyWidget extends StatelessWidget {
  const MyWidget();
  
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SizedBox.expand(
        child: ColoredBox(
          color: Colors.blue,
          child: Text('Hello'),
        ),
      ),
    );
  }
}

Минимизировать пересчёты

// Использовать RepaintBoundary для изоляции перестроек
class MyExpensiveWidget extends StatelessWidget {
  final Animation<double> animation;
  
  const MyExpensiveWidget({required this.animation});
  
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return Transform.scale(
            scale: animation.value,
            child: Container(
              color: Colors.blue,
              width: 200,
              height: 200,
            ),
          );
        },
      ),
    );
  }
}

2. Оптимизация ListView и GridView

itemExtent для ListView

// ❌ Плохо — Flutter вычисляет высоту каждого элемента
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

// ✅ Хорошо — одна высота для всех элементов
ListView.builder(
  itemExtent: 56.0,  // Высота фиксирована
  itemCount: 1000,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

Кэширование дорогих вычислений

class CachedListView extends StatefulWidget {
  const CachedListView();
  
  @override
  State<CachedListView> createState() => _CachedListViewState();
}

class _CachedListViewState extends State<CachedListView> {
  final Map<int, Widget> _cache = {};
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10000,
      itemBuilder: (context, index) {
        if (_cache.containsKey(index)) {
          return _cache[index]!;
        }
        
        final widget = ListTile(
          title: Text('Item $index'),
          // Дорогое вычисление
        );
        _cache[index] = widget;
        return widget;
      },
    );
  }
}

3. Оптимизация работы со строками

// ❌ Плохо — создаёт новую строку каждый раз
String concatenate(String a, String b) {
  return a + b + '!';
}

// ✅ Хорошо — использует буфер
String concatenate(String a, String b) {
  final buffer = StringBuffer()
    ..write(a)
    ..write(b)
    ..write('!');
  return buffer.toString();
}

4. Асинхронная работа и Isolates

// Для тяжёлой обработки JSON используй Isolate
import 'dart:convert';
import 'dart:isolate';

static Future<List<User>> parseJson(String jsonStr) async {
  return compute(_parseJsonInBackground, jsonStr);
}

static List<User> _parseJsonInBackground(String jsonStr) {
  final list = jsonDecode(jsonStr) as List;
  return list.map((item) => User.fromJson(item)).toList();
}

5. Image оптимизация

// ❌ Плохо — загружает полное разрешение
Image.network('https://example.com/image.jpg')

// ✅ Хорошо — кэширует и оптимизирует
Image.network(
  'https://example.com/image.jpg',
  cacheHeight: 200,
  cacheWidth: 200,
  fit: BoxFit.cover,
)

// ✅ Ещё лучше — используй cached_network_image
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => Container(color: Colors.grey[300]),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

6. Memory Profiling

// Мониторить использование памяти
import 'dart:developer';

Service.getVM().then((vm) {
  vm.memoryUsage.then((info) {
    print('Memory usage: ${info.externalUsageInBytes / 1024 / 1024}MB');
  });
});

7. DevTools для анализа

• CPU Profiler — найти медленные функции
• Timeline — визуализировать фреймы (должны быть < 16ms на 60fps)
• Memory profiler — утечки памяти
• Network — задержки сети

8. Build режим

# ❌ Debug режим — медленный
flutter run

# ✅ Release режим — оптимизирован
flutter run --release

# ✅ Profile режим — для анализа
flutter run --profile

Чеклист оптимизации

• Использовать const конструкторы везде, где возможно
• itemExtent для списков одинаковой высоты
• RepaintBoundary для изоляции анимаций
• Кэширование изображений и дорогих вычислений
• Isolates для JSON обработки
• Профилировать в Release режиме
• Мониторить FPS в DevTools
• Избегать работы в build методе
• Использовать shouldRebuild в InheritedWidgets

На практике

Большинство проблем производительности решаются:

1. Const конструкторами
2. Правильной архитектурой state management (Provider, Riverpod)
3. Профилированием узких мест
4. Release режимом для финальной версии