Что происходит при нажатии кнопки в приложении Flutter

Условие

На экране присутствуют индикатор загрузки и кнопка. Нужно предсказать, какой результат выведет приложение после нажатия на кнопку.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: _onTap,
              child: Text('Test'),
            ),
          ],
        ),
      ),
    );
  }

  void _onTap() {
    int a = 0;
    for (int i = 0; i < 1000000000; i++) {
      a++;
    }
    print(a);
  }
}

Решение

После нажатия выполнится синхронный цикл, а затем print выведет 1000000000. Пока цикл занят на UI-isolate, приложение не сможет нормально обрабатывать кадры и индикатор может замереть.

Точное время зависит от устройства, режима сборки и оптимизаций. Добавление async к обработчику не переносит вычисления в другой isolate, а Future с тем же тяжёлым кодом на UI-isolate также может блокировать интерфейс. Для реальной тяжёлой CPU-задачи на поддерживаемых платформах используют отдельный isolate, а не выполняют её в обработчике кнопки. Isolates во Flutter.