×Закрыть

Створення додатку на Flutter: перші кроки

Доброго дня! Мене звати Євген Єфремов. Я веб-розробник, але цікавлюсь і іншими напрямками. Хочу розповісти про фреймворк Flutter від Google, призначений для розробки мобільних додатків. Стаття буде цікава як мобільним розробникам, які ще не спробували Flutter, так і розробникам іншого профіля, яких цікавить стан сучасного мобільного ринку. Ті, хто цікавиться мовою програмування Dart, також знайдуть для себе корисну інформацію.

Як це працює

Колись розробка якісних мобільних додатків була можливою тільки у випадку, якщо вона була нативною. Під кожну платформу окремо розроблявся додаток. Потім вигадали технології з додаванням вебу: додатки розроблялися за допомогою веб-технологій, а потім відображалися за допомогою обгорток (wrappers) чи через WebView. Робота з API мобільних систем (камера, датчики тощо) також проходила через обгортки.

Потім з’явився ReactNative. Хоч UI там і нативний, але працювати з ним можна теж лише з використанням обгорток.

А от у фреймоврка Flutter від Google — інший підхід. Там весь рендерінг працює через канвас. Flutter вміє рендерити як Material Design (Android), так і Cupertino (iOS). Для розробки використовується мова програмування Dart, яка компілюється у бінарний код, що добре впливає на швидкість.

З недавнього часу на Flutter можна зробити як десктопний додаток , так і веб-додаток. На сьогодні доступна версія Flutter 1.5. Тому її і будемо використовувати.

Встановлюємо Flutter

Я використовуватиму операційну систему macOS, підключу Android-девайс та запускатиму додаток на ньому. Але все це можна робити і на інших операційних системах (GNU/Linux, Windows) та запускати на iOS чи взагалі на емуляторі.

В інструкції пропонують встановити Android Studio. Але мені достатньо Visual Studio Code. Якщо ви будете використовувати Android Studio (чи IntelliJ IDEA), то можете скористатись офіційними інструкціями. Посилання на них будуть далі.

GNU/Linux

Є сторінка з інструкцією, де треба завантажити архів з SDK.

Але я раджу спробувати встановити більш лінуксовим способом, тобто знайти Flutter у вашому репозиторію. Наприклад, в операційній системі ArchLinux Flutter є у репозиторії AUR. Тому його можно встановити так:

yaourt -S flutter

Потім ще потрібно встановити Android SDK:

yaourt -S android-sdk

І SDK конкретної платформи з інструментами:

sdkmanager "platforms;android-28" "build-tools;28.0.3"

Це можна зробити і пізніше, коли будемо запускати перший додаток. Без SDK він не запуститься та нагадає про платформу Android та build-tools.

macOS

І знову пропонують завантажити архів на офіційній сторінці.

Проте, якщо ви використовуєте Homebrew, то інсталювати можна так:

brew tap MiderWong/flutter
brew install flutter

Ще Android SDK:

brew install android-sdk

Та платформу з build-tools:

sdkmanager "platforms;android-28" "build-tools;28.0.3"

Також потрібно додати змінну оточення з нашим Android SDK у файл ~/.bash_profile:

export ANDROID_HOME=/usr/local/share/android-sdk

Windows

Для Window доведеться завантажувати з офіційного сайту та виконувати все за інструкцією .

Налаштовуємо IDE

Я використовую Visual Studio Code. Для неї є інструкція на офіційному сайті.

Нам доведеться встановити розширення Flutter. З ним встановиться й розширення Dart для відповідної мови програмування.

Підключаємо девайс

Підключаємо за допомогою USB-кабеля. На девайсі повинен бути активований режим розробника.

Коли підключили, то треба обрати режим «Передавання файлів»:

Також має бути ввімкнена опція «Налагодження USB»:

Після підключення і ввімкнення необхідних опцій, можемо перевірити, чи є в нас підключені девайси:

flutter devices

Якщо є, то відповідь буде схожою на цю:

1 connected device:

FIG LX1 • XEDDU18B08001120 • android-arm64 • Android 9 (API 28)

Далі перевіримо, чи все в нас є для роботи:

flutter doctor

