A) Ajout d’images (Assets) :
Click droit à la racine du projet : create Directory assets et create directory images
Puis Ajout dans le fichier pubsepc.yaml
assets:
- assets/images/lake.jpg
Pour inclure l’ensemble des images du dossier, juste préciser assets/images/
Utilisation de l’image dans le code
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Image from assets"), ), body: Image.asset('assets/images/lake.jpg'), // <-- image ), ); } }
B) Ajout d’image en provenance d’internet
// Get Image From Internet
String getUrlImage(Record record) {
String UrlImage = "https://picsum.photos/250?image=1042";
if (!record.artUri.isEmpty) {
if (isValidURL(record.artUri))
UrlImage = record.artUri;
}
return UrlImage;
}
///////////////////////////////////
// Function to validate URL
bool isValidURL(String url)
{
RegExp regExp = new RegExp("((http|https)://)(www.)?[a-zA-Z0-9@:%._\\+~#?&//=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%._\\+~#?&//=]*)");
if (url.isEmpty)
{
return false;
}
if(regExp.hasMatch(url))
{
return true;
}
else
{
return false;
}
}
C) Les échafaudages (Scaffold) :
Ressources : https://medium.com/flutterdevs/know-your-widgets-scaffold-in-flutter-292b8bc1281
D) Les listes :
Supprimer des items en glissant : https://flutter.dev/docs/cookbook/gestures/dismissible
Modifier l’ordre des items en glissant : https://flutterforyou.com/how-to-change-order-of-items-in-a-listview-in-flutter/
Modifier l’ordre et supprimer en glissant : https://stackoverflow.com/questions/62860457/how-to-use-reorderablelistview-with-dismissdirection-in-flutter
Liste avec multi sélection et recherche : https://github.com/CHB61/multi_select_flutter et https://pub.dev/packages/select_dialog
Séparation des éléments d’une liste avec join : https://www.woolha.com/tutorials/dart-join-list-to-string-with-separator-examples
Gestion de plusieurs éléments par ligne via une classe :
Tri des éléments d’une liste :
var intList = [0, 5, 2, 3, 8, 17, 11];
intList.sort();
print(intList);
var tringList = ['vue', 'kotlin','dart', 'angular', 'flutter'];
tringList.sort();
print(tringList);
– Avec la fonction compare, tri d’une liste d’objets :
class Customer {
String name;
int age;
Customer(this.name, this.age);
@override
String toString() {
return '{ ${this.name}, ${this.age} }';
}
}
main() {
List customers = [];
customers.add(Customer('Jack', 23));
customers.add(Customer('Adam', 27));
customers.add(Customer('Katherin', 25));
customers.sort((a, b) => a.age.compareTo(b.age));
print('Sort by Age: ' + customers.toString());
customers.sort((a, b) => a.name.compareTo(b.name));
print('Sort by Name: ' + customers.toString());
}
Références :
https://stackoverflow.com/questions/59692815/how-do-i-call-a-network-image-type-in-a-listview
https://www.woolha.com/tutorials/dart-inserting-elements-into-list-examples
https://bezkoder.com/dart-list/#Sort_a_List_of_objects_in_DartFlutter
https://pusher.com/tutorials/flutter-listviews
Deux listes à l’écran : https://www.javaer101.com/en/article/11607355.html
D) Les boutons actions flottants (comme dans GMAIL)
Voir l’enregistrement automatique
Ils sont de deux types
- FloatingActionButton
- FloatingActionButton.extended
1. FloatingActionButton
Par défaut création d’un bouton circulaire avec un « child widget ». Et une méthode onPressed avec un « widget » non obligatoire.
2. FloatingActionButton.extended
Ressources : https://proandroiddev.com/a-deep-dive-into-floatingactionbutton-in-flutter-bf95bee11627
Et les toasts et fenêtres de dialogue et d’alerte :
fluttertoast: ^8.0.3
awesome_dialog: ^1.3.2
E) Menus/groupes de boutons :
Différence entre RaisedButton et ElevatedButton : https://www.codegrepper.com/code-examples/whatever/flutter+raisedbutton+vs+elevated+button et https://www.woolha.com/tutorials/flutter-using-elevatedbutton-widget-examples#:~:text=Elevated%20Button%20is%20one%20of,been%20available%20since%20Flutter%201.22. et https://www.kindacode.com/article/working-with-elevatedbutton-in-flutter/
https://pub.dev/packages/floating_action_row/example
@override
Widget build(BuildContext context) {
var children = List<Widget>();
children.add(
FloatingActionRowButton(
icon: Icon(Icons.close), //Icons.close)
color:Colors.red,
onTap: () {_Fin();},
),
);
children.add(
FloatingActionRowDivider(),
);
children.add(
FloatingActionRowButton(
icon: Icon(Icons.add),
onTap: () {},
),
);
children.add(
FloatingActionRowDivider(),
);
children.add(
FloatingActionRowButton(
icon: Icon(Icons.delete), //arrow_forward
onTap: () {},
),
);
puis....
floatingActionButton: FloatingActionRow(
children: children,
color: Colors.blueAccent,
elevation: 4,
),https://pub.dev/packages/flutter_speed_dial
floatingActionButton: SpeedDial(
// both default to 16
marginRight: 18,
marginBottom: 20,
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22.0),
// this is ignored if animatedIcon is non null
// child: Icon(Icons.add),
visible: true,
// If true user is forced to close dial manually
// by tapping main button and overlay is not rendered.
closeManually: false,
curve: Curves.bounceIn,
overlayColor: Colors.black,
overlayOpacity: 0.5,
onOpen: () => print('OPENING DIAL'),
onClose: () => print('DIAL CLOSED'),
tooltip: 'Speed Dial',
heroTag: 'speed-dial-hero-tag',
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 8.0,
shape: CircleBorder(),
children: [
SpeedDialChild(
child: Icon(Icons.close),//Icons.accessibility),
backgroundColor: Colors.red,
label: 'Quit',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => _Fin()//print('FIRST CHILD')
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.blue,
label: 'Second',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('SECOND CHILD'),
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: 'Third',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('THIRD CHILD'),
),
],
),F) Bouton Image :
https://pub.dev/packages/imagebutton et https://medium.com/flutter-community/flutter-widgets-buttons-the-whole-picture-5662a3b58b8f
G) Welcome Screen / Splash Screen / Ecran d’accueil :
Splash Screen au démarrage pour éviter un écran blanc : https://pub.dev/packages/flutter_native_splash
On Boarding screen : https://pub.dev/packages/introduction_screen
https://www.hellohpc.com/flutter-how-to-create-attractive-onboarding-intro-screen-easily/
H) Bottom Navigation Bar et Menu Drawer
À l’intérieur d’un scaffold, instanciez votre Navigation Bar et votre body. Vous pouvez également ajouter une appBar si besoin. Dans votre BottomNavigationBar, ajoutez un currentIndex pour définir l’item en cours, un onTap pour l’action au clic, et votre liste d’items avec une icone et un title.
Ce qui donne :
class PageAccueil extends StatefulWidget {
PageAccueil({Key key, this.title}) : super(key: key);
final String title;
@override
_MaPageAccueilEtat createState() => _MaPageAccueilEtat();
}
class _MaPageAccueilEtat extends State {
int _selectedDrawerIndex = 0;
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();
default:
return new Text("");
}
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: _selectedDrawerIndex,
onTap: (int index) {
setState(() {
_selectedDrawerIndex = index;
});
},
items: [
new BottomNavigationBarItem(
icon: Icon(CupertinoIcons.dot_radiowaves_left_right),
/*new ImageIcon(AssetImage('images/ic_logo_large.png')),*/
label: 'Radio'),
new BottomNavigationBarItem(
icon: Icon(CupertinoIcons.bookmark), label: 'Favoris'),
new BottomNavigationBarItem(
icon: Icon(CupertinoIcons.list_bullet), label: 'Chaines')
],
),
body: _getDrawerItemWidget(_selectedDrawerIndex),
);
}
Pour changer les couleurs de la navigation bar :
et following properties to change the background, selected and unselected colors
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.white,
type: BottomNavigationBarType.fixed,
...
)
Navigation dans les pages de la BottomBar par programme :
Navigator.of(context, rootNavigator: true).pushReplacement(
MaterialPageRoute(builder: (context) => new PageAccueil()));
Interception de l’action ‘Back’ bouton retour du téléphone :
Il est nécessaire d’utiliser, dans la page souhaitée, WillPopScope
class maClasse extends StatelessWidget {
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
print('Backbutton pressed (device or appbar button), do whatever you want.');
//trigger leaving and use own data
//Navigator.pop(context, false);
Navigator.of(context, rootNavigator: true).pushReplacement(
MaterialPageRoute(builder: (context) => new PageAccueil()));
//we need to return a future
return Future.value(false);
},
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sélection des favoris',
theme: ThemeData(....
I) Internationalisation :
Références : https://phrase.com/blog/posts/how-to-internationalize-a-flutter-app/
Références :
https://stackoverflow.com/questions/48582963/flutter-how-to-execute-when-clicking-back-button
https://stackoverflow.com/questions/50452710/catch-android-back-button-event-on-flutter
https://stackoverflow.com/questions/52322340/flutter-how-to-remove-bottom-navigation-with-navigation
https://homework.family/menu-bottomnavigationbar-dans-flutter/
https://medium.com/codechai/flutter-6-bottom-navigation-38b202d9ca23
Le même principe est à appliquer pour le navigation Drawer
I) SharedPreferences, gestion des préférences :
Ajouter la dépendance https://pub.dev/packages/shared_preferences/install
Cf. https://fluttercorner.com/how-to-store-and-get-data-from-shared-preferences-in-flutter/
Créer une classe
import 'package:shared_preferences/shared_preferences.dart';
class StorageUtil {
static StorageUtil _storageUtil;
static SharedPreferences _preferences;
static Future<StorageUtil> getInstance() async {
if (_storageUtil == null) {
var secureStorage = StorageUtil._();
await secureStorage._init();
_storageUtil = secureStorage;
}
return _storageUtil;
}
StorageUtil._();
Future _init() async {
_preferences = await SharedPreferences.getInstance();
}
/////////////////////////////////////////////////////////////
// String
// get string
static String getString(String key, {String defValue = ''}) {
if (_preferences == null) return defValue;
return _preferences.getString(key) ?? defValue;
}
// put string
static Future<bool> putString(String key, String value) {
if (_preferences == null) return null;
return _preferences.setString(key, value);
}
/////////////////////////////////////////////////////////////
// int
// get int
static int getInt(String key, {int defValue = 0}) {
if (_preferences == null) return defValue;
return _preferences.getInt(key) ?? defValue;
}
// put string
static Future<bool> putInt(String key, int value) {
if (_preferences == null) return null;
return _preferences.setInt(key, value);
}
//////////////////////////////////////////////
// clear all préférences
static Future<bool> clrString() {
SharedPreferences prefs = _preferences;
prefs.clear();
}
}
Utilisation :
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await StorageUtil.getInstance();
runApp(SharedPreference());
}
StorageUtil.putInt("key_min", actuminutes);
SavedInt =StorageUtil.getInt("key_min");
J) JSON et MAP :
https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51
K) Audio :
just_audio et audio_service
Exemples : https://github.com/raywalz/as1iso/blob/master/lib/main.dart
https://dev.to/paurakhsharma/floating-audio-player-in-flutter-13hj
https://github.com/flutter/flutter/issues/27489
L) Formatage des widgets, contraintes :
https://flutter.dev/docs/development/ui/layout/constraints
Pour afficher conditionnellement un widget :
condition ? Text("True") : Text("False"),
M) CircularProgressIndicator :
https://medium.com/flutterdevs/circularprogressindicator-linearprogressindicator-in-flutter-369013366a
@override
Widget build(BuildContext context) {
(...)
return isLoading
? Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
SizedBox(
height: 15,
),
LinearProgressIndicator(),
],
))
: Scaffold(
...
N) Détection d’Internet :
xhttps://flutteragency.com/check-whether-there-is-an-internet-connection-available/
Future<void> infoConnexion() async {
try {
final result = await InternetAddress.lookup('google.com');
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
TextTitre = '';
InternetOk = true;
}
} on SocketException catch (_) {
TextTitre = "Pas d'internet";
InternetOk = false;
}
setState(() {});
}
Puis dans initstate :
@override
void initState() {
super.initState();
infoConnexion();
...}
Et dans le widget :
@override
Widget build(BuildContext context) {
return !InternetOk
? MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(TextTitre),
),
body: Center(
child: Image.asset(
'assets/images/no_internet.png'), // <-- imageText(
),
))
: new Scaffold(.................
O) Internationalisation :
P) Publicité :
1°) S’inscrire à AdMob : https://apps.admob.com/v2/home
2°) Sous AdMob créer une application
https://pub.dev/packages/google_mobile_ads
3°) Créer une ou plusieurs annonces de type Bannière ou Interstitielle et récupérer l’ ID d’application et l’ID de bloc d’annonces
4°) Ajouter dans le fichier manifest.xml à la ligne android:value= la valeur « ID d’application »
<manifest>
<application>
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
</application>
</manifest>
5°) Modifiez le code de votre application pour insérer les annonces :
Intitialisez le Ads SDK en appelant MobileAds.instance.initialize() une seule fois pour toute l’application
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
Utilisez un code d’annonce de test fournit ici : https://developers.google.com/admob/android/test-ads#sample%5C_ad%5C_units
Créer une annonce :
final BannerAd myBanner = BannerAd( adUnitId: 'ca-app-pub-3940256099942544/6300978111', //-- Pour test size: AdSize.banner, request: AdRequest(), listener: AdListener(), );
Dans Widget Build charger l’annonce :
myBanner.load();
final AdWidget adWidget = AdWidget(ad: myBanner);
Puis afficher le widget de l’annonce dans l’arbre des widgets :
Container(
alignment: Alignment.center,
child: adWidget,
width: myBanner.size.width.toDouble(),
height: myBanner.size.height.toDouble(),
),
Attention, mettre à jour la version du sdk d’android (19 minimum) dans le fichier build.gradle
defaultConfig {
applicationId "com.andrologiciels.xxx"
minSdkVersion 19
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Q) Case à cocher et Switch :
bool _checkbox = false;
String _valbox="décoché";
CheckboxListTile(
title: Text("Ne plus montrer cette introduction",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white)),
value: _checkbox,
onChanged: (newValue) {
setState(() {
_checkbox = newValue;
StorageUtil.putInt("ShowIntro", 1);
});
},
controlAffinity:
ListTileControlAffinity.leading, // <-- leading Checkbox
)
Switch :
https://fluttergems.dev/switch/
https://pub.dev/packages/list_tile_switch/versions/0.0.2
Références :
https://developers.google.com/admob/flutter/quick-start
https://developers.google.com/admob/flutter/banner
R) Traduction et localisation :
- créer le répertoire qui contiendra les traductions (exemple langues) dans le répertoire assets (à créer) à la racine et ajouter dans le pubsepc.yaml
assets: - assets/langues/
2. Ajoutez la dépendance Easy Localization dans pubspec.yaml (exemple ici)
dependencies:
flutter:
sdk: flutter
# Internationalisation
easy_localization: 3.0.0
3. Dans votre code ajoutez pour la version null-safety 3.0.0 :
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(EasyLocalization(
child: MyApp(),
supportedLocales: [
Locale('en', 'US'),
Locale('ar', 'DZ'),
Locale('de', 'DE'),
Locale('ru', 'RU'),
Locale('fr', 'FR')
],
path: 'assets/langues',
));
}
Pour la version "normale" 2.3.3+1 :
void main() {
runApp(
EasyLocalization(
supportedLocales: [Locale('en', 'US'), Locale('fr', 'FR')],
path: 'assets/langues', // <-- change patch to your
fallbackLocale: Locale('en', 'US'),
child: MyApp()
),
);
}
Et juste après
Widget build(BuildContext context) {
return MaterialApp(
Ajouter
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
Pour chaque textes à traduire, remplacer :
le texte par ‘texte_à_traduire’.tr(), exemple :
'title'.tr()
dans un widget Text : Text('msg').tr(args: ['Andrologiciels', 'Flutter']), avec dans le Json : "msg": "Bonjour {} dans le {} monde ",
avec un style de texte :
Text(('msg').tr(args: ['Andrologiciels', 'Flutter']),
style: TextStyle(
color: Colors.grey.shade900,
fontSize: 18,
fontWeight: FontWeight.bold)),
4. Créer les fichiers traduction en json
{
"title": "Hello",
4. Des assistances :
flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart –source-dir ./assets/langues
Puis dans le code : LocaleKeys.title.tr(),
flutter pub run easy_localization:generate –source-dir ./assets/langues
La liste des codes des pays est ici et la liste des langues là
X) Utilitaires :
Test de code DART en ligne : https://dartpad.dartlang.org/flutter
Liste des icônes Cupertino Icons
Mais aussi pour les icônes : https://oblador.github.io/react-native-vector-icons/ avec le package https://pub.dev/packages/flutter_vector_icons/install
Expandable : A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). https://www.google.com/search?q=flutter+use+of+expandzd&oq=flutter+use+of+expandzd&aqs=chrome..69i57.8982j0j4&client=ms-android-samsung-ss&sourceid=chrome-mobile&ie=UTF-8
Containers : https://stackoverflow.com/questions/58000474/how-to-add-more-than-one-container-in-body
Utilisation de variables globales : https://stackoverflow.com/questions/29182581/global-variables-in-dart
Multi-sélection et recherche dans une liste : https://pub.dev/packages/multi_select_flutter
navigation dans l’application :
Il est nécessaire dans le widget de base de nommer la racine et de désigner les widgets fils
Exmple la racine »initialroute », sera nommée « / » et aura comme affectation le widget « toto »
puis on déclare les autres pages en les nommant (exemple « /second ») et en leur affectant un widget, ce qui donne :
initialRoute: '/',
routes: {
'/': (context) => MonWidgetPrincipal(),
'/second': (context) => ReorderExample(),
}
Code à placer à la place de :
home: MonWidgetPrincipal(),
Il faudra alors appeler les pages filles, à partir de la page « / » selon la syntaxe :
onTap: () {
Navigator.pushNamed(context, '/second');
},
https://flutter.dev/docs/cookbook/navigation/named-routes
https://flutter.dev/docs/cookbook/navigation/navigation-basics
Fermeture de l’application :
SystemChannels.platform.invokeMethod('SystemNavigator.pop');Orientation de l'écran en portrait :
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.black,
));
}
Retrait de la barre de statut :
SystemChrome.setEnabledSystemUIOverlays([]);
Pour la rétablir : SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values).
Retrait de la barre de l’application (App Bar) :
// appBar: AppBar(
// title: Text(appTitle),
// ),
Toast et alertes :
Fluttertoast.showToast(
msg: "Vous devez sélectionner au moins une radio favorite",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
Références : https://pub.dev/packages/fluttertoast
SnackBar :
ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('selradiotttheme').tr()));
Références : https://flutter.dev/docs/cookbook/design/snackbars
