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

void main() {
  group('ScrollPerformance', () {
    FlutterDriver driver;
    
    setUpAll(() async {
      driver = await FlutterDriver.connect();
    });
    
    tearDownAll(() async {
      if (driver != null) await driver.close();
    });
    
    test('measure scroll performance', () async {
      // Найти список
      final listFinder = find.byType('ListView');
      
      // Записать метрики при прокрутке списка
      final timeline = await driver.traceAction(() async {
        await driver.scroll(listFinder, 0, -300, Duration(milliseconds: 500));
        await Future.delayed(Duration(milliseconds: 500));
      });
      
      // Анализировать метрики прокрутки
      final scrollMetrics = timeline.getMetrics();
      expect(scrollMetrics['average_frame_build_time_millis'], lessThan(8.0));
      expect(scrollMetrics['missed_frame_build_budget_count'], equals(0));
    });
  });
}

// Неоптимизированная версия
return Container(
  margin: EdgeInsets.all(8.0),
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('Привет, Flutter!'),
);
 
// Оптимизированная версия с const
return const Container(
  margin: EdgeInsets.all(8.0),
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('Привет, Flutter!'),
);

// Заменяем StatefulWidget на StatelessWidget где возможно
class ProfileHeader extends StatelessWidget {
  final String username;
  final String avatarUrl;
  
  const ProfileHeader({
    Key? key,
    required this.username,
    required this.avatarUrl,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(backgroundImage: NetworkImage(avatarUrl)),
        SizedBox(width: 12),
        Text(username, style: Theme.of(context).textTheme.headline6),
      ],
    );
  }
}

// Вместо монолитной структуры
return Column(
  children: [
    // Десятки вложенных виджетов для шапки
    // ...
    // Десятки вложенных виджетов для контента
    // ...
    // Десятки вложенных виджетов для футера
    // ...
  ],
);
 
// Рациональная декомпозиция
return Column(
  children: [
    PageHeader(),
    PageContent(),
    PageFooter(),
  ],
);

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    // Использование UniqueKey для каждого элемента списка
    return ListTile(
      key: ValueKey(items[index].id),
      title: Text(items[index].title),
    );
  },
)

class OptimizedScreen extends StatefulWidget {
  @override
  _OptimizedScreenState createState() => _OptimizedScreenState();
}
 
class _OptimizedScreenState extends State<OptimizedScreen> {
  // Кэширование тяжелых виджетов
  late final Widget _expensiveChart = _buildExpensiveChart();
  
  Widget _buildExpensiveChart() {
    // Логика построения сложного графика
    return Container(/* ... */);
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Используем предварительно созданный виджет
        _expensiveChart,
        // Другие элементы UI
      ],
    );
  }
}

class PerformanceGraph extends LeafRenderObjectWidget {
  final List<double> dataPoints;
  
  const PerformanceGraph({Key? key, required this.dataPoints}) : super(key: key);
  
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderPerformanceGraph(dataPoints: dataPoints);
  }
  
  @override
  void updateRenderObject(BuildContext context, RenderPerformanceGraph renderObject) {
    renderObject.dataPoints = dataPoints;
  }
}
 
class RenderPerformanceGraph extends RenderBox {
  List<double> _dataPoints;
  
  RenderPerformanceGraph({required List<double> dataPoints})
      : _dataPoints = dataPoints;
      
  set dataPoints(List<double> value) {
    if (_dataPoints == value) return;
    _dataPoints = value;
    markNeedsPaint();
  }
  
  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;
      
    // Прямая отрисовка на канвасе без промежуточных виджетов
    final path = Path();
    final width = size.width;
    final height = size.height;
    
    if (_dataPoints.isEmpty) return;
    
    final dx = width / (_dataPoints.length - 1);
    path.moveTo(0, height - _dataPoints[0] * height);
    
    for (int i = 1; i < _dataPoints.length; i++) {
      path.lineTo(i * dx, height - _dataPoints[i] * height);
    }
    
    canvas.drawPath(path, paint);
  }
 
  @override
  void performLayout() {
    size = constraints.biggest;
  }
}

RepaintBoundary(
  child: ExpensiveToRebuildWidget(),
)