У відповіді можуть бути попередження:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale
    en-UA)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✗] iOS toolchain - develop for iOS devices
...
[!] Android Studio (not installed)
[✓] VS Code (version 1.35.1)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

Тобто в мене не має оточення для iOS та Android Studio. Для першого я поки що не збираюсь збирати додаток, а без другого — обійдусь.

Якщо doctor каже про неприйняті ліцензії для Android, то вирішити питання можна так:

flutter doctor --android-licenses

До речі, ці команди вже можна не писати у консолі, а виконувати у IDE.

Запускаємо наш перший додаток

Щоб запустити перший додаток, спочатку створимо його:

flutter create flutter_demo

Тепер в нас є проект flutter_demo. Можемо відкрити його у Visual Studio Code.

Переходимо у директорію з проектом (якщо ще не знаходимось там):

cd flutter_demo/

І одразу запускаємо:

flutter run

Додаток збереться та завантажиться на девайс:

Створюємо свій додаток з бекендом та... REST API

Що ж, відкриємо головний файл lib/main.dart та подивимось, що там. Так, це вже Dart.

Спочатку ми імпортуємо пакет з гугловським Material Design. Саме звідти беруться всі UI-віджети.

import 'package:flutter/material.dart';

Потім виконується функція main, яка і запускає наш додаток.

void main() => runApp(MyApp());

Сам клас додатка виглядає як StatelessWidget, у якому є початковий екран-віджет MyHomePage:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // ...
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

У Flutter є два основні типи віджетів:

  • StatelessWidget — віджети без стану.
  • StatefulWidget — віджети зі станом.

Наш домашній екран-віджет має стан, бо в нього є лічильник. Тому він має відповідний тип:

class MyHomePage extends StatefulWidget

Але я пропоную поки що не розбиратись у складному віджеті і спершу зробити простий, без стану, StatelessWidget з текстом. Для цього прибираємо весь код, починаючи з:

class MyHomePage extends StatefulWidget і до кінця.

Робимо простий початковий екран

Зробимо наш початковий екран stateless, тобто без стану:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Про нас'),
      ),
      body: Center(
        child: Text(
            'Ми робимо додаток на Flutter.',
          ),
      ),
    );
  }
}

У методі build ми віддаємо наш початковий віджет у декларативному вигляді. Scaffold — це базовий віджет для Material Design. У ньому ми розташували AppBar (хедер) з заголовком «Про нас» та контент з текстом у центрі.

Також змінимо запуск початкового віджету (приберемо зайвий title)

home: MyHomePage(title: 'Flutter Demo Home Page'),

на

home: MyHomePage(),

Тепер можемо просто оновити наш додаток (Hot reload), натиснувши клавішу «r» у консолі, де запускали сам додаток.

Побачимо:

Додаємо бокове меню

А зараз додамо гарне висувне бокове меню. У Material Design таке меню називається Drawer. Наш віджет з меню назвемо DrawerMain. У цьому віджеті буде стан — обраний пункт меню. Тому меню матиме тип StatefulWdget.

Пишемо код:

class DrawerMain extends StatefulWidget {
  DrawerMain({Key key, this.selected}) : super(key: key);

  final String selected;

  @override
  DrawerMainState createState() {
    return DrawerMainState();
  }
}

class DrawerMainState extends State<DrawerMain> {
  @override
  Widget build (BuildContext context) {
    return Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text(
                  'Flutter demo',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32.0,
                  ),
                ),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              selected: widget.selected == 'about',
              leading: Icon(Icons.info),
              title: Text('Про нас'),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyHomePage()),
                );
              },
            ),
            ListTile(
              selected: widget.selected == 'projects',
              leading: Icon(Icons.list),
              title: Text('Проекти'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ]
        )
      );
  }
}

І додамо сам Drawer до нашого початкового екрану-віджету (з вказівкою, який пункт меню обрано):

return Scaffold(
  // ...
  drawer: DrawerMain(selected: "about"),
  // ...
);

Головне тут — це те, що в нас є стан. Цей стан повертається методом createState(). Там знаходиться і наш віджет бокового меню. Стан необхідний, щоб ми знали, який пункт меню активний. У меню є шапка у вигляді тексту (DrawerHeader) та два пункти (ListTile): «Про нас» та «Проекти».

Коли ми натискаємо на пункт «ListTile», то виникає подія «onTap». А вже там ми приховуємо меню

Navigator.pop(context);

та переходимо до відповідного екрану

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyHomePage()),
);

Поки що екрану з проектами в нас нема, тому на нього ще зарано переходити.

Оновлюємо:

Отримаємо дані з REST API

Розробка повноцінного API вийде за рамки цієї статті, тому я просто зробив JSON-файл і виклав його у github-репозиторіі:

[
    {
        "imageUrl": "https://raw.githubusercontent.com/jhekasoft/flutter_demo/master/fake_api/1.jpg",
        "title": "Проект з мостом",
        "shortDesc": "Дуже цікавий проект"
    },
    {
        "imageUrl": "https://raw.githubusercontent.com/jhekasoft/flutter_demo/master/fake_api/2.jpg",
        "title": "Дерево",
        "shortDesc": "Тут дерево"
    },
    {
        "imageUrl": "https://raw.githubusercontent.com/jhekasoft/flutter_demo/master/fake_api/3.jpg",
        "title": "Птахи",
        "shortDesc": "Маленькі птахи"
    }
]

У ньому знаходяться дані наших уявних проектів. Цей JSON нам треба буде розпарсити, тому створюємо файл lib/fetch_data/project.dart з класом Project:

class Project {
  final String imageUrl;
  final String title;
  final String shortDesc;

  Project._({this.imageUrl, this.title, this.shortDesc});

  factory Project.fromJson(Map<String, dynamic> json) {
    return new Project._(
      imageUrl: json['imageUrl'],
      title: json['title'],
      shortDesc: json['shortDesc'],
    );
  }
}

Тут є необхідні поля і Project.fromJson() для парсингу даних.

Також нам знадобиться HTTP-клієнт, тому додамо його як залежність у pubspec.yaml:

dependencies:
  # ...
  http: any

Далі повертаємось до lib/main.dart та вставляємо імпортування:

import 'package:flutter_demo/fetch_data/project.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/scheduler.dart';
import 'dart:convert';

Ми імпортували клас Project для JSON, клас HTTP-клієнта та два інших, які нам знадобляться для оновлення списку та для імпорту з JSON.

Далі напишемо наш екран-віджет з проектами:

class ProjectsPage extends StatefulWidget {
  @override
  _ProjectsPageState createState() => _ProjectsPageState();
}

class _ProjectsPageState extends State<ProjectsPage> {
  List<Project> list = List();
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>();

