Je souhaite afficher la vue de chargement en plein écran en flutter lors de l'appel d'API. Mais lorsque j'ajoute un widget de chargement dans le corps de l'échafaudage, il apparaît après la barre d'applications et le navigateur inférieur.
Je passe beaucoup de temps à afficher la vue de chargement en plein écran. De plus, je souhaite empêcher toute action en retour lors de l'appel d'API.
4 Réponses :
N'avez-vous pas pensé à supprimer l'échafaudage pour l'écran de chargement?
Dans mon application, il n'y a pas d'écran de chargement, mais lorsque j'appelle l'API, je dois afficher le chargeur comme github.com/SVProgressHUD / SVProgressHUD . pendant l'appel d'API et empêche également le retour.
Alors, qu'est-ce que vous voulez? Un dialogue? Ou une vue de chargement en plein écran? Si vous voulez une vue de chargement en plein écran, vous avez besoin que l'échafaudage fasse uniquement partie de la vue normale, sans qu'il soit dans l'arborescence des widgets dans la vue de chargement
@DhavalPatel Il semble que vous n'ayez jamais résolu votre problème. Comme je l'ai déjà dit, votre "chargeur" doit être à l'extérieur de l'échafaudage. Aussi simple que cela.
Eh bien, puisque vous utilisez Scaffold , utilisez sa méthode showDialog () .
Il a une propriété appelée barrièreDismissible code> que si vous définissez sur false, l'utilisateur ne pourra pas fermer ou interagir avec l'écran en dehors de celui-ci.
@override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(
body: Container(),
),
onWillPop: _onBackButton
);
}
Future<bool> _onBackButton() {
// Implement your logic
return Future.value(false);
}
Une fois que vous avez terminé avec l'API chargement, appelez Navigator.pop (contexte); pour fermer la boîte de dialogue.
Pour empêcher l'utilisateur de cliquer sur le bouton Précédent de la boîte de dialogue, en la fermant, enveloppez votre Scaffold dans un widget WillPopScope et implémenter la fonction onWillPop.
void _openLoadingDialog(BuildContext context) {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: CircularProgressIndicator(),
);
},
);
}
Si vous renvoyez false dessus, l'utilisateur ne sera pas capable d'appuyer sur le bouton retour. Utilisez donc n'importe quelle logique que vous désirez, par exemple « Si je charge, retournez false, sinon retournez true ».
L'utilisation de showDialog peut perturber le contexte. consultez pub.dev/packages/screen_loader .
Vous pouvez utiliser cette boîte de dialogue pour le chargement en plein écran progress_dialog
isLoading , utilisez-la pour empêcher la navigation en arrière. par exemple: // --------------- some_screen.dart ---------------
import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';
class SomeScreen extends StatefulWidget {
@override
_SomeScreenState createState() => _SomeScreenState();
}
class _SomeScreenState extends State<SomeScreen> with ScreenLoader<SomeScreen> {
getData() {
this.performFuture(NetworkService.callApi);
}
@override
Widget screen(BuildContext context) {
return WillPopScope(
child: Scaffold(
// your beautiful design..
),
onWillPop: () async {
return !isLoading;
},
);
}
}
// --------------- app_api.dart ---------------
class NetworkService {
static Future callApi() async {
}
}
REMARQUE : vous aurez besoin de voir la définition de performFuture pour voir comment cela fonctionne pour différents scénarios.
Pour ce faire: stackoverflow.com/a/64387933/10563627