// Неоптимизированный вариант с избыточными контейнерами
return Container(
  child: Center(
    child: Container(
      padding: EdgeInsets.all(8.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: Text('Привет'),
      ),
    ),
  ),
);
 
// Оптимизированный вариант
return Container(
  alignment: Alignment.center,
  padding: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.white,
  ),
  child: Text('Привет'),
);

// Пример оптимизированного Provider с селектором
class ProductsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Используем селектор для реагирования только на изменение конкретного поля
    final isLoading = context.select<ProductsModel, bool>((model) => model.isLoading);
    
    return Scaffold(
      appBar: AppBar(title: Text('Продукты')),
      body: isLoading
        ? Center(child: CircularProgressIndicator())
        : ProductsList(), // Отдельный виджет, который перестраивается только при изменении списка
    );
  }
}

// Вместо хранения состояния ввода на уровне экрана
class SearchScreenBad extends StatefulWidget {
  @override
  _SearchScreenBadState createState() => _SearchScreenBadState();
}
 
class _SearchScreenBadState extends State<SearchScreenBad> {
  String _query = '';
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: (value) => setState(() => _query = value),
        ),
        // При каждом символе перестраивается весь список
        ResultsList(query: _query),
      ],
    );
  }
}
 
// Оптимизированная версия с локализованным состоянием
class SearchScreenGood extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Состояние ввода инкапсулировано в отдельном виджете
        SearchInput(),
        ResultsList(),
      ],
    );
  }
}

// Разделение состояния на логические слайсы
class UserDetailsProvider extends ChangeNotifier {
  final userProfile = UserProfileSlice(); // Основная информация
  final userPreferences = UserPreferencesSlice(); // Настройки
  final userStats = UserStatsSlice(); // Статистика
  
  // Методы, которые обновляют только конкретные слайсы
  void updateProfile() {
    userProfile.update();
    notifyListeners();
  }
  
  void updatePreferences() {
    userPreferences.update();
    notifyListeners();
  }
}

// Использование isolate для тяжелых вычислений без блокировки UI
Future<List<ProcessedItem>> processItemsInBackground(List<RawItem> items) async {
  // Перемещаем тяжелые вычисления в отдельный поток
  return await compute(processItems, items);
}
 
// Эта функция выполняется в отдельном изоляте
List<ProcessedItem> processItems(List<RawItem> items) {
  // Тяжелая обработка данных
  return items.map((item) => ProcessedItem.process(item)).toList();
}

// Пример однонаправленного потока с использованием BLoC
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<IncrementPressed>((event, emit) => emit(state + 1));
    on<DecrementPressed>((event, emit) => emit(state - 1));
  }
}
 
// В UI компоненте
BlocBuilder<CounterBloc, int>(
  builder: (context, count) {
    return Text('$count', style: Theme.of(context).textTheme.headline4);
  },
)

// Атомарное состояние с использованием flutter_hooks
Widget build(BuildContext context) {
  final counter = useState(0);
  final isEven = useMemoized(() => counter.value % 2 == 0, [counter.value]);
  
  return Column(
    children: [
      Text('Счётчик: ${counter.value}'),
      Text('Чётное число: $isEven'),
      ElevatedButton(
        onPressed: () => counter.value++,
        child: Text('Увеличить'),
      ),
    ],
  );
}

// Ленивая инициализация через ProxyProvider
ProxyProvider<AuthService, UserProfileService>(
  update: (context, authService, previous) {
    // Создаём сервис только когда он нужен и 
    // переиспользуем существующий экземпляр, если он уже был создан
    return previous ?? UserProfileService(authService);
  },
  lazy: true, // Инициализация только при первом использовании
)

// Базовая оптимизация списка
ListView.builder(
  itemCount: items.length,
  // Использование константных разделителей
  itemBuilder: (context, index) {
    final item = items[index];
    // Пропускаем перестроение элементов, которые не изменились
    return Selector<DataModel, Item>(
      selector: (_, model) => model.getItem(index),
      builder: (context, item, child) {
        return ListTile(
          key: ValueKey(item.id),
          leading: item.imageUrl != null
              ? CachedNetworkImage(imageUrl: item.imageUrl!)
              : const SizedBox.shrink(),
          title: Text(item.title),
        );
      },
    );
  },
)