  Future _fetchData() async {
    final response = await http.get(
      "https://raw.githubusercontent.com/jhekasoft/flutter_demo/master/fake_api/project_list.json"
    );
    if (response.statusCode == 200) {
      setState(() {
        list = (json.decode(response.body) as List)
          .map((data) => new Project.fromJson(data))
          .toList();
      });
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((_){  _refreshIndicatorKey.currentState?.show(); });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Проекти'),
      ),
      drawer: DrawerMain(selected: "projects"),
      body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _fetchData,
        child: ListView.builder(
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: Column(
                  children: <Widget>[
                    Image.network(
                      list[index].imageUrl,
                      fit: BoxFit.fitHeight,
                      width: 600.0,
                      height: 240.0,
                    ),
                    Text(
                      list[index].title,
                      style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      list[index].shortDesc,
                      style: TextStyle(fontSize: 11.0, fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Та додамо перехід на новий екран у бокове меню Drawer:

ListTile(
  selected: widget.selected == 'projects',
  leading: Icon(Icons.list),
  title: Text('Проекти'),
  onTap: () {
    Navigator.pop(context);
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ProjectsPage()),
    );
  },
),

Оскільки ми додавали нову залежність, то перезапустимо проект, щоб подивитись, що вийшло. Але тепер зробимо це з опцією —profile. Так у нас буде покращена анімація віджетів, проте оновлювати додаток швидко за допомогою клавіші «r» ми не зможемо.

flutter run --profile

З’явився новий екран:

Екран з проектами — це StatefulWidget, тому що в нас є віджет RefreshIndicator, для якого використовується змінна-ключ _refreshIndicatorKey. Цей віджет потрібен для оновлення списку з проектами. Тобто ми можемо свайпнути екран до низу, а проекти оновляться.

Список складається з карток (Card), в яких є зображення (Image.network) та текст (Text). Вони знаходяться у віджетах Container та Column. Це потрібно, щоб налаштувати прийнятний зовнішній вигляд.

Завантаження списку відбувається у методі _fetchData(). Ми декодуємо отриманий JSON та парсимо його у список list з Project. Також оновлення змінної list ми робимо всередині setState(). Це потрібно для реактивного оновлення, щоб віджет-екран оновився з новими даними.
Коли ми потрапляємо на екран ProjectsPage, то виконується метод initState(). У ньому ми оновлюємо список за домогою цього рядку:

SchedulerBinding.instance.addPostFrameCallback((_){ _refreshIndicatorKey.currentState?.show(); });

Також ви могли помітити такі речі з функціонального програмування як тип Future та метод map(). Про них ви можете дізнатись на офіційному YouTube-каналі Flutter. Ось, наприклад, про Future.

Збираємо пакет APK для Android

Обов’язково перевірте, щоб у файлі android/app/src/main/AndroidManifest.xml були вказані права для доступу до інтернету:

<manifest>
    <!-- ... -->
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

У моєму випадку, їх не було, тому неможливо було завантажити JSON з проектами.

А далі просто виконуйте:

flutter build apk

APK-файл буде знаходитись тут: build/app/outputs/apk/release/app-release.apk. Мій файл займає 5,6 MB.

Раджу статтю на офіційному сайті з релізу на Android.

Висновки

Git-репозиторій проекту, яким ми сьогодні займались, знаходиться тут .

Я показав лише декілька екранів та бокове меню на Flutter. Також спробував отримати дані з мережі. Це виявилось не складно.

Загалом, мені подобається робота додатку: працює плавно, виглядає досить нативно.

Розмір додатка вражає: 5,6 МБ — це не багато.

Як заявляє Google на офіційному сайті , Flutter вже використовують Alibaba, Abbey Road Studios, сам Google у додатку Google Ads та багато інших. Тому цей фреймворк (чи навіть технологія) здається перспективним.

Звісно, цікаво спробувати системніші речі. Наприклад, камеру, датчики, push-сповіщення тощо. Якщо стаття буде комусь цікава, я спробую зробити на Flutter ще щось. Тому чекаю від вас побажань!

LinkedIn

61 комментарий

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

Ми з товаришем взагалі зробили interactive fiction про козацьку Україну на Flutter:

play.google.com/...​?id=gladimdim.locadeserta
apps.apple.com/...​pp/дике-поле/id1468068398

Єдине, що прийшлося писати порт під рушій Inkle на Objective-C та Java, який займається безпосередньо обробкою історії і її варіантів. Можна було б і на флатер читати їх жсон, але страшний гемор + купа магії.

якщо порівнювати з SwiftUI, то забагато треба коду для анімацій + вони дуже низькорівневі. На свіфтюай якось простіше і все в один рядочок виходить.

Я так понимаю, в Фуксии уже не будет никакого Java-рантайма, так что Котлин идет мимо. А чем Dart не устраивает? Нормальный мейн-стрим язык, не хуже джавы и прости Господи, джаваскрипта так точно.

А чем Dart не устраивает?

class _SomeState extends State<T> {}
Эти нижние подчеркивания — самое идиотское, что только можно было придумать. Но в целом, конечно, жить можно.

Да уж, для языка с таким внушительным списком reserved words, зажлобиться на private модификатор и заменить его на идиотское подчеркивание, которое используется в языках, в которых вообще нет контроля доступа к членам классов, и используются конвенции, типа Питона — это какая-то наркомания, не иначе.

чому, доволі шгарна ідея з цим підкресленням. Менше писати букв %)

Все эти _ и $ только уродуют язык, пэхапэ и JS в каком-нибудь 1-м ангуляре или джейквери — тому доказательство. Использовать _ как конвенцию в языке без поддержки приватных членов — еще куда ни шло, но зачем оно нужно там, где есть реальный private скоуп? Почему не взять стандартное ключевое слово, используемое еще в 100500 языках для той же цели?

Буквы — узнаваемы и читаемы.
Спецсимволы — не human readable.

Буквы печатать не надо вообще — есть автодополнение.

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

Пришел на Flutter после 4-х лет на фронтенде. Это просто глоток свежего воздуха. Такого кайфа от разработки не испытывал даже на заре своей карьеры, а это было уже 20 лет назад на минуточку.

Возможно ли завернуть не самую тривиальную iOS—нативщину, как системную (AVFoundation, CarPlay, ARKit), так и thirdparty (GPUImage, libVLC) во flutter-wrapper? Нормально ли уживутся Skia Canvas и custom views с, например, metal—рендерингом? Реализована ли полноценная работа с расширениями (Notification content extension, iMessage extension, Today extension, и т.д.)? Как насчет AppleWatch?

Насчёт Apple Watch — официальной поддержки пока нет. Но есть большая вероятность, что появится, так как за пол года появилась поддержка десктопа и веба.

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

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

Потрібно індивідуально дивитись, є вихід через method channel що стосується специфічних для платформи API, наприклад Facebook логін плагін саме через це і працює:
flutter.dev/...​gration/platform-channels

Там основной прикол не в том, чтобы дёрнуть API, а чтобы «подружить» отрисовку Flutter с системными UI элементами или OpenGL ES / Metal.

Задача решаемая, и я даже видел пример реализации, но 100% нетривиальная.

Flutter насправді дуже перспективний для розробки програм що працюють швидко та виглядають природньо на двох платформах. Більшість звичайних REST-based програм можуть бути легко написані на Flutter вже зараз.

Щоб мати справжню уяву про технологію я зробив програму компатних заміток та нагадувать для iOS/Android та пройшов весь шлях до публікації.

play.google.com/...​ls?id=name.pilgr.notenger
apps.apple.com/...​es-reminders/id1458736721

Якби ще можливо було Dart замінити на Kotlin...

Прикольная интро статья.
Кому интересно работать и продвигать Флаттер — добро пожаловать в группу единомышленников t.me/artflutter

Не готовий він ще до більш-менш серйозного використання. Почав був писати програму, потім стикнувся з:
github.com/...​utter/flutter/issues/1608
github.com/...​tter/flutter/issues/13264
github.com/...​tter/flutter/issues/11344
і пішов на звичайну Java, де таких сюрпризів немає. Добре що проект був тільки для Android :)

Пожалуйста, не пишите чушь и не отпугивайте людей, которые смотрят в сторону новых технологий.
Пишу мобильные продакшн проекты на флаттере (мобильная криптобиржа и куча энтерпрайз аппок) уже больше года и все ок. Первые 2 issues из ваших ссылок касаются flutter web, а 3й issue не является проблемой и решается с помощью focusNode (в общем-то там это тоже написано, нужно только почитать ссылки, которые скидываете).

З якого це дива перші дві стосуються flutter web? Мені вони на звичайному собі Android завадили. Просто тому що на девайсі є апаратна клавіатура.
Тому маячню пишете ви :)
Спробуйте, підключіть Bluetooth-клавіатуру до девайсу і попрацюйте з будь-якою з ваших програм тільки клавіатурою — нічого у вас не вийде (якщо тільки не морочилися спеціально з купою boilerplate-коду).
До речі, там ще з accessibility було не все добре, хз що зараз.

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

Не готовий він ще до більш-менш серйозного використання.

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

Тому маячню пишете ви :)

Простите, не могу понять вашу мысль.

До речі, там ще з accessibility було не все добре, хз що зараз.

Сейчас поддерживаются динамические шрифты, скрин ридер и увеличенный контраст.

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

Згоден, ви праві. На мою різкість вплинула емоційна реакція коли я в процесі прототипування виявив що клавіатурної навігації немає взагалі, і ця задача зовсім не в пріоритеті. Що виглядало дуже дивно, з огляду на заявлену універсальність.

Простите, не могу понять вашу мысль.

Це було до вашої фрази про те, що перші дві issue стосуються flutter web — бо насправді вони стосуються всіх платформ.

Сейчас поддерживаются динамические шрифты, скрин ридер и увеличенный контраст.

Скрін-рідер пов’язаний з навігацією та фокусом, якщо і це також зробили — значить добре.

Взагалі фреймворк розвивається, це насправді радує.

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

За год+ работы с фреймфорком у меня все еще очень положительные эмоции. Заметил, что стал больше времени проводить думая о фичах и проекте в целом. UI из разряда челленджа перешел в категорию ’отдохнуть’ :) Хорошая архитектура + декларативный UI однозначно сделали меня счастливее. Даже проект исключительно под iOS решили писать на Флаттере, вместо нативщины.

