Как установить Flutter на Visual Studio Code?

В этой статье мы рассмотрим процесс установки Flutter в Visual Studio Code. Flutter — это переносимая платформа пользовательского интерфейса с открытым исходным кодом для мобильных устройств, настольных компьютеров и Интернета. Он разработан и управляется Google, Flutter используется для создания качественного, красивого и быстрого нативного интерфейса для Android и iOS из единой кодовой базы. Интерфейс флаттер-приложения состоит из различных виджетов. Flutter имеет довольно богатую библиотеку виджетов, поэтому разработчики могут без каких-либо препятствий создавать эффективный интерфейс для Android и iOS.

Ключевые особенности флаттера:

• Горячая перезагрузка: эта функция позволяет пользователям видеть каждое изменение в миллисекундах на экране вывода (эмулятор или устройство Android).
• Богатая библиотека виджетов: Flutter содержит огромную библиотеку виджетов, что делает интерфейс во флаттере довольно простым и менее трудоемким, когда у нас есть доступ к большой библиотеке виджетов.
• Выразительный и гибкий пользовательский интерфейс. Интерфейс флаттер-приложения работает как многоуровневая архитектура, которая допускает полную настройку, что приводит к чрезвычайно быстрому, выразительному и гибкому пользовательскому интерфейсу.
• Собственная производительность: при разработке приложений для флаттера у нас есть доступ к виджетам, основанным на платформе, такой как Android и iOS, поэтому мы можем использовать виджеты, которые могут интегрировать собственные функции, такие как значки, навигация, прокрутка и многое другое. .

Установка Flutter в Visual Studio Code:

Выполните следующие шаги, чтобы установить Flutter в VS Code:

Шаг 1: Загрузите SDK Flutter. Нам нужно скачать файл Flutter SDK, чтобы работать с флаттером. Мы можем легко загрузить его с официального сайта Flutter.

Шаг 2: Установите путь к переменной среды. После загрузки Flutter SDK распакуйте файл и скопируйте путь к папке bin.

Нажмите WIN + R и вставьте следующее: rundll32.exe sysdm.cpl,EditEnvironmentVariables

Теперь нажмите «Новый» и вставьте путь, который был скопирован ранее, и сохраните.

Теперь нам нужно настроить код Visual Studio для Flutter. Нам нужно установить два расширения, чтобы использовать флаттер. Самое первое расширение — Flutter, а второе — Dart. Обратите внимание, что Dart — это язык программирования, который используется во флаттере для разработки приложений как для Android, так и для iOS.

Шаг 3: Установка Flutter в Visual Studio Code

Шаг 4. Теперь установите Dart в Visual Studio Code.

Шаг 5: Теперь мы успешно добавили Flutter и Dart в код Visual Studio, теперь давайте проверим, установлен ли flutter или нет. Для этого мы откроем новый терминал в Visual Studio Code и напечатаем следующую « flutter –version», если все в порядке, то он нормально покажет версию установленного флаттера.

Теперь мы готовы создать новый проект флаттера, для этого нам нужно выбрать каталог, в котором мы собираемся создать проект. Нажмите на зеленую кнопку Открыть папку, а затем выберите предпочтительное место.

Шаг 6: Теперь, чтобы создать новый проект флаттера, напишите в терминале кода Visual Studio следующее: « flutter create testproject». После этого проект будет создан в каталоге тестового проекта.

Проект Flutter создан, теперь нам нужно запустить эту программу, чтобы проверить, работает она или нет. Здесь нам нужно понять, как проект флаттера покажет результат. Мы можем запустить программу флаттера в эмуляторе Android или в нашем браузере. Для работы в эмуляторе Android в нашей системе должна быть установлена Android Studio. В этой статье мы собираемся протестировать эту программу в нашем браузере.

Теперь, прежде чем запускать эту программу, мы должны изменить наш каталог на testproject для этого типа cd testproject, а теперь запустите программу, набрав flutter run, после этой команды она спросит, где бы вы хотели видеть вывод, теперь выберите для нужный браузер, набрав 1 или 2.

Вывод: Теперь мы готовы увидеть вывод, по умолчанию это программа, в которой есть кнопка, при нажатии на которую в центре будет отображаться счетчик.