Optimización del rendimiento de aleteo Daquan

Flutter es un marco de desarrollo móvil de alto rendimiento y alta calidad, pero en el desarrollo real, para garantizar la fluidez y la velocidad de respuesta de la aplicación, aún se requiere cierta optimización del rendimiento. A continuación, se muestran algunos consejos comunes para optimizar el rendimiento de Flutter:

Reducir las reconstrucciones de widgets: las reconstrucciones de widgets son un problema de rendimiento común en las aplicaciones de Flutter porque provocan renderizado y pintura innecesarios. Los métodos para reducir la reconstrucción de widgets incluyen el uso del constructor constante, el uso de claves para identificar el widget, el uso de StatefulWidget, etc.

Evite redibujar excesivamente la interfaz de usuario: evitar redibujar excesivamente la interfaz de usuario puede mejorar el rendimiento de la aplicación. Puede utilizar el método shouldRepaint para determinar si es necesario volver a dibujar.

Optimice la carga de imágenes: en Flutter, la carga de imágenes es un problema de rendimiento común. La carga de imágenes se puede optimizar mediante técnicas de almacenamiento en caché o precarga para reducir las solicitudes de red innecesarias.

Evite solicitudes de red excesivas: las solicitudes de red excesivas pueden hacer que su aplicación responda lentamente. Puede utilizar el almacenamiento en caché o reducir la cantidad de solicitudes para reducir las solicitudes de red, mejorando así el rendimiento de la aplicación.

Optimización del diseño: el diseño es uno de los factores importantes para el rendimiento de la aplicación. Puede utilizar el diseño Flex o CustomMultiChildLayout para optimizar el diseño y mejorar el rendimiento de la aplicación.

Utilice operaciones asincrónicas: el uso de operaciones asincrónicas en la aplicación puede evitar el problema de la congelación de la interfaz de usuario. Se pueden utilizar operaciones asincrónicas como Future y Stream para optimizar el rendimiento de la aplicación.

Evite el uso excesivo de memoria: el uso excesivo de memoria puede hacer que su aplicación responda menos. Puede utilizar la herramienta de análisis de memoria que viene con Flutter para encontrar pérdidas de memoria y evitar el uso excesivo de la misma.

Utilice la recarga en caliente: la recarga en caliente es una característica importante de Flutter, que puede obtener una vista previa y depurar aplicaciones rápidamente. El uso de la recarga en caliente puede mejorar la eficiencia del desarrollo, acelerando así el proceso de desarrollo de aplicaciones.

Las técnicas de optimización del rendimiento de Flutter incluyen reducir la reconstrucción de widgets, evitar el rediseño excesivo de la interfaz de usuario, optimizar la carga de imágenes, evitar solicitudes de red excesivas, optimizar el diseño, usar operaciones asincrónicas, evitar el uso excesivo de memoria, usar recarga en caliente, etc. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

Reducir las reconstrucciones de widgets

Reducir las reconstrucciones de widgets es una técnica importante de optimización del rendimiento en Flutter; aquí hay algunos ejemplos:

Crea un widget constante usando el constructor constante:

class MyWidget extends StatelessWidget {
  final String text;
  const MyWidget({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

En el ejemplo anterior, el constructor const se utiliza para crear un widget constante, lo que evita la reconstrucción innecesaria del widget.

Utilice la clave para identificar el widget:

class MyWidget extends StatelessWidget {
  final String text;
  const MyWidget({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text(text, key: key);
  }
}

Utilice la clave para identificar el widget, lo que puede evitar que lo confundan con un widget diferente cuando se reconstruya.

Utilice StatefulWidget para administrar el estado:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Text('Count: $_count');
  }
}

Utilice un StatefulWidget para gestionar el estado del contador, lo que evita reconstruir todo el widget.

Utilice Builder para crear sub-widgets:

class MyWidget extends StatelessWidget {
  final int count;
  const MyWidget({Key key, this.count}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return Text('Count: $count');
    });
  }
}

Utilice el Generador para crear sub-widgets, lo que puede evitar reconstruir todo el widget.

Reducir la reconstrucción de widgets es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr mediante el uso de constructores constantes, claves para identificar widgets, StatefulWidget, Builder y otros métodos. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

Evite redibujar excesivamente la interfaz de usuario

Evitar el redibujado excesivo de la interfaz de usuario es una técnica importante de optimización del rendimiento en Flutter. Los siguientes son algunos ejemplos de optimización comunes:

Utilice el método debería repintar:

class MyPainter extends CustomPainter {
  int count;
  MyPainter(this.count);
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制操作
  }
  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return count != oldDelegate.count;
  }
}

Utilice el método shouldRepaint para determinar si es necesario volver a pintar. Cuando cambie el recuento, vuelva a dibujar el lienzo.

Utilice ClipRect para evitar dibujos innecesarios:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

Utilice ClipRect para limitar el rango de dibujo del Contenedor para evitar dibujos innecesarios.

Utilice Offstage para evitar cálculos de diseño innecesarios:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          child: Text(_visible ? 'Hide' : 'Show'),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
        Offstage(
          offstage: !_visible,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

Utilice Offstage para evitar cálculos de diseño cuando el contenedor no esté visible.

Utilice RepaintBoundary para evitar dibujos repetidos:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: Container(
        width: 100,
        height: 100,
        child: CustomPaint(
          painter: MyPainter(),
        ),
      ),
    );
  }
}

Utilice RepaintBoundary para evitar dibujar el mismo CustomPaint repetidamente.

Evitar el redibujado excesivo de la interfaz de usuario es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr utilizando el método shouldRepaint, ClipRect, Offstage, RepaintBoundary y otros métodos.

Optimizar la carga de imágenes

La optimización de la carga de imágenes es una técnica importante de optimización del rendimiento en Flutter. Las siguientes son algunas soluciones de optimización comúnmente utilizadas:

Utilice técnicas de almacenamiento en caché:

Flutter proporciona la clase ImageCache para implementar el almacenamiento en caché de imágenes. Cuando se carga una imagen, se almacenará en la memoria caché. Cuando se cargue la misma imagen la próxima vez, se puede obtener directamente del caché, evitando solicitudes de red innecesarias. El uso de la clase ImageCache se puede lograr mediante el siguiente código:

ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小

Precargar imágenes:

Para algunas imágenes de uso común, se pueden precargar cuando se inicia la aplicación, lo que puede evitar la carga solo cuando está en uso, mejorando así la velocidad de respuesta de la aplicación. Esto se puede lograr con el siguiente código:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    precacheImage(NetworkImage('https://example.com/my-image.jpg'), context);
    return MaterialApp(
      // ...
    );
  }
}

Comprimir imágenes:

Para algunas imágenes más grandes, se puede utilizar tecnología de compresión para reducir el tamaño de la imagen, reduciendo así el tiempo de transmisión de la red. Puede utilizar la biblioteca de imágenes de dardos para lograr la compresión de imágenes, por ejemplo:

import 'package:image/image.dart' as img;
import 'dart:io';
File compressedImage(File imageFile) {
  img.Image image = img.decodeImage(imageFile.readAsBytesSync());
  img.Image smallerImage = img.copyResize(image, width: 800, height: 600);
  return File(imageFile.path)
    ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 70));
}

Utilice una imagen de marcador de posición:

Para algunas imágenes que se cargan lentamente en la red, se pueden usar imágenes de marcador de posición para completarlas y mejorar la experiencia del usuario. Puedes usar el componente FadeInImage que viene con Flutter para implementar una imagen de marcador de posición, por ejemplo:

FadeInImage.assetNetwork(
  placeholder: 'assets/placeholder.png',
  image: 'https://example.com/my-image.jpg',
);

La optimización de la carga de imágenes es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr mediante el almacenamiento en caché.

Evite solicitudes de red excesivas

Evitar solicitudes de red excesivas es una técnica importante de optimización del rendimiento en Flutter. Las siguientes son algunas soluciones de optimización comúnmente utilizadas:

Utilice técnicas de almacenamiento en caché:

Para algunos datos que se solicitan repetidamente, se puede utilizar tecnología de almacenamiento en caché para evitar solicitudes de red excesivas. Puedes usar la biblioteca dio que viene con Flutter o bibliotecas de terceros como Hive y sqflite para implementar el almacenamiento en caché, por ejemplo:

Dio dio = Dio();
var cacheManager = CacheManager(
  Config(
    'my_cache_key',
    stalePeriod: const Duration(days: 1),
    maxNrOfCacheObjects: 20,
  ),
);
dio.interceptors.add(DioCacheInterceptor(
  options: CacheOptions(
    store: cacheManager,
    policy: CachePolicy.requestFirst,
    hitCacheOnErrorExcept: [401, 403],
  ),
));