Большинство граблей с Accessibility решаются с помощью семантик. Для любителей хардкора можно переопределить AccessiblityProvider для главной активити приложения, и выставлять какие душе угодно атрибуты в нем. Один раз стоит заимплементить, а потом использовать его во всех последующих проектах.

Ну, так він же opensource. Можно й самому пофіксити та pull request закинути.

Можна, тільки от для цього треба бути глибоко знайомим з проектом — тому що це досить серйозний шмат роботи. Я не готовий був тоді витрачати стільки часу на це.
А зараз там вже люди знайшлися, я так розумію.

Я в целом разобрался спустя месяц работы с ним. И это с учетом того, что пришел сюда с фронтенда, а Dart и Kotlin(на котором сейчас пишу нативные костыли для своего проекта) увидел впервые.

Чушь, 3-й месяц пишу проект для RealWear HMT-1 (промышленный наголовный Android компьютер с управлением голосовыми командами) — еще ни одного затыка, чтоб что-то не получилось реализовать. Низкоуровневые вещи, типа сканера бар-кодов и прочего, решаю с помощью самописных плагинов.

То у вас просто немає навігації клавіатурою. Вище в гілці детальніше описана моя основна претензія — яка зараз, судячи з написаного в issue, вирішується.
Ще з цікавого. Як там 3D графіка? Синхронних викликів досі немає з ідеологічних причин? (ну там відреагувати на повідомлення системи про нестачу пам’яті наприклад, синхронно, щоб система не вбила процес)?

                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Уххххх б**

