Начало работы с кроссплатформенным мобильным приложением с использованием Flutter

Flutter - это SDK для разработки мобильных приложений с открытым исходным кодом, созданный Google для разработки кроссплатформенных мобильных приложений . Flutter позволяет даже начинающим программистам очень легко и быстро создавать высококачественные и гибкие нативные мобильные приложения. Предварительный опыт разработки приложений не требуется!

Эта статья покажет вам, как создать простое приложение Hello Flutter, а затем запустить его на вашем собственном устройстве Android!

Зачем использовать Flutter вместо нативной разработки на Java?

Flutter имеет некоторые уникальные особенности по сравнению с Java и другими SDK, такими как:

• Быстрая разработка : Flutter использует настраиваемые виджеты, которые можно вкладывать вместе для создания интерфейса приложения, подобно тому, как структурирован HTML. Подробности можно найти здесь: Flutter для веб-разработчиков.
• Горячая перезагрузка : мгновенно просматривайте изменения, внесенные в код, без перекомпиляции.
• В конце концов, он родной : под капотом кодовая база компилируется в Java, обеспечивая ту же производительность, что и нативные приложения.
• Небольшой расход системных ресурсов : Flutter можно удобно запустить в системе с меньшими ресурсами.

Настройка Flutter

• Шаг 1. Настройте Flutter SDK
  1. Загрузите последнюю версию SDK здесь: Архив SDK Flutter
  2. Распакуйте zip-файл и поместите содержащуюся в нем папку flutter в желаемый каталог.
     

     Здесь извлекается папка на диск C:

     Примечание . Не рекомендуется устанавливать Flutter в каталог, для которого могут потребоваться права администратора, например C: Program Files .

• Шаг 2: Добавьте Flutter в PATH : хотя это и не обязательно, рекомендуется установить переменную PATH, чтобы сделать Flutter легко доступным из любой точки системы.
  1. Перейдите в раздел «Изменить переменные среды» для своей учетной записи в панели управления. Вы можете найти этот параметр в строке поиска.
  2. В разделе Пользовательские переменные проверьте, есть ли запись с именем PATH:
     • Если он существует, добавьте новый путь к 'flutter bin'.
     • Если запись не существует, создайте новую запись с именем Path, а затем добавьте полное местоположение в 'flutter bin' (см. Пример изображения)
  3. Перезагрузите Windows после установки переменной PATH, чтобы она работала.
  

  Как будут выглядеть настройки пути после включения каталога flutter bin

  

  Приложение счетчика по умолчанию, которое мы только что запустили

• Шаг 3. Настройка Android Studio : Android Studio автоматически загружает инструменты разработки, необходимые для работы Flutter с Android.
  1. Загрузите Android Studio здесь: Android Studio
  2. Запустите Android Studio и следуйте указаниям мастера SDK Manager, чтобы загрузить все необходимые инструменты сборки.
  

  Диспетчер SDK Android Studio

• Шаг 4. Настройка кода Visual Studio : Visual Studio Code (или VS Code) - это легкий редактор кода, который можно использовать при разработке Flutter. В этой статье вместо Android Studio используется VS, поскольку он легче и имеет минимально необходимые функции.
  1. Загрузите и установите VS Code: VS Code Download.
  2. Для помощи в разработке рекомендуется использовать два расширения VS Code.
     Установите плагины Flutter и Dart из вкладки расширения VS Code. Вы можете обратиться к: Настройка расширений кода VS для Flutter
     

     Устанавливаемые расширения VS Code

  3. Установите Git Bash : необязательно, но рекомендуется использовать командную строку. Git Bash предоставляет множество распространенных команд unix, которые полезны для некоторых быстрых задач.
     Загрузите Git Bash для Windows здесь: Загрузки Git
  4. Запустите Flutter Doctor : Flutter Doctor - это встроенный инструмент Flutter, который можно использовать для проверки статуса установки Flutter. После настройки переменной PATH вы можете открыть командную строку и выполнить:

      трепещущий доктор

     Это проверит все, что требуется для запуска Flutter, и предоставит подробный отчет обо всех обнаруженных ошибках.

     

     После успешной настройки флаттер-доктор не покажет ошибок

Создание пустого шаблона проекта

1. Перейдите в то место, где вы хотите создать свой проект. Откройте командную строку (вы также можете использовать контекст «Git Bash здесь» , щелкнув правой кнопкой мыши, чтобы открыть Git Bash в этом месте) и введите команду для создания нового проекта:

    flutter создать имя_проекта

   Например: для проекта с именем 'helloflutter' выполнение

    флаттер создать адский треп

   создаст новый проект Flutter с именем helloflutter

   

   Создан новый проект под названием helloflutter.

2. Откройте эту папку в VS Code. Вы можете щелкнуть правой кнопкой мыши и использовать контекстное меню, чтобы открыть непосредственно в VS Code, или сначала запустить VS Code, а затем открыть эту папку как проект.
   

   Контекстное меню для открытия папки в VS Code

3. Большая панель слева, на которой отображаются все файлы и папки, называется панелью проводника . Перейдите в папку lib и выберите файл main.dart. Этот файл является точкой входа, с которой приложение начинает свое выполнение.
   

   Расположение файла main.dart в папке lib

   Откроется код шаблона приложения. Попробуйте запустить это простое приложение прямо сейчас!

Сказать привет, Флаттер!

1. Удалите виджет MyHomePage.
   

   Удалить виджет MyHomePage

2. Создайте новый виджет без сохранения состояния и назовите его HelloFlutter.

   Виджеты без сохранения состояния используются для определения виджетов, которым не нужно иметь дело с изменениями своего внутреннего состояния. Они в основном используются для создания компонентов, которые после рисования не требуют обновления.

   
   

   
   
   

   class HelloFlutter extends StatelessWidget { @override Widget build(BuildContext context) { Container( return ); } }

   

   Добавлен новый виджет без сохранения состояния HelloFlutter

3. Замените виджет контейнера на виджет Scaffold :

   Scaffold реализует базовую структуру визуального макета материального дизайна. Этот виджет предоставляет API-интерфейсы для отображения ящиков, панелей приложений и тела приложения. Свойство body Scaffold будет использоваться здесь для отображения содержимого приложения.

   
   

   
   
   

   class HelloFlutter extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( ); } }

4. Объявите виджет-контейнер в теле Scaffold.
   
   Виджет-контейнер - это полезный виджет, который сочетает в себе стандартные виджеты рисования, позиционирования и изменения размера. Вы можете обернуть любой виджет Контейнером и контролировать вышеупомянутые свойства.
   
   

   
   
   

   class HelloFlutter extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( ), ); } }

   У виджета «Контейнер» есть свойство выравнивания, которое помогает расположить виджет в центре экрана. Установите выравнивание с помощью класса Alignment:

    выравнивание: Alignment.center

5. В дочернем свойстве виджета контейнера объявите текстовый виджет:

   Текстовый виджет занимается отображением и обработкой текста. После создания текстового виджета вставьте «Hello Flutter» в круглые скобки в одинарные кавычки. Все, что заключено в одинарные кавычки, отображается в текстовом виджете.

   
   

   
   
   

   class HelloFlutter extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( alignment: Alignment.center, child: Text( 'Hello Flutter!' ), ), ); } }

6. Наконец, в свойстве home главного класса MyApp выше измените его с MyHomePage (…) на HelloFlutter (). Это позволяет основному классу MyApp ссылаться на только что созданный HelloFlutter.
   

   Изменение домашнего свойства для вызова созданного нами виджета

7. Теперь запустите приложение, используя команду flutter run .
   

   Запуск приложения

   Текст "Hello Flutter!" появится надпись в центре экрана.

   Полный код :
   

Запуск приложения HelloFlutter

1. Подключите физическое устройство к ПК и включите режим разработчика. Если устройство успешно распознается ПК, имя устройства появится в правом нижнем углу VS Code.
   

   Здесь будет показано название устройства.

   Если вы хотите вместо этого установить эмулятор, см. Настройка эмулятора Android. Эмулируемое устройство также будет отображаться здесь аналогичным образом.

2. Откройте встроенный терминал , нажав комбинацию клавиш [CTRL + `] (клавиша управления + обратная кавычка).
3. Выполните команду:

    трепещущий бег

   Подождите несколько минут. Поскольку это первый запуск, некоторые загрузки и установка происходят в фоновом режиме, связанном с gradle. Последующие компиляции будут намного быстрее.

   

   Выполнение 'flutter run' и компиляция приложения по умолчанию

4. После компиляции приложение автоматически установится и запустится на подключенном устройстве или эмуляторе.
   

   Запуск приложения

5. Остановите приложение, нажав «d» в терминале. Так будет выглядеть компиляция и запуск любого приложения.

Ссылка: Полный код