Flutter производительность: 12 ошибок, которые убивают FPS вашего приложения

class MyScreen extends StatefulWidget {
  @override
  State<MyScreen> createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $counter'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              counter++; // пересобирает ВСЁ дерево
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

class MyScreen extends StatelessWidget {
  final ValueNotifier<int> counter = ValueNotifier(0);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ValueListenableBuilder<int>(
          valueListenable: counter,
          builder: (_, value, __) {
            return Text('Counter: $value');
          },
        ),
        ElevatedButton(
          onPressed: () => counter.value++,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Widget build(BuildContext context) {
  return Column(
    children: [
      Text('Hello'),
      Icon(Icons.home),
      Padding(
        padding: EdgeInsets.all(8),
        child: Text('World'),
      ),
    ],
  );
}

Widget build(BuildContext context) {
  return const Column(
    children: [
      Text('Hello'),
      Icon(Icons.home),
      Padding(
        padding: EdgeInsets.all(8),
        child: Text('World'),
      ),
    ],
  );
}

Widget build(BuildContext context) {
  final sortedList = items..sort((a, b) => a.compareTo(b));
  final filtered = sortedList.where((e) => e > 10).toList();
  return ListView(
    children: filtered.map((e) => Text('$e')).toList(),
  );
}

late List<int> filtered;
@override
void initState() {
  super.initState();
  final sorted = [...items]..sort((a, b) => a.compareTo(b));
  filtered = sorted.where((e) => e > 10).toList();
}
@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: filtered.length,
    itemBuilder: (_, i) => Text('${filtered[i]}'),
  );
}

Widget build(BuildContext context) {
  return ListView(
    children: items.map((item) {
      return ListTile(
        title: Text(item.title),
        subtitle: Text(item.subtitle),
      );
    }).toList(),
  );
}

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

ListView.builder(
  itemCount: items.length,
  itemBuilder: (_, index) {
    final item = items[index];
    return ListTile(
      title: Text(item.title),
    );
  },
);

• reorder списка
• удалении элементов
• анимациях

ListView.builder(
  itemCount: items.length,
  itemBuilder: (_, index) {
    final item = items[index];
    return ListTile(
      key: ValueKey(item.id),
      title: Text(item.title),
    );
  },
);

Timer.periodic(Duration(milliseconds: 100), (_) {
  setState(() {
    progress += 0.01;
  });
});
Widget build(BuildContext context) {
  return LinearProgressIndicator(value: progress);
}

late AnimationController controller;
@override
void initState() {
  super.initState();
  controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 2),
  )..repeat();
}
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: controller,
    builder: (_, __) {
      return LinearProgressIndicator(value: controller.value);
    },
  );
}

Widget build(BuildContext context) {
  return Column(
    children: [
      Text('Header'),
      ListView(...),
      Text('Footer'),
      ElevatedButton(...),
      Image.network(url),
    ],
  );
}

• локализовать rebuild’ы
• переиспользовать код
• улучшить читаемость

Widget build(BuildContext context) {
  return Column(
    children: const [
      Header(),
      Expanded(child: ItemsList()),
      Footer(),
    ],
  );
}
class Header extends StatelessWidget {
  const Header();
  @override
  Widget build(BuildContext context) {
    return Text('Header');
  }
}

Widget build(BuildContext context) {
  return FutureBuilder(
    future: fetchData(), // каждый раз новый запрос
    builder: (_, snapshot) {
      if (!snapshot.hasData) return CircularProgressIndicator();
      return Text(snapshot.data.toString());
    },
  );
}

• множественным HTTP-запросам
• миганию UI
• лишней нагрузке на сеть

late Future dataFuture;
@override
void initState() {
  super.initState();
  dataFuture = fetchData();
}
Widget build(BuildContext context) {
  return FutureBuilder(
    future: dataFuture,
    builder: (_, snapshot) {
      if (!snapshot.hasData) return CircularProgressIndicator();
      return Text(snapshot.data.toString());
    },
  );
}

Column(
  children: [
    Image.network(url1),
    Image.network(url2),
    Image.network(url3),
  ],
);

• дисковый кэш
• memory cache
• placeholder

Column(
  children: [
    CachedNetworkImage(imageUrl: url1),
    CachedNetworkImage(imageUrl: url2),
    CachedNetworkImage(imageUrl: url3),
  ],
);

Opacity(
  opacity: 0.5,
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
);

Container(
  width: 100,
  height: 100,
  color: Colors.red.withOpacity(0.5),
);

Container(
  child: Padding(
    padding: EdgeInsets.all(8),
    child: Align(
      alignment: Alignment.center,
      child: Column(
        children: [
          Text('Hello'),
        ],
      ),
    ),
  ),
);

• ускоряет UI
• снижает количество вычислений
• делает код читаемее

Padding(
  padding: const EdgeInsets.all(8),
  child: Center(
    child: Text('Hello'),
  ),
);

Widget build(BuildContext context) {
  final data = jsonDecode(bigJsonString);
  final items = data['items'];
  return ListView(
    children: items.map<Widget>((e) => Text(e.toString())).toList(),
  );
}

• больших API ответах
• локальных файлах
• сложных вычислениях

Future<List<dynamic>> parseData() async {
  return compute(parseJson, bigJsonString);
}
List<dynamic> parseJson(String json) {
  final data = jsonDecode(json);
  return data['items'];
}