Flutter введение для начинающих

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

Независимо от того, являетесь ли вы опытным разработчиком или новичком, изучение Flutter потребует от вас лишь нескольких хорошо информированных видеороликов, учебных ресурсов и большого количества самообучения.

В этой статье вы узнаете что такое Flutter, где и как его лучше учить Flutter и как собственно его установить. 

Что такое Flutter?

Flutter - это фреймворк (скорее SDK) с открытым исходным кодом, разработанный Google, который в основном используется для разработки мобильных приложений.

Мы также можем разработать веб-версию и версию для ПК для одного и того же приложения, используя единую кодовую базу.

Flutter состоит из множества красиво оформленных виджетов , богатого набора API-интерфейсов управления движением, а также прокрутки, навигации, шрифтов и значков, которые работают на разных платформах. Это обеспечивает бесперебойную работу как на телефонах Android, так и на iOS.

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

Flutter

Зачем изучать Flutter?

Разработка мобильных приложений - тренд 2021 года. Просматривать и выполнять действия удобнее всего на мобильном телефоне, потому что мы можем делать это где угодно и когда угодно.

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

Если этих причин недостаточно, вот еще несколько причин, по которым вам стоит изучить Flutter:

  • Отсутствие кросс-платформенных проблем: Flutter следует подходу с однократной записью, поскольку он компилируется заранее, что дает возможность использовать собственный код.
  • Перекомпилировать не требуется: «Горячая перезагрузка (Hot reload)» позволяет разработчикам просматривать изменения кода сразу после их сохранения.
  • Отличное сообщество и поддержка: команда flutter очень полезна и общительна, и сообщество оказывает широкую поддержку новым ученикам.
  • Создание красивых анимации с помощью 2Dimension Flare.
  • Поддержка многих IDE, таких как VS Code, Android Studio и т.д.
  • Единый код для внешнего и внутреннего интерфейса с использованием языка Dart

Особенности Flutter

И последнее, прежде чем мы дадим вам ресурсы для изучения Flutter, важно, чтобы вы знали, чтобы вы могли просто покопаться в ресурсах и получить практическое обучение, не прибегая к введению еще раз!

Некоторые уникальные особенности Flutter:

  • Сосредоточьтесь на настраиваемых виджетах, все наборы виджетов из Material Design и пакета Cupertino (а не Android XML) доступны для обеспечения беспроблемной разработки пользовательского интерфейса.
  • Hot reload помогает разработчикам мгновенно видеть свои изменения. Это сокращает время разработки, а также время исправления ошибок.
  • Однократная запись, запуск в любом месте, код, работающий на любой платформе без изменений. 
  • Flutter использует язык программирования Dart, который использует как предварительную, так и своевременную компиляцию, обеспечивая высокую производительность и более быстрое время запуска.
  • Собственный машинный код ARM обеспечивает высокую производительность как на Android, так и на iOS.

Предпосылки для изучения Flutter

Чтобы начать изучение Flutter, вам необходимо знать следующее. Если вы понятия не имеете о чем-либо из нижеприведенного, лучше сначала взять эти концепции, а затем продолжить изучение Flutter:

  • Знание нативной разработки под Android: если вы хотите разрабатывать очень тонкие и настраиваемые приложения. 
  • Концепции ООП: поскольку такие языки, как Java, C ++, основаны на концепциях ООП (объектно-ориентированного программирования), важно быть с ними основательно. Вот хорошее видео, которое легко объясняет ООП.
  • Вы должны знать программирование на Dart, прежде чем изучать Flutter: но это не так уж и сложно. Dart - это язык программирования общего назначения от Google.
  • Знание C++ / Java - дает дополнительное преимущество, но не обязательно!

Как изучить Flutter?

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

1. Видеоуроки и документация

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

На youtube также есть уроки Flutter на русском языке:

Также желательно проверять виджет недели на YouTube от команды Flutter , который охватывает виджеты из SDK. Если вам нужно быстро разобраться с виджетом - это то место, куда нужно обратиться.

2. Книги

Книги - отличный способ получить углубленные знания по любому предмету, а также справочный материал. Некоторые из лучших книг по изучению Flutter:

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

  • Learn Google Flutter fast
  • Beginning Flutter – A hands-on guide to App Development

Как новичок, вы сможете многое почерпнуть только из этих двух книг.

Установка Flutter

Первое, что вам нужно, это SDK - Software Development Kit - набор программных инструментов, которые входят в единый пакет и могут использоваться в вашей среде разработки.

Для разработки мы используем интегрированную среду разработки (IDE), которая упрощает и ускоряет разработку и тестирование.

Как мы узнали ранее, есть 2 популярных IDE для Flutter:

  • VS Code - это легкий, быстрый и многофункциональный IDE.
  • Android Studio - тоже само, однако заточенная для разработки под Android.

Во многом все зависит от вашего выбора, однако новичкам скорее всего подойдет Visual Studio Code.

Далее следуя официальной документации, вы сможете установить се необходимые для начала компоненты.

Создание простого приложения на Flutter

Давайте создадим простую программу Hello World. С помощью этой программы мы поймем структуру Flutter и основные используемые методы. Хотя это слишком простое приложение, чтобы оценить все детали, но все же дает хорошее начало.

Чтобы создать новый проект, просто введите

flutter create proj_hello_world

Проект будет создан со следующей структурой:

proj_hello_world
  • android - папка компонентов под Android. Любая реализация для Android будет помещена в эту папку.
  • assets - для хранения файлов данных, изображений и т.д.
  • ios - папка компонентов под iOS. Любая реализация для iOS будет помещена в эту папку.
  • lib - здесь создаются файлы всего кода. main.dart - основной файл
  • test - для модульного тестирования

Для нашего простого приложения нам понадобится только файл main.dart. Файл поставляется с некоторым кодом, и разработчики в основном удаляют его, чтобы написать свой код с нуля.

Мы тоже этим займемся!

Первое, что важно - импортировать пакет material. Он используется для включения компонентов пользовательского интерфейса.

import 'package:flutter/material.dart';

Как и во многих других языках, выполнение начинается с метода main. Он должен возвращать метод runApp(), который вызывает код для выполнения.

void main() => runApp(new HelloWorldApp());

Выполняемый код - это не что иное, как виджет.

Итак, что такое виджет?

Если вы еще не знали, виджетом может быть что угодно - кнопка, список, таблица, поле ввода, карточный вид в основном, все, что управляет представлением.

Итак, все ваше приложение Flutter представляет собой набор виджетов, которые объединяются и отображаются в красивом пользовательском интерфейсе.

Вот почему каждый создаваемый вами класс должен наследовать класс виджета. Поскольку все, что будет делать наше приложение, - это распечатать Hello World, нам просто нужен виджет, которому не нужно сохранять какое-либо состояние - stateless widget. У stateless widget должен быть метод сборки.

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world!"),

MaterialApp - это оболочка виджета, одним из материалов которой является материал, а в Center - виджет, который центрирует элементы. Text добавляет виджет текстового поля. Помимо атрибутов, которые вы видите - home, child - есть много других атрибутов, таких как стиль, положение, декорации и т.д.

Конечный результат:

import 'package:flutter/material.dart';
void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world!"),
        ),),);}}

И запустите его с помощью команды:

$ flutter run

Поздравляю! Вы только что создали свое первое приложение на Flutter.