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

Видео, привязанное ниже, пошагово проведет вас через всю статью, дополнительно предоставив инструкции по коду. Если вы застряли или предпочитаете учиться через видео, то видео поможет вам (на анг. яз.)!

Этот клон позволит вам:

• войти под различными учетными записями пользователей;

• добавлять и изменять профильные фотографии;

• добавлять фотопосты в свою ленту пользователя (активности);

• подписываться/отписываться от лент других пользователей;

• добавлять комментарии и лайки (реакции).

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

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

• как аккуратно структурировать и организовать ваш код;

• как использовать Provider и базовые компоненты Flutter для удобного управления состоянием приложения;

• создание темы приложения, чтобы поддерживать светлый и темный режимы;

• переходы между страницами;

• анимации и как настроить их;

• когда использовать неявные анимации, а когда явные анимации;

• как создать свои собственные анимации;

• особенности производительности;

• множество советов по верстке и другим возможностям Flutter;

• методы расширения;

• использование TextEditingController, PageController и FocusNode;

• использование AutomaticKeepAliveClientMixin для кэширования страниц.

Что такое Activity Feed?

Чтобы понять, что предлагает нам Stream Flutter Feed SDK, сначала вам нужно понять, что такое потоковая лента активности (activity feed).

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

Поток (stream) берет на себя сложность управления потоковыми лентами активности и делает это простым, а Stream Feed Flutter SDK делает это простым с точки зрения пользовательского интерфейса.

Создание клона приложения Instagram с помощью лент (feed)

Давайте обсудим, как потоковая лента активности будет работать в контексте создания нашего клона приложения Instagram. Мы создаем ленту пользовательских постов с изображениями (активностей). Эти посты также должны показывать взаимодействие пользователей и их реакции в виде лайков и комментариев. Пользователи должны иметь возможность подписываться на конкретных пользователей, которые их интересуют, и видеть ленту постов от всех, на кого они подписаны. Они также должны иметь возможность просмотреть все свои собственные посты.

С некоторыми более высокоуровневыми концепциями мы разобрались, и, наконец, можем начать.

Создаем приложение Flutter

Первый шаг в этом путешествии... создаем новое приложение Flutter ????.

Запускаем следующую команду в нашем терминале в выбранной нами директории:

$ flutter create stream_agram

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

Зависимости пакетов

Открываем файл pubspec.yaml и добавляем следующие зависимости:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  stream_feed_flutter_core: ^0.7.0+1
  provider: ^6.0.2
  google_fonts: ^2.3.1
  image_picker: ^0.8.4+9
  cached_network_image: ^3.2.0
  transparent_image: ^2.0.0
  jiffy: ^5.0.0

⚠️ ВНИМАНИЕ: Сейчас, когда вы читаете эту статью, могут быть обновлены версии этих пакетов. Если вы хотите точно следовать инструкциям, то будет лучше использовать упомянутые выше версии. Когда вы станете знакомы с кодом, вы можете запустить команду flutter pub outdated, чтобы увидеть, какие пакеты требуют обновления.

Настройка Stream