Flutter開発入門1 DartPadの使い方

techgrowup — Thu, 22 Aug 2024 03:17:41 +0000

はじめに

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

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

リアルタイムでのコード実行: DartPadは、入力したDartコードを即座に実行し、結果を確認できるインタラクティブな環境を提供します。コードの実行結果は、ブラウザ上でリアルタイムに確認できます。
Flutterのサポート: DartPadはFlutterのコードもサポートしており、UIを含むFlutterアプリケーションをその場で試すことが可能です。特に、Flutterの学習やプロトタイピングに便利です。
豊富なコードサンプル: DartPadには、さまざまなDartやFlutterのコードサンプルが用意されており、すぐに試すことができます。これにより、学習のスピードを上げることができるでしょう。
コードの共有機能: DartPadで作成したコードは、URLを生成して簡単に共有することが可能です。これにより、チームメンバーや他の開発者とコードを効率的に共有し、フィードバックを得ることができます。

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

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

void main() {
  for (int i = 0; i < 10; i++) {
    print('hello ${i + 1}');
  }
}

void main() {
  print('hello techgrowth.net！');
}

「Run」ボタンをクリックして、コードを実行します。「hello techgrowth.net！」と表示されることが確認できました
gist共有手順を参考に、gistページを作成します。このとき、ファイル名をmain.dartにすることに気をつけてください
gistページを作成すると、IDが発行されます。今回は「9b6884dc2a69121edb8806ddf52bd035」が発行されました。
これを「https//dartpad.dev/?id=」の後ろにつけると共有が可能になります。
https://dartpad.dev/?id=9b6884dc2a69121edb8806ddf52bd035 を確認して問題なく表示できることを確認できました。

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

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