Flutter android studio signed

How to setup Flutter

on Android Studio for beginners in macOS.

Flutter is an open source mobile app development SDK from Google, used to build beautiful Native Android and iOS apps with a single codebase. Dart is the language used to develop Flutter apps.

Flutter is now out of beta and Flutter 1.0 was announced on Dec 4th.

This article covers how to install Flutter and the development environment, and also shares solutions for the most common requirements and issues faced in Flutter app development. The process below is more helpful for Android developers who want to try their hand at Flutter app development.

#1 — Setup

IDEs used to develop Flutter apps

Installation of Flutter

• Download Flutter Zip file.
• Extract Zip file.
• Add Flutter tool to the path from the terminal.
  $ export PATH=»$PATH: PWD /flutter/bin»
  PWD → Present Working Directory.
  This is a temporary path setting, so when you restart your system, you have to set the flutter tool path again.

Note: To set the Flutter path permanently in MacOS and avoid setting on every restart, do as shown below in your MacOS terminal.

• touch .bash_profile
• open .bash_profile
• It opens a file you need to copy and paste below command. After that save and restart your system.
  export PATH=»$PATH: PWD /flutter/bin»
  “PWD” → Present Working Directory.

To verify Flutter installation and version

#2 — Android Studio Configuration

Installation of Android Studio

To run the app in Android Emulator, you must install Android Studio to get the Android SDK and emulators.

• Download Android Studio and run the .dmg file. It will automatically install latest Android SDK.

Add Dart Plugin to Android Studio

If you prefer to use Android Studio as your main IDE to develop Flutter, you have to set dart language support to Android Studio as shown below. From here we will be focusing more on Android Studio setup, but you could also use Visual Studio Code or IntelliJ (which is similar to Android Studio).

• Preferences → Plugins → Browse Repository → type Dart in search bar → Install and Restart android studio.

Add Flutter Plugin to Android Studio

• Preferences → Plugins → Browse Repository → type Flutter in search bar → Install and Restart android studio.

Create Android Emulator

• Tools → AVD Manager → Opens a window
• Select → Create Virtual Device
• Phone → Nexus 5X 5’2″ → Oreo x86 → Android 8.0 → AVD Name(Nexus 5X API 26) → Finish
• Select Nexus 5X API 26 emulator → click on Launch AVD(start) button

#3 — iOS Simulator Setup

Installation of Xcode

• To execute the app in iOS simulator, we must install Xcode. Get Xcode from App Store and install.

Launch iOS Simulator from Android Studio

• You can see Flutter Device Selection button below toolbar in Android Studio.
• If you have already installed Xcode, clicking Flutter Device Selection button opens iOS simulator.

Useful iOS Simulator commands

• Return to home → Cmd + Shift + h
• See recent apps → Cmd + Shift + h + h
• Quit Simulator→ Cmd + q

#4 — Using Terminal to run on emulator or simulator

Execute Flutter apps from terminal

• Run From Terminal → flutter run
• Run in all devices → flutter run -d all lib/welcome.dart

If your system is connected with multiple devices then, check the connected devices with this command → flutter devices

Running above command will list devices like below

SM G890UU • 4299a0c86788f678 • android-arm • Android 7.0 (API 24) (emulator)

Run in the selected device → flutter run -d 4299a0c86788f678

Check the specific design/run particular dart file in a selected device → flutter run -d 4299a0c86788f678 lib/main.dart

#5 — Flutter Project Structure

In this article, I am using flutter with the android studio.

In the Project section, the above screenshot shows the structure of the flutter app.

• Android: It has all the android related files.
• iOS: It has all the iOS-related files.
• lib: It has all the dart files. This is the main folder, where we can write all the application code.
• test: It has all the testing code.
• images: I created this folder, this has all the images we used in our application.
• pubspec.yaml: It has all the third party dependencies and the assets we use in our application.
  yaml — Yet Another MultiColumn Layout

flutter_rating is the third party dependency.
We have to specify assets in the pubspec.yaml . We can specify file path with folder name and file name or only the folder name.

images/apple.jpeg → we can use only apple.jpeg image.
images/ → we can use all images that are in the images folder.

Make sure that dependencies are properly aligned with spaces. Otherwise the images won’t display. This particular issue is hard to find out if you are fairly new to Flutter or YAML.

#6 — How to change App name

In Android

Android folder → app → src → main → Open Manifest → change the label in Application tag.

In iOS

iOS folder → Runner → info.plist → Edit the string under CFBundleName

#7 — How to change App icon

In Android

Expand the Android folder → app → src → main → res → add app icons in mipmap folders.

Expand the Android folder → app → src → main → open Manifest → change the icon in Application tag.

In iOS
Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset
In that folder add all app icons.

Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset → update the Contents.json file.

#8 — How to change Splash Image

In Android

Expand Android folder → res → drawable → add image
Expand Android folder → res → drawable → in Launch_background.xml, add bitmap tag.

In iOS

Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → add all sizes of splash images in the folder

Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → → open Contents.json → change file name

I hope the above setup instructions and advice on how to set a few basic requirements are useful for beginners in Flutter app development. As Flutter is now out of beta, I look forward to seeing more and more developers using Flutter for developing Android and iOS apps with a single codebase. For motivation, check out this Widgets Library website built by the Flutter community.

If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Follow AppIt Ventures for other similar articles. Thanks 😄