Аж обои с десктопа отклеились

Коротко о разработке на флаттер...

Коротко о разработке на HTML:

</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Ну, так, это декларативное описание интерфейса. Откройте любой HTML, там вложенность такая же будет. Если бы это были if’ы или другой управляющий код, то да. По идее описание интерфейса можно вынести в отдельный файл. А вообще, конечно, хочется чтобы это совсем отдельно было. В том же XML например.

Почему тогда в андроиде (независимо в xml или коде) создавая вьюху не бывает такого спагетти кода?

Что последняя запятая животворящая делает.

юные студенческие годы, Turbo Vision под DOS наPascal :)

>цікаво спробувати системніші речі. Наприклад, камеру, датчики, push-сповіщення тощо
недавно закончил полноценный эпп на флаттере. Там и камера, пуш, mlkit... Если сравнивать с RN, то flutter — это Ферари по скорости разработки. Эпп: uncrk.com

Плагины. Правда мало их еще.
Если знаете как со всем перечисленным работать из натива — можете за пару часов сделать свой без проблем.
Я сейчас пишу проект под RealWear HMT-1, уже сделал плагины для камеры, баркод сканера и регистрации глобальных голосовых команд, при том что проекту всего третий месяц, а Dart и Kotlin увидел впервые.

використанням обгорток.

А от у фреймоврка Flutter від Google — інший підхід. Там весь рендерінг працює через канвас.

Чого тільки не вигадають, аби не вчити Android SDK))

Так если бы только Android SDK, вся соль-то в кросс-платформенности, и что приложение выглядит одинаково на обеих платформах (что реально фича для брэндированного дизайна)

Приложение не должно выглядеть одинаково на обеих платформах. Разный UX.

Instagram с вами несогласен :)

Я вообще это приложением не считаю. Так, сайт-визитка.

Сайт-визитка, только не сайт, а мобильное приложение. :) Предлагайте какое приложение сделать.

