Мы запустили FlutterBricks, чтобы облегчить жизнь разработчиков Flutter с помощью простых в использовании, но красивых компонентов и экранов. С тех пор мы уже помогли тысячам людей в более чем 100 странах мира.

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

Мы рады объявить о новых функциях и новом направлении для Flutterbricks.

Что мы решаем?

Вы когда-нибудь работали над виджетом, а потом вспоминали, что уже создали его? Или позже вы узнали, что все члены вашей команды строили его трижды? Подумайте, сколько времени было потрачено разработчиками на перестройку функциональности, которую можно было бы легко использовать повторно.

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

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

Для нас стало второй натурой открывать расширение FlutterBricks, искать виджет, который мы искали визуально, и настраивать этот виджет вместо того, чтобы кодировать все с нуля. Нам больше не приходилось искать в наших репозиториях, пытаясь вспомнить, как мы назвали этот виджет — все наши виджеты отображались визуально, в одном месте, на расстоянии 1–2 кликов.

Представляем: Менеджер виджетов (закрытое бета-тестирование)

Мы разработали диспетчер виджетов, чтобы разработчики могли максимально упростить сохранение, организацию и доступ к многократно используемым виджетам в любом проекте, в котором они находятся. Больше не нужно искать в старых репозиториях полезные, многократно используемые виджеты. С помощью Widget Manager вы можете создавать виджеты в репозитории вашего проекта, а затем «отслеживать их», чтобы они были легко доступны независимо от того, над чем вы работаете. Никаких сложных настроек или пакетов не требуется.

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

Отказ от ответственности

Здесь, во Flutterbricks, мы посвящаем себя экспериментам. Мы понимаем, что Менеджер виджетов далек от совершенства. Однако мы знаем, что единственный способ создать его правильно — это повторять итерации на основе ваших отзывов.

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

Как это использовать

Во-первых, убедитесь, что вы используете VS Code и у вас установлено расширение FlutterBricks.

После установки FlutterBricks вы должны увидеть его логотип на левой боковой панели VS Code. Войдите с помощью Google или GitHub.

В верхней части расширения вы увидите две вкладки: Marketplace и My Bricks. Торговая площадка — это место, где вы можете найти готовые виджеты или экраны, созданные нами (а позже и сообществом). My Bricks — это место, где вы можете хранить ваши виджеты. Если вы читаете это, пока мы находимся в закрытом бета-тестировании, вам будет предложено ввести код доступа. Если вы еще не подписались на наше закрытое бета-тестирование, вы можете это сделать, перейдя по ссылке в верхней части нашего веб-сайта. Код доступа можно найти в вашей электронной почте.

Простая установка

Если вы впервые используете FlutterBricks в своем проекте, вам будет предложено создать папку с кирпичами.

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

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

Нажмите кнопку «Создать пакет», дайте ему имя пакета, например «Пользовательские кнопки» (например, если вы хотите сохранить кнопки).

Поздравляю! Вы создали свой первый пакет. Это будет отображаться следующим образом:

Обратите внимание, что в левом верхнем углу есть кнопка загрузки. Это средство существует в удаленном месте, но еще не загружено в папку с кирпичами. Там также написано «частное», что означает, что вы единственный человек, который может его видеть. Позже мы планируем интегрировать общий доступ, чтобы вы могли делиться своими творениями со своей командой или сообществом.

Создание вашего первого виджета (он же кирпич)

Нажмите на пакет, который вы создали сейчас, и нажмите кнопку «Создать новый блок». При создании нового кирпича у вас есть возможность выбрать для него имя файла, а также указать, хотите ли вы, чтобы он был без сохранения состояния и с сохранением состояния.

Теперь нажмите «Создать виджет» и наблюдайте, как происходит волшебство!

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

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

  • Заголовок — понятный человеку заголовок для вашего виджета.
  • Предварительный просмотр виджета — скриншот виджета. Мы настоятельно рекомендуем сделать это, это значительно облегчит поиск нужного вам виджета.
  • Вызов виджета — так вы вызываете виджет. Например, вызов виджета для этой кнопки будет таким:
Button(onPressed: () {}, text: "Contained Button")

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

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

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

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

Повторное использование виджета

Теперь давайте представим, что вы переключились на другой проект. Как именно FlutterBricks помогает? Давайте углубимся.

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

После того, как мы сгенерируем каталог Bricks в этом файле, появится экран My Packs. Зацените, пакет пользовательских кнопок есть, хотя его еще нет в нашем локальном проекте!

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

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

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

Если я нажму «Импорт», он автоматически создаст этот файл в каталоге «Мои кирпичи» и откроет его на случай, если я захочу внести какие-либо изменения.

Давайте завершим это.

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

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

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

  • Совместное использование команды
  • Автоматический предварительный просмотр виджетов
  • Публичный рынок виджетов

И будем прислушиваться к отзывам сообщества. Если вы хотите предложить изменение или даже внести свой вклад, сообщите нам об этом здесь.

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

Спасибо от Команды FlutterBricks в партнерстве с Flutter Guide.