codestory

Dart-Programmierung mit dem Online-Tool DartPad

  1. Was ist DartPad?
  2. Unterstützte Bibliotheken
  3. Erstellen Sie eine Anwendung Dart Command-line
  4. Erstellen Sie eine HTML Dart Application
  5. die Anwendung Flutter erstellen
  6. DartPart in Website einbetten

1. Was ist DartPad?

Normalerweise müssen Sie zum Erlernen einer neuen Sprache eine IDE installieren. Mit der Programmiersprache Dart, also Android Studio oder Visual Studio Code,...
Wenn Sie nach einem Tool suchen, das nur die Dart-Sprache lernt, dann ist DartPad genau das Richtige für Sie. DartPad ist ein Open-Source-Tool, das in jedem modernen Browser ausgeführt werden kann und bereit ist, ohne Installation anderer Erweiterungen zu programmieren.
Der Quellcode von DartPad wird auf GitHub geteilt:
Rufen Sie in Ihrem Browser eine der folgenden Adressen auf:
Die angezeigte Interface DartPad wird standardmäßig für die Dart-Sprache verwendet. Es ist sehr einfach, das linke Fenster ist zum Schreiben von Code, das rechte Fenster druckt die Ausgabe des Programms. Darüber hinaus bietet es auch Beispielbeispiele als Referenz.

2. Unterstützte Bibliotheken

DartPad ist ein Online-Tool. Die unterstützten Bibliotheken sind bereits serverseitig in dieses Tool integriert. Derzeit unterstützt dieses Tool nur wenige grundlegende und beliebte Bibliotheken und unterstützt nicht die Integration anderer externer Bibliotheken. Um praktische Anwendungen zu entwickeln, benötigen Sie sowieso noch eine spezialisierte IDE.
Unterstützte Dart-Bibliotheken:
  • dart:*
Unterstützte grundlegende Flutter-Bibliotheken:
  • flutter
  • dart:ui
Nicht unterstützte Bibliotheken:
Die Liste der unterstützten Bibliotheken kann sich in zukünftigen Versionen von DartPad ändern. Sie können diese Informationen unter dem folgenden Link aktualisieren:

3. Erstellen Sie eine Anwendung Dart Command-line

So erstellen Sie eine Anwendung Dart command-line. Verwenden Sie "New Pad":
  • Klicken Sie auf die Button "New Pad" und bestätigen Sie, dass Sie alle Änderungen im aktuellen Fenster "Pad" verwerfen möchten.
  • Ein Dialogfeld wird geöffnet, wählen Sie das Symbol "Dart" und stellen Sie sicher, dass Sie nicht die Option "HTML" auswählen.
  • Klicken Sie auf die Button "Create", um die Anwendung zu erstellen.
Die Anwendung wird mit einem Beispielcode erstellt. Entfernen Sie diesen Inhalt und ersetzen Sie ihn durch Ihren eigenen Code. Zum Beispiel:
void main() {
  for (var char in 'hello'.split('')) {
    print(char);
  }
}
Klicken Sie auf die Button "Run", um die Anwendung auszuführen und die Ergebnisse im Fenster Console anzuzeigen.

4. Erstellen Sie eine HTML Dart Application

Um eine Anwendung Dart HTML zu erstellen, verwenden Sie "New Pad":
  • Klicken Sie auf die Button "New Pad" und bestätigen Sie, dass Sie alle Änderungen im aktuellen "Pad"-Fenster verwerfen möchten.
  • Ein Dialogfeld wird geöffnet, wählen Sie das Symbol "Dart" und wählen Sie die Option "HTML".
  • Klicken Sie auf die Button "Create", um die Anwendung zu erstellen.
DartPad erstellt eine Anwendung um die Dateien HTML zu verarbeiten:

5. die Anwendung Flutter erstellen

Um eine Flutter-Anwendung zu erstellen, führen Sie als Nächstes die folgenden Schritte aus:
  • Klicken Sie auf die Button "New Pad" und bestätigen Sie, dass Sie alle Änderungen im aktuellen Fenster "Pad" verwerfen möchten.
  • Es öffnet sich ein Dialogfeld, wählen Sie das Symbol "Flutter".
  • Klicken Sie auf die Button "Create", um die Anwendung zu erstellen.
Sehen Sie mehr:

6. DartPart in Website einbetten

Wenn Sie eine Dart-Tutorial-Website haben, können Sie DartPad in Ihre Webseite einbetten. Dadurch können Benutzer Ihr Beispiel direkt auf der Website ausführen. Der folgende Artikel zeigt Ihnen, wie Sie DartPad in eine Website einbetten und an Ihre Nutzung anpassen: