Какие знаешь деревья в Flutter?

Деревья в Flutter

В Flutter существует несколько типов деревьев, каждое отвечает за разную часть архитектуры приложения.

1. Widget Tree

Это логическое описание UI структуры:

MyApp()
├── MaterialApp
│   └── Scaffold
│       ├── AppBar
│       └── Body

Stроится в методе build() и пересчитывается при каждом обновлении.

2. Element Tree

Внутреннее представление Widget Tree. Элементы управляют жизненным циклом виджетов:

• Widget — immutable (неизменяемый)
• Element — mutable, живет дольше чем Widget

3. Render Tree

Самый низкий уровень — RenderObject's:

RenderBox (Scaffold)
├── RenderAppBar
├── RenderColumn
│   ├── RenderImage
│   └── RenderText

Отвечает за:

• Layout — вычисляет размеры и позиции
• Painting — рисует на canvas
• Hit testing — определяет какой widget был таппнут

4. BuildContext Tree

Связь между Widget и Element:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final scaffoldState = Scaffold.of(context);
    final themeData = Theme.of(context);
  }
}

5. Dependency Tree

Дерево зависимостей через InheritedWidget:

class ThemeProvider extends InheritedWidget {
  final ThemeData themeData;
  
  static ThemeProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ThemeProvider>();
  }
}

6. State Management Trees

Модерные решения создают свои деревья:

Riverpod:

final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('Count: $count');
  }
}

BLoC:

BlocProvider(
  create: (context) => CounterBloc(),
  child: BlocBuilder<CounterBloc, int>(
    builder: (context, state) => Text('$state'),
  ),
)

Взаимосвязь

Widget Tree → Element Tree → Render Tree → Pixels on Screen
BuildContext Tree (для поиска)
Dependency Tree (InheritedWidget)
State Management Tree (Riverpod/BLoC/Provider)

Пример: Все вместе

class ProfilePage extends StatefulWidget {
  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context); // Dependency Tree
    
    return Scaffold( // Widget Tree → Element Tree → Render Tree
      appBar: AppBar(title: Text('Profile')),
      body: ListView(
        children: [
          CircleAvatar(radius: 50),
          Text('John Doe'),
        ],
      ),
    );
  }
}

Лучшие практики

1. Разбивай большие Widget Trees на компоненты

   • Лучше производительность
   • Легче тестировать

2. Минимизируй Render Tree пересчеты

   const ChildWidget(); // Не пересчитается
   

3. Используй InheritedWidget для общих данных

   Theme.of(context) // Лучше чем передача параметров
   

4. Помни про производительность

   • Больше widgets = больше Element's = больше RenderObject's

Понимание этих деревьев критично для оптимизации Flutter приложений и правильной работы с состоянием.