Première application Flutter sur MacOS Hight Sierra

1/ INTRODUCTION :

Flutter est le SDK open source créé par google permettant de développer des applications mobiles, parmi ses avantages est qu'il est "Cross-Platform" Nous écrivons le code source une seul fois et nous le déployons et exécutons sur les deux types de smartphones Android et IOS. 

Le langage de programmation utilisé est le Dart. 

2/ INSTALLATION:

Avec un macOS High Sierra (version 10.13) j'ai téléchargé et installé les outils suivants :

* Xcode 10.1 

* Android Studio 4.2.1

*   Visual Studio Code version 1.56.2

* Flutter (Channel stable, v1.2.1) depuis le dépôt suivant: SDK Flutter.


En cliquant sur le lien du SDK Flutter le dossier Flutter va être placé dans un dossier spécifié dans mon cas c'est Documents/prgm/flutter

Une fois cela est fait un fichier ".bash_profile" sera créé dans la racine du Mac, (si ce n'est pas le cas il nous faut le créer par nous même) afin de préciser dedans le chemin vers le sdk-Flutter pour qu'on puisse effectuer des commandes Flutter depuis n'importe oû de notre Mac  et ceci est en ajoutant la ligne suivante:

export PATH="$PATH:~/Documents/prgm/flutter/bin"

Il faut tout d'abord rafraichir le terminal par :

mac$ source ~/.bash_profile

À ce point là mon Doctor (Une commande pour tester l'environnement du Flutter) est le suivant: 


MacBook-Air-de-mac:prgm mac$ flutter doctor -v
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G14042, locale fr-FR)
    • Flutter version 1.2.1 at /Users/mac/Documents/prgm/flutter
    • Framework revision 8661d8aecd (2 years, 3 months ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    ✗ Android license status unknown.
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.11.4
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[!] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
[!] Connected device
    ! No devices available
! Doctor found issues in 4 categories.
MacBook-Air-de-mac:prgm mac$ ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1
MacBook-Air-de-mac:prgm mac$ ln -s ~/Library/Application\ Support/Google/AndroidStudio4.2/plugins ~/Library/Application\ Support/AndroidStudio4.2
MacBook-Air-de-mac:prgm mac$ flutter doctor -v
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G14042, locale fr-FR)
    • Flutter version 1.2.1 at /Users/mac/Documents/prgm/flutter
    • Framework revision 8661d8aecd (2 years, 3 months ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    ✗ Android license status unknown.
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.11.4
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin installed
    • Dart plugin version 202.8488
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
[!] Connected device
    ! No devices available
! Doctor found issues in 3 categories.

-- Solutions --

* Pour résoudre le problème de la license Android :

1) Il nous faut la version du jdk 8.
2) Il faut préciser les variables d'environnement en ajoutant les lignes suivantes dans le fichier .bash_profile :

 
export ANDROID_HOME=~/Library/Android/sdk
export PATH="$PATH:$ANDROID_HOME/platforms"
export JAVA_HOME='/Applications/Android Studio.app/Contents/jre/jdk/Contents/jdk1.8.0_262.jdk/Contents/Home' 

3) Ensuite, il nous manque que executer la commande suivante:

MacBook-Air-de-mac:prgm Mac$ flutter doctor --android-licenses


--> Et finalement, le résultat du doctor est le suivant:

Mac$ flutter doctor --verbose
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G14042, locale fr-FR)
    • Flutter version 1.2.1 at /Users/mac/Documents/prgm/flutter
    • Framework revision 8661d8aecd (2 years, 4 months ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mac/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.11.4
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin installed
    • Dart plugin version 202.8488
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0
[!] Connected device
    ! No devices available
! Doctor found issues in 2 categories.
Process finished with exit code 0

 

* Pour résoudre le problème de cocoaPods

Il faut ajouter le Team et mettre à jours la version swift dans Xcode Build and settings, pour ma part j'ai ignoré cette erreur pour le moment parce qu'elle n'empêche pas l'execution des programmes flutter sur les émulateurs.

                               


* Pour résoudre le problème de No device connected

Il faut juste lancer un émulateur sois depuis l'application Simulator.app qui se trouve sur Mac une fois Xcode est installé -elle lance donc le simulateur IOS- Ou, en lançant celui du Android Studio "Android Studio --> (En bas à droite) Configure  --> AVD Manager --> create AVD Manager --> action play"


3/ CRÉER LA PREMIÈRE APPLICATION:

Tout simplement, on tape dans le terminal les CMD suivantes:


mac$ flutter create myapp
avec celle-ci on obtient ça :


mac$ cd myapp
mac$ flutter run 

Et en fin voici le résultat : une application qui compte et affiche le nombre de cliques sur le bouton "+" qui remplace le Hello world habituel.




Remarque: Nous pouvons nous servir du Visuel Studio Code en ajoutant les plugin Flutter et dart voici une visualisation d'un morceau du code par VS Code de l'application: myapp exactement le fichier /lib/main.dart qui est le point d'entrée d'une application Flutter.






Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Configurer la connexion d'une app-flutter avec Firebase

Image
Connecter une application Flutter à Firebase l'environnement de développement est présenté avec flutter Doctor comme suit : Imane-SERDANI:~ mac$ flutter doctor --version Flutter 2.10.0-1.0.pre.118 • channel master • https://github.com/flutter/flutter.git Framework • revision d290763941 (1 year, 1 month ago) • 2022-01-11 18:20:14 -0800 Engine • revision 643b2787f4 Tools • Dart 2.16.0 (build 2.16.0-159.0.dev) • DevTools 2.9.2 Création de l'application Imane-SERDANI:~ mac$  flutter create fastcoif Creating project fastcoif... Running "flutter pub get" in fastcoif...                         1 788ms Wrote 81 files. All done! In order to run your application, type:   $ cd fastcoif   $ flutter run Your application code is in fastcoif/lib/main.dart. Imane-SERDANI:~ Mac$ CONNEXION À FIREBASE WEB-SERVIS Pour ce-là on suit les étapes une par une : 1/ ouvrez le lien  https://console.firebase.googl...
Lire la suite

Règles de sécurité

Image
Afin de pallier ce problème :  En accédant à Firebase - Projet - RealTime Database - Regles - modifier les règles on trouve par défaut : {   "rules": {     ".read": "now < 1679785200000",  // 2023-3-26     ".write": "now < 1679785200000",  // 2023-3-26   } }" Je l’ai remplacé par ça : {   "rules" : {     ".read" : false ,     ".write" : false   } } Afin de pallier ce problème :    On doit mettre à jours nos règles de sécurité on procédant comme ça : En accédant à Firebase - Projet - Storage - rules - Modifier les règles on trouve par défaut ça : rules_version = '2'; service firebase.storage {   match /b/{bucket}/o {     match /{allPaths=**} {       allow read, write: if           request.time < timestamp.date(2023, 3, 26);     }   } } Je l'ai remplacé par ça : // Access to files through Cloud Storage is completely disallow...
Lire la suite