Как на Флаттере обстоят дела с такими вещами, без которых ни одно серьёзное приложение не обходится?
1) Работа с реляционными базами данных?
2) Сложные анимации, связанные с одновременным вращением, масштабированием и изменением прозрачности, например?
3) Как хэндлится сложная логика переходов, к примеру, из общего меню на нулевом уровне и индивидуальным бэкстеком на каждой ветке переходов?
4) Как там ситуация со сложными кастомными диалогами, содержащими, например, выпадающие меню, списки, видео?
5) Как с анимированными виртуальными списками (таблицами)? К примеру, свайп для элементов списка/таблицы из коробки поддерживается? Анимированное добавление/удаление элементов присутствует?
6) Как осуществляется связь между экранами, или между экранами и диалогами? Rx-реализация этой связи есть (общая шина событий)? А не-Rx реализация такой связи из коробки присутствует?
7) Как с архитектурными паттернами?
Есть возможность отделить логику от представления начисто и переписывать их в случае необходимости независимо друг от друга?
8) Как с многопоточностью? Реализация через Rx еcть? А собственый механизм?
9) А музыку, например, послушать? Как с задачами в бэкграунде?

Всё хорошо с этим. Вот можете посмотреть каталог опенсорсных приложений на Flutter: itsallwidgets.com.

Приложения приложениями. Там же не видно, что у них под капотом.
Единая дока, где описаны все апи для этих задач (как это есть для нативной разработки) у Флаттера существует?
Сэмплы работы с виджетами, реализация того же банального вьюхолдера. Где-то это описано?

Конечно. На официальном сайте: flutter.dev/docs. Логично же, что у них есть документация.

Нифига себе визитка: трансляции (webrtc или что они там используют), создание сторриз (такой себе мини-графический редактор), кеширование под 100500 сущностей, чаты внутри приложения, отправка и трекание всякой юзер активности для fb и т.д. — это явно по сложности превосходит сайт-визитку.

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

Извольте) Это уже как бизнес закажет.

Чушь, там Skia, которая работает через GL на 60фпс.

Бай зе вей, активно займаюсь ним, майже докрутив повноцінний додаток, є стаття на Medium.com https://medium.com/@mk.pyts/flutter-flip-coin-animation-test-drive-e7ddb126a20c + в найближчий час дропну ще декілька і переходжу повністю на нього, з рекомендованих архітектур там Redux або BloС в реактивному стилі, дуже багато плагінів для коннекту з найтівними платформами

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

Плюсую, только добавлю, что юзать BLoC надо от Феликса Ангелова, не надо изобретать велосипеды и пилить каждый раз свой со стримами, синками и контроллерами.

Очень интересно и перспективно, как идея для след статьей подключить редакс/провайдер к приложению, попробовать на зуб их сторибук и самое интересное это запустить флаттер внутри реакт нейтив приложения и отрендерить пару страниц

самое интересное это запустить флаттер внутри реакт нейтив приложения и отрендерить пару страниц

«О-о, месье знает толк в извращениях!» © :)

Если серьезно, я бы смотрел в сторону Electrode, это фреймворк, который облегчает интеграцию RN и native code (а Flutter всё равно придётся прикручивать через нативный код)

«Не важно, как проголосовали, важно, как подсчитали», Google зробить все щоб пропихнути його, Dart и Google Fuchsia яка швидше за все вийде в 2020.

Не улавливаю смысл комментария, если честно. Dart уже и так вышел, на этом языке программирования пишут под Flutter уже сейчас (но за пределами этой экосистемы язык особой популярности не снискал).

Что касается Fuchsia, то Гугл сами говорили, что она не будет заменой Андроиду:

The comment from Android’s Senior VP suggests that the operating system might not be released to end devices. It is also not likely to replace Android, which has been rumored since Fuchsia appeared in the wild for the first time. „It’s not just phones and PCs. In the world of [the Internet of Things], there are an increasing number of devices that require operating systems and new runtimes and so on. I think there’s a lot of room for multiple operating systems with different strengths and specializations. Fuchsia is one of those things and so, stay tuned,” Lockheimer added.

У гугла немного другой подход к технологиям. За примером далеко ходить не надо : android things, project tango, project ara и десятки других

Подписаться на комментарии