Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για...

16
Installation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε εφαρμογές 1. Install Android Studio + Emulators – Αυτή είναι η πιο εύκολη εγκατάσταση αλλά είναι πολύ πιθανό ο υπολογιστής σας να ζορίζεται να τρέξει το android studio 2. Install VS Code + emulator ΧΩΡΙΣ Android Studio – Το VS Code είναι πιο ελαφρύ πρόγραμμα αλλά θα πρέπει να ασχοληθείτε με την ρύθμιση του emulator μόνοι σας. Σας έχω βάλει αναλυτικά βήματα που μπορείτε να εγκαταστήσετε τον emulator. 3. Install Android Studio + VS Code – Μπορείτε να κάνετε εγκατάσταση του Android Studio ώστε να έχετε τα Android SDK/Emulators κτλ. και να γράφετε κώδικα στον VS Code αλλά να χρησιμοποιήσετε τους emulator του Android Studio (Σε αυτή την περίπτωση μπορείτε μέσα από το VS Code να κατεβάσετε το Plugin Android-iOS emulator) 4. Install VS Code και σύνδεση του κινητού σας. Σε αυτή την περίπτωση απλά εγκαθιστάτε το VS Code και συνδέεται το κινητό σας μέσω καλωδίου ώστε να τρέχει το πρόγραμμα σας επιτόπου στο κινητό. INSTALL FLUTTER (Απαραίτητο είτε εγκαταστήσετε Android Studio είτε VS Code) Configure the Flutter SDK 1. Download the .zip file of the Flutter SDK . 2. Extract the .zip file in C disk. C:\flutter.

Transcript of Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για...

Page 1: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Installation StepsΥπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε εφαρμογές

1. Install Android Studio + Emulators – Αυτή είναι η πιο εύκολη εγκατάσταση αλλά είναι πολύ πιθανό ο υπολογιστής σας να ζορίζεται να τρέξει το android studio

2. Install VS Code + emulator ΧΩΡΙΣ Android Studio – Το VS Code είναι πιο ελαφρύ πρόγραμμα αλλά θα πρέπει να ασχοληθείτε με την ρύθμιση του emulator μόνοι σας. Σας έχω βάλει αναλυτικά βήματα που μπορείτε να εγκαταστήσετε τον emulator.

3. Install Android Studio + VS Code – Μπορείτε να κάνετε εγκατάσταση του Android Studio ώστε να έχετε τα Android SDK/Emulators κτλ. και να γράφετε κώδικα στον VS Code αλλά να χρησιμοποιήσετε τους emulator του Android Studio (Σε αυτή την περίπτωση μπορείτε μέσα από το VS Code να κατεβάσετε το Plugin Android-iOS emulator)

4. Install VS Code και σύνδεση του κινητού σας. Σε αυτή την περίπτωση απλά εγκαθιστάτε το VS Code και συνδέεται το κινητό σας μέσω καλωδίου ώστε να τρέχει το πρόγραμμα σας επιτόπου στο κινητό.

INSTALL FLUTTER (Απαραίτητο είτε εγκαταστήσετε Android Studio είτε VS Code)

Configure the Flutter SDK

1. Download the .zip file of the Flutter SDK.2. Extract the .zip file in C disk. C:\flutter.3. Press Windows key and in the search bar type variable.4. Select Edit the system environment variables.5. Click on Environment Variables.6. In System variables select the Path variable and then click on Edit.7. Click on New and paste the path of bin folder of Flutter:

C:\flutter\bin

Page 2: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

8. Now click on Ok in the 3 windows to save changes.

Install VS Code + Emulator (ΧΩΡΙΣ Android Studio)

1. Install Java for Windows 10

JRE : https://java.com/en/download/

JDK : https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

2. Set JAVA_HOME variable.

Page 3: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Ανάλογα το path που έχει εγκατασταθεί η java (KAI ΣΥΓΚΕΚΡΙΜΕΝΑ ΤΟ JDK) στον υπολογιστή σας

Ανοίξτε το Command Prompt (Win+R, type cmd and press Enter). Για εμένα το Path του JDK είναι C:\Program Files\Java\jdk1.8.0_251. Γράψτε την εντολή:setx JAVA_HOME "C:\Program Files\Java\jdk1.8.0_251"

Άλλος τρόπος:

Start -> Edit the system environment variables -> Environment variables... -> New...

Install HAXM

Ανοίγουμε ένα cmd και τρέχουμε “ bcdedit /set hypervisorlaunchtype off “ για να απενεργοποιήσουμε το virtualization.

Download link: https://github.com/intel/haxm/releases/

Page 4: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

ΠΡΟΣΟΧΗ: ΟΧΙ το checktools το ΗΑΧΜ

