Как бороться с нежелательной сборкой виджетов?

Метод build разработан таким образом, что он должен быть чистым / без побочных эффектов. Это связано с тем, что многие внешние факторы могут вызвать создание нового виджета, например:

• Маршрут pop / push
• Изменение размера экрана, обычно из-за изменения внешнего вида клавиатуры или ориентации
• Родительский виджет воссоздал своего дочернего элемента
• InheritedWidget, от которого зависит виджет (Class.of(context) шаблон).

Это означает, что метод build не должен не вызывать HTTP-вызов или изменять какое-либо состояние.

Как это связано с вопросом?

Проблема, с которой вы столкнулись, заключается в том, что ваш метод сборки имеет побочные эффекты / не является чистым, что затрудняет посторонний вызов сборки.

Вместо того, чтобы предотвращать вызов сборки, вы должны сделать свой метод сборки чистым, чтобы его можно было вызывать в любое время без каких-либо последствий.

В случае вашего примера вы должны преобразовать свой виджет в StatefulWidget, а затем извлечь этот HTTP-вызов в initState вашего State:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Future<int> future;

  @override
  void initState() {
    future = Future.value(42);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        // create some layout here
      },
    );
  }
}

Я это уже знаю. Я пришел сюда, потому что очень хочу оптимизировать перестройки

Также возможно сделать виджет способным к перестройке, не заставляя его дочерние элементы тоже строить.

Когда экземпляр виджета остается прежним; Flutter намеренно не восстанавливает детей. Это означает, что вы можете кэшировать части своего дерева виджетов, чтобы предотвратить ненужные перестроения.

Самый простой способ - использовать конструкторы dart const:

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
    decoration: BoxDecoration(),
    child: Text("Hello World"),
  );
}

Благодаря этому ключевому слову const экземпляр DecoratedBox останется прежним, даже если сборка вызывалась сотни раз.

Но вы можете добиться того же результата вручную:

@override
Widget build(BuildContext context) {
  final subtree = MyWidget(
    child: Text("Hello World")
  );

  return StreamBuilder<String>(
    stream: stream,
    initialData: "Foo",
    builder: (context, snapshot) {
      return Column(
        children: <Widget>[
          Text(snapshot.data),
          subtree,
        ],
      );
    },
  );
}

В этом примере, когда StreamBuilder получает уведомление о новых значениях, subtree не будет перестраиваться, даже если StreamBuilder / Column это сделает. Это происходит потому, что из-за закрытия экземпляр MyWidget не изменился.

Этот паттерн часто используется в анимации. Типичное использование - AnimatedBuilder и все переходы, такие как AlignTransition.

Вы также можете сохранить subtree в поле вашего класса, хотя это не рекомендуется, поскольку это нарушает функцию горячей перезагрузки.

Вы можете предотвратить нежелательный вызов сборки, используя этот способ

1) Создайте дочерний класс Statefull для отдельной небольшой части пользовательского интерфейса

2) Используйте библиотеку Provider, чтобы с ее помощью вы могли остановить нежелательный вызов метода сборки

В эти ниже вызов метода построения ситуации

• После вызова initState
  
• После вызова didUpdateWidget
  
• когда вызывается setState ().
  
• когда клавиатура открыта
  
• при изменении ориентации экрана
  
• Родительский виджет создается, затем дочерний виджет также перестраивается
  

У Flutter тоже есть ValueListenableBuilder<T> class . Это позволяет вам перестроить только некоторые из виджетов, необходимых для ваших целей, и пропустить дорогостоящие виджеты.

вы можете увидеть здесь документы ValueListenableBuilder flutter docs
или просто пример кода ниже:

  return Scaffold(
  appBar: AppBar(
    title: Text(widget.title)
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        ValueListenableBuilder(
          builder: (BuildContext context, int value, Widget child) {
            // This builder will only get called when the _counter
            // is updated.
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('$value'),
                child,
              ],
            );
          },
          valueListenable: _counter,
          // The child parameter is most helpful if the child is
          // expensive to build and does not depend on the value from
          // the notifier.
          child: goodJob,
        )
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.plus_one),
    onPressed: () => _counter.value += 1,
  ),
);

Один из самых простых способов избежать нежелательных повторных сборок, которые обычно вызываются вызовом setState() для обновления только определенного виджета, а не обновления всей страницы, - это вырезать эту часть кода и обернуть это как независимый Widget в другом Stateful классе.
Например, в следующем коде метод Build родительской страницы вызывается снова и снова нажатием кнопки FAB:

import 'package:flutter/material.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {

  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {

  int c = 0;

  @override
  Widget build(BuildContext context) {

    print('build is called');

    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text('my test app'),
      ),
      body: Center(child:Text('this is a test page')),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            c++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.wb_incandescent_outlined, color: (c % 2) == 0 ? Colors.white : Colors.black)
      )
    ));
  }
}

Но если вы отделите виджет FloatingActionButton в другом классе с его собственным жизненным циклом, метод setState() не приведет к повторному запуску метода Build родительского класса:

import 'package:flutter/material.dart';
import 'package:flutter_app_mohsen/widgets/my_widget.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {

  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {

  int c = 0;

  @override
  Widget build(BuildContext context) {

    print('build is called');

    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text('my test app'),
      ),
      body: Center(child:Text('this is a test page')),
      floatingActionButton: MyWidget(number: c)
    ));
  }
}

и класс MyWidget:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {

  int number;
  MyWidget({this.number});

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        onPressed: (){
          setState(() {
            widget.number++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.wb_incandescent_outlined, color: (widget.number % 2) == 0 ? Colors.white : Colors.black)
    );
  }
}

Я просто хочу поделиться своим опытом сборки нежелательных виджетов в основном из-за контекста, но я нашел способ, который очень эффективен для

• Маршрут pop / push

Поэтому вам нужно использовать Navigator.pushReplacement (), чтобы контекст предыдущей страницы не имел отношения к следующей странице.

1. Используйте Navigator.pushReplacement () для перехода с первой страницы на вторую.
2. На второй странице нам снова нужно использовать Navigator.pushReplacement (). В appBar мы добавляем -

   leading: IconButton(
           icon: Icon(Icons.arrow_back),
           onPressed: () {
             Navigator.pushReplacement(
               context,
               RightToLeft(page: MyHomePage()),
             );
           },
         )
   

Таким образом мы можем оптимизировать наше приложение