Источник

Три относительно честных способа создания Flutter проекта

Итак, с презентацией Google первой стабильной версии Flutter, которая случилась 4 декабря 2018 г. начался процесс изменения ландшафта на полях мобильного программирования. Появился новый игрок, способный изменить правила самой игры. Теперь из одной базы кода можно создавать сразу два нативных (т.е. «родных» для среды выполнения) приложения — для iOS и Android. В отличие от т.н. гибридных приложений, которые под капотом используют JavaScript, приложения созданные на Flutter работают быстро и плавно, поскольку код написанный на языке программирования Dart (для тех кто знаком с Java или C# с этим языком будет комфортно) затем компилируется (AoT , т.е. предварительно) в машинный код: отдельно для Android, и отдельно для iOS.

Поэтому, если вы изучите Dart и Flutter, вы сможете писать нативные приложения для двух самых популярных мобильных операционных систем, т.е. быть одновременно Android и iOS разработчиком. И это, вероятно, ещё не предел, поскольку было объявлено, что Google ведёт работу по расширению Flutter на предмет возможности создания с его помощью приложений для Windows, Mac и Web (проект Flutter для Web носит название Hummingbird — Колибри). В итоге может получиться так, что зная Dart и Flutter вы сможете писать всё очень многое. Поэтому многие IT эксперты назвали 2018 год — годом Flutter.

Теперь за дело. Сейчас мы сделаем следующее

Устанавливаем Flutter и создаём проект из командной строки

Переходим на страницу установки Flutter, выбираем свою операционную систему — Windows, Mac или Linux (здесь будет описано для Windows 10, как наиболее популярной ОС), и скачиваем zip файл, содержащий Flutter SDK . Затем распаковываем zip, например, в папку текущего пользователя, как показано на скриншоте:

Сейчас пропишем путь к flutter\bin в переменную Path среды пользователя Windows (Этот компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды):

Можно создавать проект из командной строки Windows:

Готово! Файлы проекта можно редактировать любым текстовым редактором, хоть в блокноте. Но это хорошо разве что для мелких правок. Поэтому мы…

Устанавливаем JDK , Android Studio (вместе с Android SDK) и необходимые плагины

Теперь скачиваем Android Studio. Запускаем процесс установки, следуя за мастером установки, и обращаем внимание на путь, куда будет установлен Android SDK . Создаём системную переменную среды ANDROID_SDK_TOOLS с указанием пути к папке \tools в Android SDK, примерно так:

Когда всё готово — запускаем Android Studio, и устанавливаем плагины Flutter и Dart. Для этого в начальном экране Android Studio справа внизу жмём на значок шестерёнки и выбираем Plugins:

В открывшемся окне внизу нажимаем кнопку Browse repositories.

В поисковую строку вводим flutter, выбираем и устанавливаем (у меня уже установлен, поэтому не видно соответствующей кнопки):

Android Studio предложит также установить плагин Dart от которого зависит работа плагина Flutter. Соглашаемся. В итоге у вас должно быть установлено как минимум два плагина:

Перезапускаем Android Studio, и теперь давайте убедимся, что всё идёт хорошо. Для этого в командной строке выполним команду:

Сканирование займёт десяток секунд, и затем вы можете увидите примерно такой результат:

Вот мы и готовы создать Flutter проект в Android Studio. После установки плагинов Flutter и Dart в начальном экране Android Studio должна появится опция Start a new Flutter project. Выбираем её:

Далее соглашаемся с выбранной по умолчанию опцией Flutter Application и нажимаем кнопку Next:

Наконец, указываем доменное имя (которое в реверсивном порядке будит использовано как ID Android приложения), а также опционально — поддержку языков Kotlin и Swift (если не указать — по умолчанию будут поддерживаться только Java и Objective-C). Нажимаем кнопку Finish.

В зависимости от производительности компьютера, ждём несколько минут пока проект будет создан… Готово! Он должен выглядеть примерно так:

Обратите внимание на стрелку, указывающую на вкладку Flutter Inspector. В этом инспекторе имеется функционал, позволяющий делать ряд очень полезных во время разработки вещей, в т.ч. просмотр приложения на девайсе Android в режиме представления на iOS!

И наконец, устанавливаем VS Code, расширения, и создаём третий Flutter проект

Скачиваем последнюю версию Visual Studio Code для своей операционной системы, устанавливаем на свой компьютер, следуя за мастером установки, и запускаем VS Code. Затем на боковой панеле нажимаем на кнопку Extensions (показана стрелкой) или на клавиатуре — Ctrl+Shift+X:

С помощью поиска ищем расширение Flutter.

VS Code, как и в случае с Android Studio, предложит установить необходимое дополнительное расширение Dart. Устанавливаем и его. В итоге должны иметь два (или более) активированных расширения:

А теперь создаём Flutter проект. Нажимаем на значок шестерёнки в левом нижнем углу, и выбираем Command Pallete. (или на клавиатуре — Ctr+Shift+P). В командной строке Command Pallete начинаем печатать flutter, и из появившегося списка выбираем Flutter: New Project:

Даём проекту название и нажимаем клавишу Enter:

Появится диалоговое окно, предлагающее выбрать папку, в которой необходимо создать Flutter проект. Выбираем и нажимаем кнопку с длинным названием Select a folder to create the project in:

Источник