Κάνουμε unzip και τρέχουμε το haxm_7.6.5-setup.exe

Κάνουμε απλό install και επανεκκίνηση τον υπολογιστή.

Install Android SDK

Download Command-Line-Tools ( https://developer.android.com/studio/index.html#command-tools ): Στην σελίδα Downloads , στο κάτω μέρος κατεβάστε το "Command line tools only".

Αποσυμπιέστε το zip με 7-zip και συγκεκριμένα τον φάκελο “cmdline-tools”

Πηγαίνετε στο AppData\Local:

“C:\Users\το_ονομα_χρηστη_σας\AppData\Local ”

Φτιάξτε ένα φάκελο “Android” και μέσα σε αυτόν ένα φάκελο cmdline-tools, μετά μέσα στον φάκελο cmdline-tools φτιάξτε ένα φάκελο “tools”

mkdir Android\cmdline-toolscd Android\cmdline-toolsmkdir tools

Μέσα στον φάκελο tools βαλτέ ΟΛΑ τα αρχεία που κάνατε extract από το zip. Η δομή των φακέλων θα πρέπει να είναι έτσι:

├── cmdline-tools └── tools ├── bin ├── lib ├── NOTICE.txt └── source.properties

Page 5: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Ορίστε τις μεταβλητές σας μέσω του variables των windows (μην ξεχάσετε να βάλετε το δικό σας USERNAME στο path:

ANDROID_HOME : C:\Users\your_username\AppData\Local\Android

ANDROID_SDK_ROOT: C:\Users\your_username\AppData\Local\Android\cmdline-tools\tools

To path πρέπει να εμπεριέχει αυτά:

Page 6: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Path(θα τα βαλετε ολα αυτα που γραφω):

C:\flutter\binC:\Users\your_username\AppData\Local\Android\cmdline-tools\tools\binC:\Users\your_username\AppData\Local\Android\C:\Users\your_username\AppData\Local\Android\cmdline-tools\tools

Κάνουμε restart το cmd.

Πάμε στο path C:\Users\your_username\AppData\Local\Android

Τρέχουμε την εντολή:

sdkmanager --list

Πρέπει να μας βγάλει μια λίστα με όλα τα android

Πρέπει να εγκαταστήσουμε τα πακέτα platform-tools, platforms;android-* and system-images;android-*;google_apis;x86_64

Page 7: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Τρέχουμε την εντολή:

sdkmanager "platforms;android-29" "system-images;android-29;google_apis;x86_64" "platform-tools"

Επόμενο βήμα:

sdkmanager --licenses

πατάμε σε όλα “y”

Εγκαθιστούμε το build-tools;29.0.3

sdkmanager "build-tools;29.0.3"

Φτιάχνουμε τον emulator:

avdmanager create avd -n test_avd_29 -k "system-images;android-29;google_apis;x86_64"

Για να βλέπουμε την λίστα από τους emulators καλούμε:

avdmanager list avd

πάμε στο C:\Users\your_username\AppData\Local\Android\emulator και ξεκινάμε τον emulator

cd emulatoremulator -avd test_avd_29

Αυτός θα είναι ο emulator που θα καλούμε μέσω VS Code και Flutter:

Page 8: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε
Page 9: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Install Visual Studio Code

1. Download Visual Studio Code.2. Install it, the default configuration is more than enough.

Install the extension of Flutter on Visual Studio Code

1. Open Visual Studio Code.2. Click on the Extensions or Ctrl+Shift+X.3. In the search bar type flutter.4. Select Flutter by the Author Dart Code.5. Click on Install.6. Click on Reload.

Έλεγχος εγκατάστασης

Επιλέγουμε view- Command Palette

Γράφουμε Flutter: Run Flutter Doctor

Αν έχουμε κάποια προβλήματα στην εγκατάσταση θα φανούν εδώ

Page 10: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

Create Flutter App using Visual Studio Code

1. Open the command palette in View > Command Palette or F1 or Ctrl+Shift+P.2. In the search bar type flutter.3. Select with the arrow keys on the keyboard Flutter: New Project and press Enter.4. Enter the name of the Flutter project.5. Select the folder to create Flutter project.6. The project folder will be opened and all the necessary files and folders will be created.

Install Android Studio1. Download Android Studio.2. Run the installer.3. Click on Next.4. Mark all the boxes and click on Next 2 more times.5. Click on Install.6. When finished, click on Next and then click on Finish.7. Now select Do not import settings and click on OK.8. It will open Android Studio Setup Wizard.9. Click on Next.10. Select Custom and again click on Next.11. Select the theme editor (I recommend Darcula) and click on Next.12. Now download the Android SDK, to do this check all the check boxes.13. Click on the button that has 3 points “…”.14. The file browser will open.15. Select the folder of your windows username, inside create a folder called Android and

inside this a folder called SDK, and then select the folder SDK and click on OK.

C:\Users\<YOUR_WINDOWS_USERNAME>\Android\SDK

16. Now click on Next 2 times and then click on Finish.17. When the download is finished, click on Finish and Android Studio will open.

Install the Flutter Plugin on Android Studio

1. In the window Welcome to Android Studio click on Configure and then on Plugins.2. In the search bar type in flutter and click on Search in repositories.3. Click on the one that says Flutter, Then click on Install, Accept and Yes.4. Now click on Restart Android Studio, then on OK, and on Restart.

Page 11: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

5. Android Studio will open again.

Add the Android SDK to Flutter

1. Again open the Environment variables.2. And in the System variables click on New.3. In Variable name type ANDROID_HOME.4. Click on Browse directory and select the path to download the Android SDK:

C:\Users\<YOUR_WINDOWS_USERNAME>\Android\SDK

5. Now click on Ok in the 3 windows to save changes.6. Press the Windows key and in the search bar type cmd and select the Command

Prompt.7. Type the command flutter doctor and press Enter.

You will notice that you need to accept Android licenses, so type the following command and press Enter:

flutter doctor --android-licenses

8. Now you will be asked if you agree each license, in which you must type Y and press Enter for each license.

9. When you have accepted all the licenses you will get All SDK package licenses accepted and close the Command Prompt.

Create Flutter App using Android Studio

1. In the Welcome to Android Studio window click on Start a new Flutter Project.2. Select Flutter Application and click on Next, it will open Configure the new Flutter

application.3. In Project name enter the name of the project, which should go in the

lowercase_with_underscores.4. In Flutter SDK path enter C:\flutter.5. In Project location enter the location where you want to create the project.6. In Description enter a brief description of the project.7. Now click on Next, and it will open Set the package name.8. In Company’s domain enter a domain of yours or any unique identifier you want, which

will be used to generate the Package name.9. The Package name will be auto-generated with the Project name and the Company’s

domain, which is used to identify your app in the Play Store, although if you do not like it auto-genre you can edit it.

10. In Platform channel language choose if you want your app Flutter support Kotlin for the Android code and Swift for the iOS code, in case you want to also code native code for each platform.

Page 12: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

11. Click on Finish and it will create all the folders and files of your project Flutter.

Create an Android Emulator on Android Studio

1. In Android Studio, click on Tools > AVD Manager.2. Now click on Create Virtual Device.3. Select a Nexus 5 and click on Next.4. Select the system image that you downloaded with your Android SDK**, i**n my case it

was Pie – 28 – x86 – Android 9.0, and then click on Next.5. Click on Finish.

6. Now click on the button Run to run the Android Emulator and closes the window.

Run Flutter App on an Android Emulator from Android Studio

1. In the toolbar at the side of main.dart click the button Run to run the app on the emulator. The first time it runs it will take a little bit.

2. It will show the Flutter App on the emulator, which shows how many times you press a button.

3. Now close Android Studio and continue with the next step.

Πιθανά error

Android licenses error• flutter doctor --android-licenses

• Δέχεστε όλες τις εγκαταστάσεις με το να πατήσετε “Y”

Could not find a flutter SDK• Αναζήτηση στα windows environment variables

• Edit the system environment variables

• Click on Environment Variables

• In System variables select the Path variable and then click on Edit

• Click on New and paste the path of bin folder of Flutter: C:\flutter\bin

• Click ok

• Αν δεν υπάρχει κάτι στο C:\flutter\bin κατεβάζετε το flutter sdk στον φάκελο ( https :// flutter . dev / docs / get - started / install / windows # get - the - flutter - sdk )

Unable to locate Android SDK• Μέσα στο vscode ανοίγουμε το terminal και γράφουμε

Page 13: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

• flutter config --android-sdk " C:\Users\your_username\AppData\Local\Android"

Ότι δεν υπάρχει το ΗΑΧΜ Πηγαίνετε παραπάνω στο “Install HAXM”

Page 14: Installation · Web viewInstallation Steps Υπάρχουν τέσσερις τρόποι για να χρησιμοποιήσετε το flutter και να δημιουργήσετε

JAVA Errors:Uninstall το jdk που εχετε από το control panel και reinstall το JDK 1.8:

https://www.oracle.com/in/java/technologies/javase/javase-jdk8-downloads.html

Βαλτε το σωστο PATH στο system environment variables για το JAVA_HOME (να δειχνει δηλαδη στο JDK1.8 path)