Создавайте надежные фрагменты кода с помощью популярных пакетов в DartPad

Сегодня мы рады сообщить, что поддержка пакетов теперь доступна в DartPad! DartPad — это веб-платформа с открытым исходным кодом, которая запускает приложения Dart и Flutter прямо в вашем веб-браузере. Это позволяет вам быстро запускать код Dart для проверки идеи или разработки технической концепции без необходимости установки Flutter SDK или каких-либо инструментов в вашей локальной системе.

С момента запуска DartPad одним из самых популярных запросов было добавление поддержки импорта пакетов, таких как Google Fonts или Firebase Authentication, непосредственно в редакторе DartPad. На этом первом этапе развертывания вы можете импортировать из набора популярных пакетов.

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

Пример шрифтов Google

Начните использовать пакет, добавив для него оператор импорта в верхней части редактора кода. Например, чтобы использовать пакет Google Fonts, добавьте следующее:

import 'package:google_fonts/google_fonts.dart';

DartPad обрабатывает детали pubspec за вас, поэтому все, что вам нужно, это оператор импорта. Вы можете использовать предлагаемые дополнения для изменения шрифтов, а затем перезапустить приложение, как в IDE.

Как работает поддержка пакетов

Вот краткий обзор того, как работает поддержка пакетов в DartPad. Сервер DartPad берет набор поддерживаемых пакетов и использует flutter pub get для получения последней совместимой версии каждого пакета. Затем сервер использует эти версии пакетов при анализе и компиляции вашего скрипта DartPad.

Этот выпуск также поддерживает самые популярные пакеты Firebase, поэтому вы можете получить доступ к набору серверных служб, даже не покидая DartPad. Все необходимые SDK Firebase JavaScript загружаются в панель вывода перед запуском скомпилированного приложения.

Вот простое приложение для чата, использующее Firebase:

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

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

Поддерживаемые пакеты

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

Попробуйте!

Попробуйте поддержку пакета DartPad сегодня на dartpad.dev и поделитесь своими отзывами с нашей командой. Со временем мы продолжим расширять список поддерживаемых пакетов. Если у вас есть какие-либо предпочтения относительно того, какие пакеты вы хотели бы видеть добавленными, найдите проблему, содержащую имя нужного пакета, и поставьте 👍 реакцию большой палец вверх. Если для нужного вам пакета нет задачи, пожалуйста, создайте задачу и укажите название пакета в заголовке.

Мы надеемся, что поддержка пакетов на DartPad позволит вам создавать и демонстрировать свои проекты Flutter, идеи, виньетки и многое другое. Нам не терпится увидеть, что вы построите дальше!