J'utilise des cartes dans Flutter et je veux l'indicateur de progression en bas à gauche pendant 2 secondes tout en appuyant sur la carte pour qu'une autre page se charge correctement. Quelqu'un sait-il comment ajouter?
Container(
height: 130,
child: Card(
child: Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.setting),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () async {
// I try this one but not working
// Flushbar(
//
// showProgressIndicator: true,
// duration: Duration(seconds: 2),
// );
getDetails().then((myCardlocations) {
Navigator
.of(context)
.pushNamed('/myCardlocations',
arguments: ObjectLocations(locations, 'myCardlocations'));
}
);
}
),
),
],
),
),
),
3 Réponses :
Vous pouvez faire quelque chose comme ça en utilisant Stack et CircularProgressIndicator..
class _MyWidgetState extends State<MyWidget> {
bool isLoading = false;
@override
Widget build(BuildContext context) {
return Container(
height: 130,
child: Stack(
children: [
Container(
height: 130,
child: Card(
child: Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () async {
setState(() {
isLoading = true;
});
getDetails().then((myCardLocations) {
setState(() {
isLoading = false;
});
// navigation code here
});
},
),
),
],
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: isLoading
? Padding(
padding: EdgeInsets.fromLTRB(15,0,0,15),
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(),
),
)
: SizedBox(),
),
],
),
);
}
}
Edit:
On dirait que j'ai mal compris la question. Plus précisément, l'endroit où afficher l'indicateur de progression. Quoi qu'il en soit, si vous avez l'idée, vous pouvez placer l'indicateur à un endroit différent selon vos besoins.
1. Vous devez définir une GlobalKey pour le Scaffold afin de pouvoir utiliser un SnackBar ( vous pouvez définir la GloablKey dans State) de votre page .
void _showLoading() {
_scaffoldKey.currentState.showSnackBar(new SnackBar(
duration: new Duration(seconds: 2),
content: new Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text("Loading...")
],
),
));
// call to your getDetails and its steps should be here
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("My app"),
),
body: Center(
child: GestureDetector(
child: Card(
child: Row(children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)),
])),
onTap: () => _showLoading(),
)),
);
}
}
2. Vous devez définir le clé pour Scaffold.
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
...
3. Vous devez envelopper la Card avec un GestureDetector et définissez la fonction onTap pour appeler showLoading qui affiche un SnackBar en bas de l'écran. Appelez votre fonction getDetails dans le showLoading . Code complet (sauf l'étape de définition de la clé):
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
Remarque: vous pouvez également styliser le SnackBar . p>
Résultat:
oh ok, je comprends maintenant. Donc, l'OP voulait montrer un indicateur en bas à gauche de la page. Stupide de ma part, j'ai écrit une réponse pour afficher un indicateur en bas à gauche de la Card lol. Je pense que je vais en prendre note dans ma réponse. :RÉ
Ce n'est pas grave, cela peut encore être utile pour quelqu'un confronté au même problème plus tard. @JigarPatel
Il y a certaines choses que je voudrais mentionner avant de donner la réponse réelle.
class _MyHomePageState extends State<MyHomePage> {
// this takes care of the show/hide of your progress indicator
bool _showProgress = false;
// this takes care of the operation
void pageTransit(){
// first show when the ListTile is clicked
setState(() => _showProgress = true);
Future.delayed(Duration(seconds: 2), (){
// hide it after 2 seconds
setState(() => _showProgress = false);
// do the page trnasition here
//getDetails().then((myCardlocations) {
//Navigator.of(context).pushNamed('/myCardlocations',
//arguments: ObjectLocations(locations, 'myCardlocations'));
//}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
height: MediaQuery.of(context).size.height * 0.1,
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// use your items here, based upon the bool value show hide your
// progress indicator
Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () => pageTransit()
)
)
]
),
// show/hide in the card
_showProgress ? LinearProgressIndicator() : Container()
]
)
)
)
);
}
}
Widget à l'aide de la valeur booléenne , et apporter des modifications en conséquence Widget . Afficher / masquer en fonction des données MediaQuery pour indiquer la hauteur. C'est un moyen plus efficace de donner les dimensions en fonction de toutes les tailles de téléphone. Comme match-parent dans Android Studio . Faites le calcul en conséquence, j'ai également montré dans le code Column(
children: [
Row(),
bool val ? LinearProgressIndicator() : Container() // Container() is nothing but an empty widget which shows nothing
]
)
Attention: je n'ai pas utilisé getData , car il n'est pas défini correctement mais vous pouvez l'appeler la fonction in que je vais vous montrer dans le code, c'est-à-dire pageTransit () . Suivez les commentaires et vous êtes prêt à partir
Future.delayed(Duration(seconds: your_time, (){
//it will perform this operation after that much of seconds
}));
Résultat
Regardez le ProgressIndicator , il y reste pendant 2 secondes, puis s'en va
Découvrez ma réponse, faites-moi savoir si c'était une partie de votre utilisation ou non :)