// Вместо анимации через изменение состояния
class IneffectiveAnimation extends StatefulWidget {
  @override
  _IneffectiveAnimationState createState() => _IneffectiveAnimationState();
}
 
class _IneffectiveAnimationState extends State<IneffectiveAnimation> {
  double _size = 100.0;
  
  @override
  Widget build(BuildContext context) {
    // Неэффективно: перестраивает весь виджет на каждом кадре
    return GestureDetector(
      onTap: () {
        // Множество setState за короткий промежуток
        for (int i = 0; i < 60; i++) {
          Future.delayed(Duration(milliseconds: i * 16), () {
            setState(() => _size += 1.0);
          });
        }
      },
      child: Container(
        width: _size,
        height: _size,
        color: Colors.red,
      ),
    );
  }
}
 
// Оптимизированная версия с AnimatedContainer
class EfficientAnimation extends StatefulWidget {
  @override
  _EfficientAnimationState createState() => _EfficientAnimationState();
}
 
class _EfficientAnimationState extends State<EfficientAnimation> {
  double _size = 100.0;
  
  @override
  Widget build(BuildContext context) {
    // Эффективно: использует встроенный механизм анимации
    return GestureDetector(
      onTap: () {
        setState(() => _size = _size == 100.0 ? 160.0 : 100.0);
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 960),
        curve: Curves.elasticOut,
        width: _size,
        height: _size,
        color: Colors.red,
      ),
    );
  }
}

RepaintBoundary(
  child: AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      return Transform.rotate(
        angle: _controller.value * 2.0 * math.pi,
        child: child,
      );
    },
    child: const ComplexWidget(), // Не будет перестраиваться на каждом кадре
  ),
)

// Оптимизированная структура для динамической формы
class OptimizedDynamicForm extends StatefulWidget {
  @override
  _OptimizedDynamicFormState createState() => _OptimizedDynamicFormState();
}
 
class _OptimizedDynamicFormState extends State<OptimizedDynamicForm> {
  final List<int> _fieldIds = [0];
  int _nextId = 1;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Только контейнер формы перестраивается при добавлении/удалении полей
        ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: _fieldIds.length,
          itemBuilder: (context, index) {
            // Каждое поле имеет собственный ID и состояние
            return FormField(key: ValueKey(_fieldIds[index]));
          },
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _fieldIds.add(_nextId++);
            });
          },
          child: Text('Добавить поле'),
        ),
      ],
    );
  }
}
 
// Каждое поле управляет собственным состоянием
class FormField extends StatefulWidget {
  const FormField({Key? key}) : super(key: key);
 
  @override
  _FormFieldState createState() => _FormFieldState();
}
 
class _FormFieldState extends State<FormField> {
  String _value = '';
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        onChanged: (value) {
          // Изменение не влияет на перестроение других полей
          setState(() => _value = value);
        },
        decoration: InputDecoration(
          hintText: 'Введите значение',
          suffixIcon: IconButton(
            icon: Icon(Icons.clear),
            onPressed: () => setState(() => _value = ''),
          ),
        ),
      ),
    );
  }
}

class OptimizedCameraView extends StatefulWidget {
  @override
  _OptimizedCameraViewState createState() => _OptimizedCameraViewState();
}
 
class _OptimizedCameraViewState extends State<OptimizedCameraView> {
  late CameraController _controller;
  bool _isProcessing = false;
 
  @override
  void initState() {
    super.initState();
    _initCamera();
  }
 
  Future<void> _initCamera() async {
    final cameras = await availableCameras();
    _controller = CameraController(
      cameras[0],
      ResolutionPreset.medium, // Баланс между качеством и производительностью
      enableAudio: false,
    );
    await _controller.initialize();
    setState(() {});
 
    // Оптимизация частоты кадров для обработки
    _controller.startImageStream((image) {
      if (!_isProcessing) {
        _isProcessing = true;
        _processImage(image).then((_) {
          _isProcessing = false;
        });
      }
    });
  }
 
