サイトアイコン 【TechGrowUp】

Flutter開発入門1 DartPadの使い方

はじめに

 本記事ではFlutter開発におけるDartPadの説明・使い方を説明します。

DartPadとは

 DartPadは、Webブラウザ上でDartプログラムを記述し、即座に実行できるオンラインツールです。DartやFlutterの開発環境をローカルにインストールする必要がなく、誰でも簡単にDartコードの動作を確認したり、学習を進めたりできます。

DartPadの主な機能

DartPadのメリット

DartPadの使い方

  1. DartPadにアクセス: ブラウザでDartPadにアクセスします。
  2. コードの実行: 「Run」ボタンをクリックして、コードを実行します。結果は右側のパネルに表示されます。
  3. コードを記述: エディタにDartまたはFlutterのコードを入力します。
  4. コードの共有: 「Share」ボタンを使って、共有用のURLを生成し、他の開発者と共有できます。 ※2024/08現在はgistを用いた共有となります。

DartPad実践

 以上までの使い方を実際にやってみようと思います。
 DartPadではFlutter/Dartバージョンを指定出来ますが、今回は「Dart SDK 3.5.0 and Flutter SDK 3.24.0」を利用しています。

  1. ブラウザでDartPadにアクセスします。
  2. デフォルトで以下が記載されていることを確認します。
void main() {
  for (int i = 0; i < 10; i++) {
    print('hello ${i + 1}');
  }
}
  1. コードを以下に変えてみます。
void main() {
  print('hello techgrowth.net!');
}
  1. 「Run」ボタンをクリックして、コードを実行します。「hello techgrowth.net!」と表示されることが確認できました
  2. gist共有手順を参考に、gistページを作成します。このとき、ファイル名をmain.dartにすることに気をつけてください
  3. gistページを作成すると、IDが発行されます。今回は「9b6884dc2a69121edb8806ddf52bd035」が発行されました。
  4. これを「https//dartpad.dev/?id=」の後ろにつけると共有が可能になります。
  5. https://dartpad.dev/?id=9b6884dc2a69121edb8806ddf52bd035 を確認して問題なく表示できることを確認できました。

まとめ

 DartPadは、DartやFlutterを学びたい初心者からプロフェッショナルまで幅広く活用できるツールです。環境構築の手間なく、すぐにDartやFlutterのプログラミングを始められるので、学習やプロトタイピングにぜひ活用してください。

 Flutter開発入門の次の記事はこちらです。

モバイルバージョンを終了