Flutter est un framework de développement mobile hautes performances et de haute qualité, mais dans le développement réel, afin de garantir la fluidité et la vitesse de réponse de l'application, une certaine optimisation des performances est encore nécessaire. Voici quelques conseils courants d’optimisation des performances Flutter :
- Réduire les reconstructions de widgets : les reconstructions de widgets sont un problème de performances courant dans les applications Flutter, car elles entraînent un rendu et une peinture inutiles. Les méthodes permettant de réduire la reconstruction du widget incluent l'utilisation du constructeur const, l'utilisation de Key pour identifier le widget, l'utilisation de StatefulWidget, etc.
- Évitez les redessins excessifs de l’interface utilisateur : éviter les redessins excessifs de l’interface utilisateur peut améliorer les performances de l’application. Vous pouvez utiliser la méthode ShouldRepaint pour déterminer si un redessin est nécessaire.
- Optimiser le chargement des images : dans Flutter, le chargement des images est un problème de performances courant. Le chargement des images peut être optimisé à l'aide de techniques de mise en cache ou de préchargement pour réduire les requêtes réseau inutiles.
- Évitez les requêtes réseau excessives : des requêtes réseau excessives peuvent ralentir la réponse de votre application. Vous pouvez utiliser la mise en cache ou réduire le nombre de requêtes pour réduire les requêtes réseau, améliorant ainsi les performances des applications.
- Optimisation de la mise en page : la mise en page est l'un des facteurs importants dans les performances de l'application. Vous pouvez utiliser la mise en page Flex ou CustomMultiChildLayout pour optimiser la mise en page afin d'améliorer les performances de l'application.
- Utiliser des opérations asynchrones : l'utilisation d'opérations asynchrones dans l'application peut éviter le problème du gel de l'interface utilisateur. Les opérations asynchrones telles que Future et Stream peuvent être utilisées pour optimiser les performances des applications.
- Évitez une utilisation excessive de la mémoire : une utilisation excessive de la mémoire peut rendre votre application moins réactive. Vous pouvez utiliser l'outil d'analyse de la mémoire fourni avec Flutter pour détecter les fuites de mémoire et éviter une utilisation excessive de la mémoire.
- Utiliser le rechargement à chaud : le rechargement à chaud est une fonctionnalité importante de Flutter, qui permet de prévisualiser et de déboguer rapidement les applications. L'utilisation du rechargement à chaud peut améliorer l'efficacité du développement, accélérant ainsi le processus de développement d'applications.
Les techniques d'optimisation des performances de Flutter incluent la réduction des reconstructions de widgets, l'évitement d'un redessinage excessif de l'interface utilisateur, l'optimisation du chargement des images, l'évitement des requêtes réseau excessives, l'optimisation de la mise en page, l'utilisation d'opérations asynchrones, l'évitement d'une utilisation excessive de la mémoire, l'utilisation du rechargement à chaud, etc. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
Réduire les reconstructions de widgets
La réduction des reconstructions de widgets est une technique d'optimisation des performances importante dans Flutter, voici quelques exemples :
- Créez un widget constant à l'aide du constructeur const :
class MyWidget extends StatelessWidget {
final String text;
const MyWidget({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(text);
}
}
Dans l'exemple ci-dessus, le constructeur const est utilisé pour créer un Widget constant, ce qui évite une reconstruction inutile du Widget.
- Utilisez la clé pour identifier le 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);
}
}
Utilisez la clé pour identifier le widget, ce qui peut éviter d'être confondu avec un autre widget lorsque le widget est reconstruit.
- Utilisez StatefulWidget pour gérer l'état :
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');
}
}
Utilisez un StatefulWidget pour gérer l'état du compteur, ce qui évite de reconstruire l'intégralité du Widget.
- Utilisez Builder pour créer des sous-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');
});
}
}
Utilisez le générateur pour créer des sous-widgets, ce qui peut éviter de reconstruire l'intégralité du widget.
La réduction de la reconstruction du widget est une technique d'optimisation des performances importante dans Flutter, qui peut être réalisée en utilisant le constructeur const, la clé pour identifier le widget, le StatefulWidget, le constructeur et d'autres méthodes. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
Évitez les redessins excessifs de l’interface utilisateur
Éviter de redessiner excessivement l'interface utilisateur est une technique d'optimisation des performances importante dans Flutter. Voici quelques exemples d'optimisation courants :
- Utilisez la méthode ShouldRepaint :
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;
}
}
Utilisez la méthode ShouldRepaint pour déterminer si une repeinture est nécessaire. Lorsque le nombre change, redessinez le canevas.
- Utilisez ClipRect pour éviter de dessiner inutilement :
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipRect(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
}
}
Utilisez ClipRect pour limiter la plage de dessin du conteneur afin d'éviter tout dessin inutile.
- Utilisez Offstage pour éviter les calculs de mise en page inutiles :
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,
),
),
],
);
}
}
Utilisez Offstage pour éviter les calculs de mise en page lorsque le conteneur n'est pas visible.
- Utilisez RepaintBoundary pour éviter de dessiner à plusieurs reprises :
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: Container(
width: 100,
height: 100,
child: CustomPaint(
painter: MyPainter(),
),
),
);
}
}
Utilisez RepaintBoundary pour éviter de dessiner le même CustomPaint à plusieurs reprises.
Éviter un redessinage excessif de l'interface utilisateur est une technique d'optimisation des performances importante dans Flutter, qui peut être obtenue en utilisant la méthode ShouldRepaint, ClipRect, Offstage, RepaintBoundary et d'autres méthodes.
Optimiser le chargement des images
L'optimisation du chargement des images est une technique d'optimisation des performances importante dans Flutter. Voici quelques solutions d'optimisation couramment utilisées :
- Utilisez des techniques de mise en cache :
Flutter fournit la classe ImageCache pour implémenter la mise en cache des images. Lorsqu'une image est chargée, elle sera mise en cache en mémoire. Lorsque la même image sera chargée la prochaine fois, elle pourra être obtenue directement à partir du cache, évitant ainsi les requêtes réseau inutiles. L'utilisation de la classe ImageCache peut être réalisée par le code suivant :
ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小
- Précharger les images :
Pour certaines images couramment utilisées, elles peuvent être préchargées au démarrage de l'application, ce qui permet d'éviter le chargement uniquement lors de l'utilisation, améliorant ainsi la vitesse de réponse de l'application. Ceci peut être réalisé avec le code suivant :
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
precacheImage(NetworkImage('https://example.com/my-image.jpg'), context);
return MaterialApp(
// ...
);
}
}
- Compresser les images :
Pour certaines images plus grandes, la technologie de compression peut être utilisée pour réduire la taille de l’image, réduisant ainsi le temps de transmission sur le réseau. Vous pouvez utiliser la bibliothèque dart-image pour réaliser une compression d'image, par exemple :
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));
}
- Utilisez une image d'espace réservé :
Pour certaines images qui se chargent lentement sur le réseau, des images fictives peuvent être utilisées pour les remplir afin d'améliorer l'expérience utilisateur. Vous pouvez utiliser le composant FadeInImage fourni avec Flutter pour implémenter une image d'espace réservé, par exemple :
FadeInImage.assetNetwork(
placeholder: 'assets/placeholder.png',
image: 'https://example.com/my-image.jpg',
);
L'optimisation du chargement des images est une technique d'optimisation des performances importante dans Flutter, qui peut être réalisée en utilisant la mise en cache.
Évitez les demandes réseau excessives
Éviter les requêtes réseau excessives est une technique d'optimisation des performances importante dans Flutter. Voici quelques solutions d'optimisation couramment utilisées :
- Utilisez des techniques de mise en cache :
Pour certaines données demandées à plusieurs reprises, la technologie de mise en cache peut être utilisée pour éviter des requêtes réseau excessives. Vous pouvez utiliser la bibliothèque dio fournie avec Flutter ou des bibliothèques tierces comme Hive et sqflite pour implémenter la mise en cache, par exemple :
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],
),
));
- Réduisez le nombre de demandes :
Pour certaines données demandées à plusieurs reprises, vous pouvez utiliser des méthodes telles que la pagination ou le défilement pour réduire le nombre de requêtes, évitant ainsi des requêtes réseau excessives. Par exemple, utilisez le chargement paginé dans une liste pour réduire le nombre de requêtes réseau.
- Demande de fusion :
Pour certains scénarios nécessitant de demander plusieurs interfaces en même temps, plusieurs requêtes peuvent être combinées en une seule requête, réduisant ainsi le nombre de requêtes réseau. Vous pouvez utiliser la bibliothèque dio fournie avec Flutter ou une bibliothèque tierce comme chopper pour implémenter la fusion de requêtes, par exemple :
final chopper = ChopperClient(
baseUrl: 'https://api.github.com',
services: [
GithubApiService.create(),
],
converter: JsonConverter(),
interceptors: [
HttpLoggingInterceptor(),
HeadersInterceptor({'User-Agent': 'Chopper'}),
Par exemple, définissez plusieurs méthodes de requête dans 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);
}
Ensuite, il vous suffit de combiner plusieurs requêtes lorsque vous utilisez :
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);
});
- Utilisation des WebSockets :
Pour certaines données devant être mises à jour en temps réel, la technologie WebSocket peut être utilisée pour éviter des requêtes réseau excessives. Vous pouvez utiliser la bibliothèque WebSocket fournie avec Flutter ou une bibliothèque tierce comme SocketIO pour implémenter WebSocket, par exemple :
final channel = IOWebSocketChannel.connect('ws://localhost:1234');
channel.stream.listen((message) {
print('Received: $message');
});
channel.sink.add('Hello, WebSocket!');
En bref, éviter les requêtes réseau excessives est une technique d'optimisation des performances importante dans Flutter, qui peut être obtenue en utilisant la technologie de mise en cache, en réduisant le nombre de requêtes, en fusionnant les requêtes et en utilisant WebSocket. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
Optimiser la mise en page
L'optimisation de la mise en page est une technique d'optimisation des performances importante dans Flutter. Voici quelques solutions d'optimisation couramment utilisées :
- Utiliser la disposition flexible :
L'utilisation de la mise en page Flex permet de contrôler la mise en page de manière plus flexible, évitant ainsi les calculs de mise en page inutiles. Vous pouvez utiliser Row, Column, Flex et d'autres composants pour implémenter la disposition Flex, par exemple :
Flex(
direction: Axis.horizontal,
children: [
Expanded(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
],
)
- Utilisez CustomMultiChildLayout :
Utilisez CustomMultiChildLayout pour personnaliser la mise en page, évitant ainsi les calculs de mise en page inutiles. Des mises en page personnalisées peuvent être implémentées à l'aide de CustomMultiChildLayout, par exemple :
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;
}
Puis lors de l'utilisation :
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,
),
),
],
)
``
- Utilisez IndexedStack :
Utilisez IndexedStack pour basculer rapidement entre plusieurs widgets, évitant ainsi les calculs de mise en page inutiles. Vous pouvez utiliser IndexedStack pour basculer rapidement entre plusieurs widgets, par exemple :
IndexedStack(
index: _currentIndex,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
)
- Utiliser le format d'image :
Utilisez AspectRatio pour contrôler le rapport hauteur/largeur du widget, évitant ainsi les calculs de mise en page inutiles. AspectRatio peut être utilisé pour contrôler le rapport hauteur/largeur, par exemple :
AspectRatio(
aspectRatio: 1.0 / 0.5,
child: Container(
width: 100,
color: Colors.red,
),
)
L'optimisation de la mise en page est une technique d'optimisation des performances importante dans Flutter, qui peut être réalisée à l'aide de méthodes telles que la mise en page Flex, CustomMultiChildLayout, IndexedStack et AspectRatio. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
Utiliser des opérations asynchrones
L'utilisation d'opérations asynchrones est une technique d'optimisation des performances importante dans Flutter. Voici quelques solutions d'opérations asynchrones courantes :
- Utiliser les contrats à terme :
L'utilisation de Future permet d'effectuer des opérations fastidieuses sur un thread d'arrière-plan sans bloquer le thread principal. Vous pouvez utiliser les mots-clés async et wait pour implémenter des opérations asynchrones, par exemple :
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();
}
},
)
Utilisez Future.delayed pour simuler une opération qui prend 1 seconde et utilisez FutureBuilder pour afficher le résultat de l'opération asynchrone.
- Utiliser des isolats :
Utilisez Isolate pour effectuer des opérations fastidieuses dans plusieurs threads, évitant ainsi de bloquer le thread principal. Vous pouvez utiliser la fonction de calcul fournie avec Flutter pour implémenter Isolate, par exemple :
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();
}
},
)
Utilisez la fonction de calcul pour exécuter des opérations fastidieuses dans un autre thread et utilisez FutureBuilder pour afficher les résultats des opérations asynchrones.
- Utiliser les flux :
L'utilisation de Stream permet un traitement asynchrone des flux de données, évitant ainsi de bloquer le thread principal. StreamController peut être utilisé pour créer et gérer Stream, par exemple :
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();
}
},
)
Créez un flux de données à l'aide de StreamController et ajoutez des données au flux de données lorsque vous cliquez sur le bouton. Utilisez StreamBuilder pour afficher les résultats du flux de données.
- Utilisation de async/await et Future.wait :
L'utilisation de async/await et Future.wait peut exécuter plusieurs opérations asynchrones en même temps et attendre la fin de toutes les opérations avant de traiter les résultats de manière uniforme. Par exemple:
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();
}
},
)
Utilisez Future.delayed pour simuler deux opérations fastidieuses et utilisez Future.wait pour effectuer ces deux opérations en même temps. Une fois toutes les opérations terminées, utilisez FutureBuilder pour afficher les résultats des opérations asynchrones.
Par conséquent, l'utilisation d'opérations asynchrones est une technique d'optimisation des performances importante dans Flutter, qui peut être réalisée en utilisant des méthodes telles que Future, Isolate, Stream, async/await et Future.wait. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
éviter une utilisation excessive de la mémoire
Éviter une utilisation excessive de la mémoire est une technique d'optimisation des performances importante dans Flutter. Voici quelques solutions d'optimisation courantes :
- Évitez la création d'objets inutiles :
Éviter la création d'objets inutiles réduit l'utilisation de la mémoire et améliore les performances des applications. Vous pouvez utiliser le mot-clé const pour éviter de créer le même objet à plusieurs reprises, par exemple :
const TextStyle style = TextStyle(fontSize: 16, color: Colors.black);
- Utiliser la compression d'image :
Pour certaines images plus grandes, des techniques de compression peuvent être utilisées pour réduire la taille de l'image, réduisant ainsi l'utilisation de la mémoire. Vous pouvez utiliser la bibliothèque dart-image pour réaliser une compression d'image, par exemple :
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));
}
- Libérez les ressources inutiles à temps :
La libération opportune des ressources inutiles peut éviter les fuites de mémoire, réduisant ainsi l'utilisation de la mémoire. Vous pouvez utiliser la méthode dispose pour libérer des ressources inutiles, par exemple :
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',
),
),
);
}
}
Utilisez la méthode dispose pour libérer les ressources TextEditingController inutiles.
- Utilisez des techniques de mise en cache :
Utilisez des techniques de mise en cache pour éviter la création répétée des mêmes objets, réduisant ainsi l'utilisation de la mémoire. Vous pouvez utiliser la classe ImageCache fournie avec Flutter pour implémenter la mise en cache des images, par exemple :
ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小
Éviter une utilisation excessive de la mémoire est une technique d'optimisation des performances importante dans Flutter, qui peut être obtenue en évitant la création d'objets inutiles, en utilisant la compression d'image, en libérant des ressources inutiles à temps et en utilisant la technologie de mise en cache. Il doit être sélectionné et appliqué en fonction du scénario d'application réel.
Utiliser le rechargement à chaud
L'utilisation du rechargement à chaud est une technique de développement importante dans Flutter. Voici quelques solutions de rechargement à chaud couramment utilisées :
- Utilisez l'outil de ligne de commande Flutter :
Le rechargement à chaud peut être implémenté à l'aide de l'outil de ligne de commande Flutter pour prévisualiser rapidement l'effet de modification de l'application. Vous pouvez utiliser la commande flutter run pour démarrer l'application et utiliser la touche r ou R pour déclencher le rechargement à chaud, par exemple :
flutter run
Le rechargement à chaud peut être déclenché en appuyant sur la touche r ou R du terminal après le démarrage.
- Utilisation du plugin Flutter :
Utilisez le plug-in Flutter pour implémenter le rechargement à chaud dans l'outil de développement, afin de prévisualiser rapidement l'effet de modification de l'application. Vous pouvez utiliser Android Studio, Visual Studio Code et d'autres outils de développement, et installer le plug-in Flutter, par exemple :
- Android Studio : installez le plugin Flutter et utilisez les touches Ctrl+\ ou Ctrl+R pour déclencher le rechargement à chaud.
- Visual Studio Code : installez le plugin Flutter et utilisez Ctrl+F5 pour déclencher le rechargement à chaud.
Lorsque vous utilisez le rechargement à chaud des outils de développement, vous devez d'abord démarrer l'application et mettre le focus sur l'éditeur.
- Utilisation des outils de développement Flutter :
Utilisez Flutter DevTools pour implémenter le rechargement à chaud dans le navigateur, vous permettant ainsi de prévisualiser rapidement les effets modifiés de l'application. Vous pouvez utiliser la fonction de rechargement à chaud de Flutter DevTools, par exemple :
- Démarrez l'application avec la commande flutter run et spécifiez le numéro de port avec l'option --observatory-port :
flutter run --observatory-port 8888
- Ouvrez un navigateur, visitez http://localhost:8888/ et démarrez DevTools.
- Sélectionnez l'option "Hot Reload" dans DevTools et cliquez sur le bouton "Reload" pour déclencher un rechargement à chaud.
Lorsque vous utilisez le rechargement à chaud de Flutter DevTools, vous devez d'abord démarrer l'application et démarrer DevTools.
L'utilisation du rechargement à chaud est une technique de développement importante dans Flutter, qui peut être réalisée en utilisant l'outil de ligne de commande Flutter, le plugin Flutter, Flutter DevTools, etc. Il doit être sélectionné et appliqué en fonction du scénario de développement réel.
Ce qui précède et ainsi de suite, il y a encore des points auxquels vous pouvez penser, vous pouvez en parler avec moi, et je le mettrai à jour lentement ! L'optimisation est infinie, nous pouvons faire mieux !