  Future<void> _processImage(CameraImage image) async {
    // Обработка в isolate для предотвращения блокировки UI
    await compute(processImageInBackground, image);
  }
 
  @override
  Widget build(BuildContext context) {
    if (!_controller.value.isInitialized) {
      return Center(child: CircularProgressIndicator());
    }
    
    return AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: Stack(
        children: [
          CameraPreview(_controller),
          // AR-контент в отдельном overlay для минимизации перерисовок
          RepaintBoundary(
            child: AROverlay(),
          ),
        ],
      ),
    );
  }
}

class OptimizedDashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          title: Text('Аналитика'),
          floating: true,
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              // Обёртка для изоляции обновлений каждого графика
              return RepaintBoundary(
                child: _buildLazyChart(index),
              );
            },
            childCount: 8, // Количество графиков
          ),
        ),
      ],
    );
  }
 
  Widget _buildLazyChart(int index) {
    // Загрузка графика только при первом построении
    return VisibilityDetector(
      key: ValueKey('chart_$index'),
      onVisibilityChanged: (info) {
        if (info.visibleFraction > 0.1) {
          // Инициировать загрузку данных только когда виджет видим
        }
      },
      child: DashboardChart(chartType: _getChartType(index)),
    );
  }
}

// Будущий Flutter может позволить тонкую настройку рендерера
@impeller
class AdvancedAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ComplexEffectPainter(),
      // Директивы для Impeller-компилятора
      impellerPrecompiledShaders: true,
      impellerRenderingQuality: Quality.performance,
    );
  }
}

// Пример платформозависимой оптимизации
if (Platform.isIOS) {
  // iOS-специфичная реализация с учётом Metal API
  return IOSOptimizedRenderer();
} else if (Platform.isAndroid) {
  // Android-оптимизации с использованием Vulkan
  return AndroidOptimizedRenderer();
} else {
  // Универсальная реализация для других платформ
  return DefaultRenderer();
}

// Пример использования FFI для доступа к нативной библиотеке
final dylib = DynamicLibrary.open('libprocessing.so');
final nativeProcessFunction = dylib.lookupFunction<
  Void Function(Pointer<Uint8>, Int32, Int32),
  void Function(Pointer<Uint8>, int, int)
>('process_image');
 
// Использование нативной функции для обработки изображения
void processImageFast(Uint8List imageData, int width, int height) {
  final pointer = calloc<Uint8>(imageData.length);
  pointer.asTypedList(imageData.length).setAll(0, imageData);
  
  nativeProcessFunction(pointer, width, height);
  
  // Копируем результат обратно
  imageData.setAll(0, pointer.asTypedList(imageData.length));
  calloc.free(pointer);
}

// Оптимизация через параллельную обработку в изолятах
Future<List<ProcessedData>> processDataInParallel(List<RawData> items) async {
  // Разделяем данные на части по количеству доступных ядер
  final isolateCount = Platform.numberOfProcessors - 1;
  final chunkSize = (items.length / isolateCount).ceil();
  final chunks = <List<RawData>>[];
  
  for (var i = 0; i < items.length; i += chunkSize) {
    final end = (i + chunkSize < items.length) ? i + chunkSize : items.length;
    chunks.add(items.sublist(i, end));
  }
  
  // Запускаем обработку в параллельных изолятах
  final futures = chunks.map((chunk) => compute(processChunk, chunk));
  final results = await Future.wait(futures);
  
  // Объединяем результаты
  return results.expand((x) => x).toList();
}
 
List<ProcessedData> processChunk(List<RawData> chunk) {
  // Тяжелые вычисления в отдельном изоляте
  return chunk.map((data) => data.process()).toList();
}

// Будущий API для телеметрии производительности
FlutterPerformanceMonitor.initialize(
  onJankDetected: (JankInfo info) {
    // Отправка данных на сервер аналитики
    logJankEvent(info);
  },
  samplingRate: 0.1, // Мониторинг 10% сессий
  thresholds: PerformanceThresholds(
    frameJankThresholdMs: 32.0,
    startupTimeThresholdMs: 2000.0,
  ),
);