Reducir el número de solicitudes:

Para algunos datos que se solicitan repetidamente, puede utilizar métodos como la paginación o el desplazamiento para reducir la cantidad de solicitudes, evitando así solicitudes de red excesivas. Por ejemplo, utilice la carga paginada en una lista para reducir la cantidad de solicitudes de red.

Solicitud de fusión:

Para algunos escenarios que necesitan solicitar múltiples interfaces al mismo tiempo, se pueden combinar múltiples solicitudes en una sola, reduciendo así la cantidad de solicitudes de red. Puedes usar la biblioteca dio que viene con Flutter o una biblioteca de terceros como chopper para implementar la combinación de solicitudes, por ejemplo:

final chopper = ChopperClient(
  baseUrl: 'https://api.github.com',
  services: [
    GithubApiService.create(),
  ],
  converter: JsonConverter(),
  interceptors: [
    HttpLoggingInterceptor(),
    HeadersInterceptor({'User-Agent': 'Chopper'}),

Por ejemplo, defina múltiples métodos de solicitud en GithubApiService:

part 'github_api_service.chopper.dart';

@ChopperApi(baseUrl: '/users')
abstract class GithubApiService extends ChopperService {
  static GithubApiService create([ChopperClient client]) => _$GithubApiService(client);

  @Get(path: '/{username}')
  Future<Response> getUser(@Path('username') String username);

  @Get(path: '/{username}/repos')
  Future<Response> getUserRepos(@Path('username') String username);
}

Luego, solo necesita combinar múltiples solicitudes cuando use:

final chopper = ChopperClient(
  baseUrl: 'https://api.github.com',
  services: [
    GithubApiService.create(),
  ],
  converter: JsonConverter(),
  interceptors: [
    HttpLoggingInterceptor(),
    HeadersInterceptor({'User-Agent': 'Chopper'}),
    CombineRequestInterceptor(),
  ],
);

final githubApiService = chopper.getService<GithubApiService>();

Response<List<dynamic>> response = await githubApiService.getUser('defunkt').then((userResponse) async {
  final user = userResponse.body;
  final reposResponse = await githubApiService.getUserRepos(user['login']);
  final repos = reposResponse.body;
  return Response<List<dynamic>>(repos, reposResponse.base);
});

Usando WebSockets:

Para algunos datos que deben actualizarse en tiempo real, se puede utilizar la tecnología WebSocket para evitar solicitudes de red excesivas. Puedes usar la biblioteca WebSocket que viene con Flutter o una biblioteca de terceros como SocketIO para implementar WebSocket, por ejemplo:

final channel = IOWebSocketChannel.connect('ws://localhost:1234');

channel.stream.listen((message) {
  print('Received: $message');
});

channel.sink.add('Hello, WebSocket!');

En resumen, evitar solicitudes de red excesivas es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr mediante el uso de tecnología de almacenamiento en caché, reduciendo la cantidad de solicitudes, fusionando solicitudes y usando WebSocket. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

Optimizar el diseño

La optimización del diseño es una técnica importante de optimización del rendimiento en Flutter. Las siguientes son algunas soluciones de optimización comúnmente utilizadas:

Utilice diseño flexible:

El uso del diseño Flex puede controlar el diseño de manera más flexible, evitando así cálculos de diseño innecesarios. Puede utilizar Fila, Columna, Flex y otros componentes para implementar el diseño Flex, por ejemplo:

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

Utilice CustomMultiChildLayout:

Utilice CustomMultiChildLayout para personalizar el diseño, evitando así cálculos de diseño innecesarios. Se pueden implementar diseños personalizados utilizando CustomMultiChildLayout, por ejemplo:

class MyLayoutDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    Size leadingSize = Size.zero;
    if (hasChild(0)) {
      leadingSize = layoutChild(0, BoxConstraints.loose(size));
      positionChild(0, Offset.zero);
    }
    if (hasChild(1)) {
      Size trailingSize = layoutChild(1, BoxConstraints.loose(size));
      positionChild(1, Offset(size.width - trailingSize.width, 0));
    }
  }
  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => true;
}

Luego al usar:

CustomMultiChildLayout(
  delegate: MyLayoutDelegate(),
  children: [
    LayoutId(
      id: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    LayoutId(
      id: 1,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)
``

Utilice pila indexada:

Utilice IndexedStack para cambiar rápidamente entre varios widgets, evitando así cálculos de diseño innecesarios. Puede utilizar IndexedStack para cambiar rápidamente varios widgets, por ejemplo:

IndexedStack(
  index: _currentIndex,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

Usar relación de aspecto:

Utilice AspectRatio para controlar la relación de aspecto del widget, evitando así cálculos de diseño innecesarios. AspectRatio se puede utilizar para controlar la relación de aspecto, por ejemplo:

AspectRatio(
  aspectRatio: 1.0 / 0.5,
  child: Container(
    width: 100,
    color: Colors.red,
  ),
)

La optimización del diseño es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr utilizando métodos como el diseño Flex, CustomMultiChildLayout, IndexedStack y AspectRatio. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

Utilice operaciones asincrónicas

El uso de operaciones asincrónicas es una técnica importante de optimización del rendimiento en Flutter. Las siguientes son algunas soluciones de operaciones asincrónicas comunes:

Utilice futuros:

El uso de Future permite realizar operaciones que requieren mucho tiempo en un subproceso en segundo plano sin bloquear el subproceso principal. Puede utilizar las palabras clave async y await para implementar operaciones asincrónicas, por ejemplo:

Future<String> fetchData() async {
  return Future.delayed(Duration(seconds: 1), () => 'Hello, world!');
}

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
)

Utilice Future.delayed para simular una operación que tarda 1 segundo y utilice FutureBuilder para mostrar el resultado de la operación asincrónica.

Utilice aislados:

Utilice Isolate para realizar operaciones que requieren mucho tiempo en varios subprocesos, evitando así bloquear el subproceso principal. Puedes usar la función de cálculo que viene con Flutter para implementar Isolate, por ejemplo:

Future<String> fetchData(String input) async {
  await Future.delayed(Duration(seconds: 1));
  return 'Hello, $input!';
}

FutureBuilder(
  future: compute(fetchData, 'world'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
)

Utilice la función de cálculo para ejecutar operaciones que requieren mucho tiempo en otro subproceso y utilice FutureBuilder para mostrar los resultados de las operaciones asincrónicas.

Usar transmisiones:

El uso de Stream permite el procesamiento asincrónico de flujos de datos, evitando así el bloqueo del hilo principal. StreamController se puede utilizar para crear y administrar Stream, por ejemplo:

StreamController<int> _counterController = StreamController<int>();
int _counter = 0;

void _incrementCounter() {
  _counter++;
  _counterController.sink.add(_counter);
}

@override
void dispose() {
  _counterController.close();
  super.dispose();
}

StreamBuilder<int>(
  stream: _counterController.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Counter: ${snapshot.data}');
    } else {
      return CircularProgressIndicator();
    }
  },
)

Cree un flujo de datos usando StreamController y agregue datos al flujo de datos cuando se haga clic en el botón. Utilice StreamBuilder para mostrar los resultados del flujo de datos.

Usando async/await y Future.wait:

El uso de async/await y Future.wait puede ejecutar múltiples operaciones asincrónicas al mismo tiempo y esperar a que se completen todas las operaciones antes de procesar los resultados de manera uniforme. Por ejemplo:

Future<List<String>> fetchData() async {
  List<Future<String>> futures = [
    Future.delayed(Duration(seconds: 1), () => 'Hello'),
    Future.delayed(Duration(seconds: 2), () => 'World'),
  ];
  List<String> results = await Future.wait(futures);
  return results;
}

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        return Text(snapshot.data.join(' '));
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else {
        return Text('No data');
      }
    } else {
      return CircularProgressIndicator();
    }
  },
)

Utilice Future.delayed para simular dos operaciones que requieren mucho tiempo y utilice Future.wait para realizar estas dos operaciones al mismo tiempo. Una vez completadas todas las operaciones, utilice FutureBuilder para mostrar los resultados de las operaciones asincrónicas.

Por lo tanto, el uso de operaciones asincrónicas es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr mediante el uso de métodos como Future, Isolate, Stream, async/await y Future.wait. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

evitar el uso excesivo de memoria

Evitar el uso excesivo de memoria es una técnica importante de optimización del rendimiento en Flutter. Aquí hay algunas soluciones de optimización comunes:

Evite la creación de objetos innecesarios:

Evitar la creación innecesaria de objetos reduce el uso de memoria y mejora el rendimiento de la aplicación. Puede utilizar la palabra clave const para evitar crear el mismo objeto repetidamente, por ejemplo:

const TextStyle style = TextStyle(fontSize: 16, color: Colors.black);

Utilice compresión de imágenes:

Para algunas imágenes más grandes, se pueden utilizar técnicas de compresión para reducir el tamaño de la imagen, reduciendo así el uso de memoria. Puede utilizar la biblioteca de imágenes de dardos para lograr la compresión de imágenes, por ejemplo:

import 'package:image/image.dart' as img;
import 'dart:io';
File compressedImage(File imageFile) {
  img.Image image = img.decodeImage(imageFile.readAsBytesSync());
  img.Image smallerImage = img.copyResize(image, width: 800, height: 600);
  return File(imageFile.path)
    ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 70));
}

Libere recursos inútiles a tiempo:

La liberación oportuna de recursos inútiles puede evitar pérdidas de memoria y reducir así el uso de memoria. Puede utilizar el método de eliminación para liberar recursos inútiles, por ejemplo:

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: TextField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: 'Username',
        ),
      ),
    );
  }
}

Utilice el método de disposición para liberar recursos TextEditingController inútiles.

Utilice técnicas de almacenamiento en caché:

Utilice técnicas de almacenamiento en caché para evitar la creación repetida de los mismos objetos, reduciendo así el uso de memoria. Puedes usar la clase ImageCache que viene con Flutter para implementar el almacenamiento en caché de imágenes, por ejemplo:

ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小

Evitar el uso excesivo de memoria es una técnica importante de optimización del rendimiento en Flutter, que se puede lograr evitando la creación innecesaria de objetos, utilizando la compresión de imágenes, liberando recursos inútiles a tiempo y utilizando tecnología de almacenamiento en caché. Debe seleccionarse y aplicarse de acuerdo con el escenario de aplicación real.

Usar recarga en caliente

El uso de la recarga en caliente es una técnica de desarrollo importante en Flutter. A continuación se muestran algunas soluciones de recarga en caliente de uso común:

Utilice la herramienta de línea de comando Flutter:

La recarga en caliente se puede implementar utilizando la herramienta de línea de comandos Flutter para obtener una vista previa rápida del efecto de modificación de la aplicación. Puede usar el comando flutter run para iniciar la aplicación y usar la tecla r o R para activar la recarga en caliente, por ejemplo:

flutter run

La recarga en caliente se puede activar presionando la tecla r o R en el terminal después del arranque.

Usando el complemento Flutter:

Utilice el complemento Flutter para implementar la recarga en caliente en la herramienta de desarrollo, a fin de obtener una vista previa rápida del efecto de modificación de la aplicación. Puede utilizar Android Studio, Visual Studio Code y otras herramientas de desarrollo e instalar el complemento Flutter, por ejemplo:

Android Studio: instale el complemento Flutter y use las teclas Ctrl+\ o Ctrl+R para activar la recarga en caliente.
Código de Visual Studio: instale el complemento Flutter y use Ctrl+F5 para activar la recarga en caliente.

Cuando utilice la recarga en caliente de las herramientas de desarrollo, primero debe iniciar la aplicación y centrarse en el editor.

Usando las herramientas de desarrollo de Flutter:

Utilice Flutter DevTools para implementar la recarga en caliente en el navegador, lo que le permitirá obtener una vista previa rápida de los efectos modificados de la aplicación. Puede utilizar la función de recarga en caliente de Flutter DevTools, por ejemplo:

Inicie la aplicación con el comando flutter run y especifique el número de puerto con la opción --observatory-port:

flutter run --observatory-port 8888

Abra un navegador, visite http://localhost:8888/ e inicie DevTools.
Seleccione la opción "Recarga en caliente" en DevTools y haga clic en el botón "Recargar" para activar una recarga en caliente.

Cuando utilice la recarga en caliente de Flutter DevTools, primero debe iniciar la aplicación e iniciar DevTools.

El uso de la recarga en caliente es una técnica de desarrollo importante en Flutter, que se puede lograr utilizando la herramienta de línea de comandos de Flutter, el complemento de Flutter, Flutter DevTools, etc. Debe seleccionarse y aplicarse de acuerdo con el escenario de desarrollo real.

Lo anterior y demás, todavía hay puntos en los que puedes pensar, puedes comentármelo y lo actualizaré lentamente. La optimización es infinita, ¡podemos hacerlo mejor!