Создаем клон Instagram при помощи Flutter и Feeds. Часть 2

Привет! Продолжаю выкладывать перевод статьи, которую я использовал как основу для реализации социального функционала в нашем проекте Dom24x7, где люди могут общаться друг с другом, решать возникающие бытовые проблемы, а также взаимодействовать с УК/ТСЖ. Первую часть статьи можно прочитать тут.

Пишем код для нашего инстаграм клона

Наконец, мы добрались до самой интригующей части статьи.

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

Наш Stream-agram будет состоять из нескольких основных компонентов UI, от которых мы будем отталкиваться позже в статье. Это такие компоненты как:

• Экран входа (mock-объект): там, где мы входим в свой профиль;

• Главный экран: откуда мы сможем переходить в другие области нашего приложения (по умолчанию там будет открыта хронологическая лента);

• Саму страницу с хронологической лентой (домашняя вкладка): место, где пользователь смотрит посты тех на кого подписан;

• Вкладку личного профиля: там, где представлена вся информация о профиле, включая опубликованные посты;

• Вкладку поиска: откуда пользователь может подписываться и отписываться от других пользователей;

• Экран «Редактировать профиль»: там, где пользователь может изменить основную информацию профиля и основное фото;

• Экран «Новая публикация»: там, где пользователь может выкладывать новые посты (действия) в свой профиль.

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

Файл Flutter и структура папок

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

Это приложение группирует весь код под две папки верхнего уровня: app и components.

В components находится все, что будет представлено в пользовательском интерфейсе - его компоненты. Другими словами это будут кусочки приложения, которые смогут работать независимо от других его частей; например - страницы/вкладки, кнопки, и виджеты. Каталог component будет также содержать папку с именем app_widgets, которая будет содержать все общие виджеты, используемые в приложении.

Каталог app содержит классы, относящиеся ко всему приложению, а также код, который будет использован множеством компонентов. Например, app state и navigation.

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

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

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

├── lib
|   ├── app
│   │   ├── navigation
│   │   │   └── custom_rect_tween.dart
|   |   |   └── hero_dialog_route.dart
|   |   |   └── navigation.dart *
|   |   ├── state
|   |   |   ├── models
|   |   |   |   └── models.dart *
|   |   |   |   └── user.dart
|   |   |   └── app_state.dart
|   |   |   └── demo_users.dart
|   |   |   └── state.dart *
|   |   └── app.dart *
|   |   └── stream_agram.dart
|   |   └── theme.dart
|   |   └── utils.dart
|   ├── components
│   │   ├── app_widgets
│   │   │   └── app_widgets.dart *
|   |   |   └── avatars.dart
|   |   |   └── comment_box.dart
|   |   |   └── favorite_icon.dart
|   |   |   └── tap_fade_icon.dart
|   |   ├── comments
|   |   |   ├── state
|   |   |   |   └── comment_state.dart *
|   |   |   |   └── state.dart
|   |   |   └── comment_screen.dart
|   |   |   └── comments.dart *
│   │   ├── home
│   │   │   └── home_screen.dart
|   |   |   └── home.dart *
|   |   ├── login
|   |   |   └── login_screen.dart
|   |   |   └── login.dart *
│   │   ├── new_post
│   │   │   └── new_post_screen.dart
|   |   |   └── new_post.dart *
|   |   ├── profile
|   |   |   └── edit_profile_screen.dart
|   |   |   └── profile_page.dart
|   |   |   └── profile.dart *
│   │   ├── search
│   │   │   └── search_page.dart
|   |   |   └── search.dart *
|   |   └── timeline
|   |   |   ├── widgets
|   |   |   |   └── post_card.dart
|   |   |   |   └── widgets.dart *
|   |       └── timeline_page.dart
|   |       └── timeline.dart *
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml

⚠️ Заметьте, что баррель-файлы помечены звездочкой «*»

Создаем пользователей для нашего Instagram

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

Создайте файл app/state/demo_users.dart и добавьте в него следующее:

import 'package:stream_feed_flutter_core/stream_feed_flutter_core.dart';

/// Demo application users.
enum DemoAppUser {
  sahil,
  sacha,
  reuben,
  gordon,
}

/// Convenient class Extension on [DemoAppUser] enum
extension DemoAppUserX on DemoAppUser {
  /// Convenient method Extension to generate an [id] from [DemoAppUser] enum
  String? get id => {
        DemoAppUser.sahil: 'sahil-kumar',
        DemoAppUser.sacha: 'sacha-arbonel',
        DemoAppUser.reuben: 'reuben-turner',
        DemoAppUser.gordon: 'gordon-hayes',
      }[this];

  /// Convenient method Extension to generate a [name] from [DemoAppUser] enum
  String? get name => {
        DemoAppUser.sahil: 'Sahil Kumar',
        DemoAppUser.sacha: 'Sacha Arbonel',
        DemoAppUser.reuben: 'Reuben Turner',
        DemoAppUser.gordon: 'Gordon Hayes',
      }[this];

  /// Convenient method Extension to generate [data] from [DemoAppUser] enum
  Map<String, Object>? get data => {
        DemoAppUser.sahil: {
          'first_name': 'Sahil',
          'last_name': 'Kumar',
          'full_name': 'Sahil Kumar',
        },
        DemoAppUser.sacha: {
          'first_name': 'Sacha',
          'last_name': 'Arbonel',
          'full_name': 'Sacha Arbonel',
        },
        DemoAppUser.reuben: {
          'first_name': 'Reuben',
          'last_name': 'Turner',
          'full_name': 'Reuben Turner',
        },
        DemoAppUser.gordon: {
          'first_name': 'Gordon',
          'last_name': 'Hayes',
          'full_name': 'Gordon Hayes',
        },
      }[this];

  /// Convenient method Extension to generate a [token] from [DemoAppUser] enum
  Token? get token => <DemoAppUser, Token>{
        DemoAppUser.sahil: const Token(''), // TODO add token
        DemoAppUser.sacha: const Token(''), // TODO add token
        DemoAppUser.reuben: const Token(''), // TODO add token
        DemoAppUser.gordon: const Token(''), // TODO add token
      }[this];
}

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

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

Код выше содержит в себе enum класс DemoAppUser c расширением DemoAppUserX. Сделано это для того, чтобы мы могли получить доступ к другим данным (например к токенам или к именам пользователей). Этот файл не является критично важным, и вы можете создать ваших фейковых пользователей любым другим способом.

Создайте баррель-файл командой app/state/state.dart и экспортируйте его:

export 'demo_users.dart';

Далее, добавьте баррель-файл уровня выше, который имеет вид app/app.dart экспортируйте его:

export 'state/state.dart';

Создаем темы для нашего инстраграм клона

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