Tutoriel et exemples de Flutter AlertDialog
Dans ce tutoriel, nous allons examiner les options pour créer des dialogues d'alerte dans Flutter. Il s'agit de les créer avec ou sans paquets tiers.
Qu'est-ce qu'un dialoG d'alerte ?
Un dialogue d'alerte informe l'utilisateur des situations qui nécessitent un accusé de réception.
Qu'est-ce que Flutter ?
*Flutter est le kit de développement d'applications mobiles de Google permettant de créer des interfaces natives de haute qualité sur iOS et Android en un temps record.
Flutter fonctionne avec du code existant, est utilisé par des développeurs et des organisations du monde entier, et est gratuit et open source.
Exemple 1 : Exemple de AlertDialog simple Flutter
Regardons un exemple de flutter alertdialog simple avec un titre et des descriptions. Dans cet exemple, nous rendons d'abord un bouton plat qui, lorsque l'utilisateur appuie ou clique, ouvre un dialogue d'alerte. Dans cet exemple, nous n'utilisons pas de bibliothèque tierce.
Voici l'application en mode paysage :
Tutoriel vidéo (Chaîne TV ProgrammingWizards)
Nous avons un tutoriel vidéo comme alternative à cet exemple. Si vous préférez les tutoriels comme celui-ci, il serait bon de vous [abonner à notre chaîne YouTube] (https://www.youtube.com/channel/UCpdkWp2zh5Qv1ZWlnqswdCw). Fondamentalement, nous avons une télévision pour la programmation où faire des tutoriels quotidiens en particulier android.
Voici les fichiers que nous explorons :
- pubspec.yaml
- lib/main.dart
Étape 1 : Dépendances
Flutter prend en charge l'utilisation de paquets partagés contribués par d'autres développeurs aux écosystèmes Flutter et Dart. Cela vous permet de construire rapidement votre application sans avoir à tout développer à partir de zéro.
Nous allons ajouter des paquets dans ce fichier.
- Ouvrez le fichier
pubspec.yamlsitué dans votre dossier d'application, et ajoutez les dépendances sous dependencies. - Si c'est une tierce partie, vous devez l'installer.
Depuis le terminal : Exécutezflutter packages get
OU
Depuis Android Studio/IntelliJ : Cliquez sur "Packages Get" dans le ruban d'action en haut de pubspec.yaml.
Depuis VS Code : Cliquez sur "Get Packages" situé dans le côté droit du ruban d'action en haut de pubspec.yaml.
flutter est toujours notre dépendance sdk car nous l'utilisons pour développer nos apps ios et android.
name: mr_alert_dialog
description: A new Flutter project.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
Comme vous pouvez le voir, nous avons utilisé les paquets standards et aucune bibliothèque tierce.
Étape 2 : Écrire le code
main.dart est l'endroit où nous écrivons notre code flutter en langage de programmation dart. En Dart, il est très courant d'écrire plusieurs classes dans un seul fichier. Donc ce simple fichier aura trois classes.
**1. Comment importer des paquets dans Flutter/Dart ?
Mais d'abord nous avons besoin d'importer certains paquets et nous le faisons en utilisant le mot-clé import en dart.
import 'package:flutter/material.dart';
Voici les paquets que nous importons :
- material.dart : nous donnera les widgets et le thème de material design.
2. Comment faire des classes dans Flutter/Dart
Dans Dart, comme dans la plupart des langages de programmation de style C, vous créez une classe en utilisant le mot-clé class. Les classes sont un mécanisme d'encapsulation dans les langages de programmation orientés objet.
Dans ce cas, nous créons trois classes :
class MyApp extends StatelessWidget {..}
class Home extends StatefulWidget {..}
Notre première classe dérive de StatelessWidget et implémente la méthode build(). Cette méthode va construire un widget MaterialApp avec le titre, l'accueil et le thème définis et le retourner en tant que widget.
La seconde classe dérive de StatefulWidget et surcharge la méthode createState().
Voici le code source complet :
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter AlertDialog',
home: Scaffold(
appBar: AppBar(
title: Text("AlertDialog Example"),
),
body: Home(),
),
theme: new ThemeData(primaryColor: Colors.orange),
);
}
}
class Home extends StatelessWidget {
/**
Comstruct our widget and return it.
*/
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type AlertDialog
return AlertDialog(
title: new Text("AlertDialog Class"),
content: new Text("Creates an alert dialog.Typically used in conjunction with showDialog."+
"The contentPadding must not be null. The titlePadding defaults to null, which implies a default."),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
child: Text('Show AlertDialog'),
),
);
}
}
void main() {
runApp(new MyApp());
}
//end
Exécution des applications Flutter
Assurez-vous simplement que votre appareil ou émulateur est en cours d'exécution et cliquez sur le bouton run dans android studio, il va automatiquement choisir l'appareil et installer l'application.
En alternative, vous pouvez utiliser le terminal ou l'invite de commande. Naviguez/Cd sur la page de la racine du projet et tapez ceci :
flutter.bat build apk
Cela va construire l'APK que vous pouvez ensuite glisser et installer sur votre appareil. Le processus de construction dans ma machine prend environ trois minutes, ce qui n'est pas mal.
Exemple 2 : Dialogue de confirmation de Flutter
import 'package:flutter/material.dart';
void main(){ runApp(new MaterialApp(
home: new MyApp(),
));
}
enum MyDialogueAction{
yes,
no,
maybe
}
class MyApp extends StatefulWidget {
MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
String _text = '';
void _onChange(String value) {
setState((){
_text = value;
});
}
void _dialogueResult(MyDialogueAction value){
print('you selected $value');
Navigator.pop(context);
}
void _showAlert(String value){
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text('Alert!'),
content: new Text(value,
style: new TextStyle(fontSize: 30.0),),
actions: <Widget>[
new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.yes);}, child: new Text('yes')),
new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.no);}, child: new Text('no')),
],
)
);
}
Widget build (BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text('Alert Demo'),
),body: new Container(
child: new Column(
children: <Widget>[
new TextField(onChanged: (String value){ _onChange(value);},),
new RaisedButton(
onPressed: (){_showAlert(_text);},
child: new Text('Press me'),
)
],
),
),
);
}
}
Exemple 3 : Exemple de dialogue animé, Giffy
Si vous voulez en avoir un peu plus avec vos dialogues d'alerte, alors vous devez utiliser des paquets tiers tels que celui-ci.
Giffy Dialog est un beau dialogue d'alerte personnalisé pour Flutter fortement inspiré de FancyAlertDialog-Android.
Le code source est 100% Dart, et tout réside dans le dossier /lib.
Grâce à cette solution, vous pouvez charger des en-têtes de dialogue en image gif localement ou à distance depuis le réseau.
Voici une démo de ce dialogue en utilisation :
Étape 1 : L'installer
Dans votre pubspec.yaml ajoutez ce paquet comme une dépendance :
dependencies:
giffy_dialog: 1.8.0
flutter pub get pour le récupérer.
Step 2 : Préparer les images
Ajoutez quelques images dans le dossier assets ou préparez des urls d'images.
Étape 3 : Écrire le code
Commencez par importer giffy_dialog :
import 'package:giffy_dialog/giffy_dialog.dart';
Voici comment créer un dialogue avec une image d'en-tête chargée depuis le réseau :
onPressed: () {
showDialog(
context: context,builder: (_) => NetworkGiffyDialog(
imageUrl:"https://raw.githubusercontent.com/Shashank02051997/
FancyGifDialog-Android/master/GIF's/gif14.gif",
title: Text('Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w600)),
description:Text('This is a granny eating chocolate dialog box.
This library helps you easily create fancy giffy dialog',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.BOTTOM_TOP,
onOkButtonPressed: () {},
) );
}
Et voici comment vous créez un dialogue avec une image d'en-tête chargée à partir du dossier des actifs :
onPressed: () {
showDialog(
context: context,builder: (_) => AssetGiffyDialog(
imagePath: 'assets/men_wearing_jacket.gif',
title: Text('Men Wearing Jackets',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text('This is a men wearing jackets dialog box.
This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
entryAnimation: EntryAnimation.RIGHT_LEFT,
onOkButtonPressed: () {},
) );
}
Exemple complet
Commencez par installer la bibliothèque comme nous l'avons vu plus haut.
Puis remplacez votre main.dart par le code suivant :
main.dart
import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
void main() => runApp(new MyApp());
const List<Key> keys = [
Key("Network"),
Key("NetworkDialog"),
Key("Flare"),
Key("FlareDialog"),
Key("Asset"),
Key("AssetDialog")
];
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Giffy Dialog Demo',
theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Giffy Dialog Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
color: Colors.teal,
child: Text(
"Network Giffy",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
"https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
fit: BoxFit.cover,
),
entryAnimation: EntryAnimation.TOP_LEFT,
title: Text(
'Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'This is a granny eating chocolate dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[2],
color: Colors.teal,
child: Text(
'Flare Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
'Space Reloading',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.DEFAULT,
description: Text(
'This is a space reloading dialog box. This library helps you easily create fancy flare dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[4],
color: Colors.teal,
child: Text(
'Asset Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset(
'assets/men_wearing_jacket.gif',
fit: BoxFit.cover,
),
title: Text(
'Men Wearing Jackets',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.BOTTOM_RIGHT,
description: Text(
'This is a men wearing jackets dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
],
),
),
);
}
}
Référence
Voici les liens de référence :
| --- |
|---|