Flutter-разработчикам: показываем, как шарить код через DartPad

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

Меня зовут Ахмедов Самир, я Flutter разработчик в Surf, и я расскажу о том, что же ещё умеет DartPad.

Конфигурация

dartpad.dev позволяет заранее настроить внешний вид и функционал.

Страницы

DartPad предоставляет нам на выбор 6 разных страниц. Разница между ними лишь в том, какой функционал нам будет предоставлен.

1. embed-dart

Уже привычный сайт с вводом кода на Dart слева и консолью справа. 

2. embed-inline

То же, что и первое, только консоль не справа, а снизу

3. embed-flutter

Редактор кода с динамической отрисовкой UI.

4. embed-flutter_showcase

В отличие от прошлого, показывает только готовый UI, а код — только после нажатия «show code». Отлично подходит для демонстрации результата, когда реализация не слишком важна.

5. embed-html

Редактор HTML страниц, но вместо Javascript можно использовать Dart. Стили CSS можно писать тут же и видеть результат.

6. workshops

DartPad с функционалом воркшопа.

Query-параметры

Также мы можем выбрать не только функционал страницы, но и настроить, что в нем будет и как оно будет выглядеть. Конфигурация Dartpad добавляется в URL как query параметры.

1. split

Часть экрана в процентах, что будет занята кодом.

Пример:

2. theme

Значения —  dark и любое другое. Если theme = dark, то тема редактора — тёмная, иначе — светлая.

Пример:

3. run

Значения — true и другие. Если значение — true, код запускается сразу после запуска страницы. 

Интеграция с Github

В Dartpad можно загружать код напрямую из Github и создавать кастомные воркшопы.

Github Gist

Код можно загрузить с любого публичного аккаунта GitHub, добавив в URL query id.

К примеру, вот URL вашего Gist: https://gist.github.com/{username}/0b4eaa233d04a2d62a63ceb337375c7d

То, что идёт после {username}/, и есть ID Gist. 

Github Repo

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

Чтобы привязать Github репозиторий к DartPad, нужно обязательно добавить 3 query поля: 

• gh_owner — название вашего аккаунта на Github.

• gh_repo — название публичного репозитория, где лежат все нужные файлы.

• gh_path — папка, в котором находится нужные файлы. 

Все поля обязательны, даже gh_path: нужно будет обязательно поместить все файлы в какую-то одну папку, не дальше и не ближе.

Можно ещё добавить gh_ref — название ветки, которую нужно использовать, но это опционально. После того как вы создали репозиторий и папки, осталось только понять, что же нужно в них положить.

Код с подсказками и примером исполнения

Чтобы загрузить код из репозитория, структура отведённой под это папки должна выглядеть вот так:

Где:

dartpad_metadata.yaml —  конфигурация для DartPad, из которого он понимает, какой файл, где его читать и для чего он служит.

name: Flutter DartPad repo

# Какой код перед нами - чистый Dart или Flutter.

mode: dart # or 'flutter'

# Какие файлы DartPad должен прочитать.

files:

  - name: main.dart

Для того чтобы показать просто код, надо указать только main.dart. А в main.dart просто пишем код:

/// Просто файл с кодом. Ничего необычного.

void main() {

  print("Test!");

}

Выгружаем изменения в репозиторий и через минуту смотрим на результат: