📌

Flutter(Dart言語)の事始め(3/3)

に公開
Flutter
Dart
tech

初めに

前回からの続きです。
ここではFlutterの開発方法に関して記載していきます。

メニュー

  1. Flutterとは
  2. Flutterのインストール
  3. Flutterの開発手法 ←ここ

Flutterの開発手法

ここからプロジェクトの立ち上げ及び、開発の進め方をお伝えしていきます。

Projectの立ち上げ

Visual Studio CodeとAndroid Studioで違うため注意してください。
ここではVisual Studio Codeの開発方法を記載していきます。

  1. F1キーを押下し、コマンドを入力できるようにする
  2. Flutter: New Projectを選択する
  3. Project作成先のフォルダを選択する
  4. Project名を入力する
  5. Enterキーを押下する

プロジェクトの立ち上げもあっという間に終わります。
初めてプロジェクトが立ち上がるとサンプルプログラムが表示されます。

Componentの作成

Flutterでは画面を構成するためのクラス名をWidget(ウィジェット)としており、
WidgetをHTMLのように親子構造にして画面を作成していきます。

Component(コンポーネント)はWidgetを組み合わせた画面パーツと思ってください。

Flutterの開発は、基本的にこのComponentを量産及び配置して画面を作成していきます。
直置きすることもありますが、画面自体もComponentにすることがあり、人それぞれです。
Componentは以下のクラスを継承して作成されます。

  • StatefulWidget
    • 状態(State)を別途保持し画面の状態を切り替えやすくするためのWidget
    • Stateクラスを継承したクラスも一緒に作る必要があります
  • StatelessWidget
    • 状態はクラス辞退で保持せず、入れてこられた内容だけで表示を行うためのWidget

Widgetの種類

既存から用意されているWidgetもあります。
例えば初めに作成されたサンプルコードのTextWidgetがいい例になります。

例として以下のWidgetがあります。

  • Container
    • すべての原型ともいえるWidgetです。HTMLで言うところのdevタグ並みに使い勝手がいいです
  • ColoredBox
    • Containerから背景色に関する部分だけを取り除いたようなWIdgetです
  • SizedBox
    • Containerからサイズに関する部分だけを取り除いたようなWidgetです
  • MaterialButton
    • 押下時にEventを発火するためのWIdgetです
    • 上記以外にもTextButtonなど様々なButtonがあります
  • Column
    • Widgetを縦に並べるWidgetです
  • Row
    • Widgetを横に並べるWidgetです

用意されているWidgetにもWidget Catalogと呼ばれるものがあります。

Componentを作成する際にはこんなWidgetがあるんだと調べてみるのもいいかもしれません。

パッケージ

Flutter及びDart言語には専用のパッケージシステムが初めから内蔵されています。

Flutter PubやDart Pubで検索するとpub.devと呼ばれるサイトに行きつくことができます。

このサイトではいろんな方がFlutter及びDart言語を利用したパッケージを公開しており、かゆいところに手が届くコードを用意してくれています。

私個人的にはflutter_genと呼ばれるパッケージをよく使います。

また、自身のgitにパッケージを置くと、そのパッケージもパッケージマネージャーで管理することが可能になります。

何かと便利ですので、気になったら調べてみるといいかもしれません。

終わりに

ご視聴ありがとうございました。
私個人としてはDart言語もFlutterフレームワークも様々な言語に似た記述を行うため、個人的には取っつきやすく非常に開発は容易に感じました。

  • Dartの記述方法はJavaとPythonに似ており、Pythonのようにカプセル化を行い、Javaのようにクラスと型宣言等を行うイメージです
  • Flutterの画面構成は先にも記載した通りHTML構造に似ており、Java言語でHTMLを作成する感覚で構築できるため本当に

Flutterの開発になれるとおそらくiosやandroidの開発、簡単なDesktopの開発もFlutterでいいやになってしまうかもしれません...(自分は半分浸かっています)
覚えておくと楽ではあるので、皆さんもぜひご活用してみてください。

改めて
他の有権者から見て何だこりゃと思ったところがあればコメントお願いします。
ちょっと記憶を探りながら記載している部分もあるためあいまいになっている部分が多くありそうですので。

Discussion