mery's Notes

めりーがプログラミングしたりします。

MENU

はじめてのふらったー!!

前回の記事

mery-kirokudayo.hateblo.jp

目次

茶番(開発者インタビュー風)

インタビュアー(以降:い):インタビュアーです。本日はよろしくお願いいたします。

めりー(以降:め):こちらこそよろしくお願いいたします。

い:今回はなんでFlutterでアプリ開発を行おうと思ったのですか?

め:はい、やはり最近はFlutterじゃないですか。やっぱ、どこでも聞くっていうか。開発者なら知っておかないといけないじゃないですか。Flutterって。あと、やっぱ、響きがいいですよね。今風っていうか。

い:(なんか、こいつ浅いこといってんなぁ・・・)そ、そうなんですね。じゃあ、今回は、どんなアプリを作ったんですか?

め:はい。ランダムな数字を表示してその数字を入力するやつですね。

い:(ん?どこかで聞いたようなアプリだな・・・)これをAndroidに移植した感じですかね・・・?

mery-kirokudayo.hateblo.jp

め:概ねそうですね。

い:「概ね」ということは、アプリの機能が進化したんですか!?!?

め:いえ、退化しましたね。

い:?????????退化ですか??????

め:はい、退化ですね。

い:・・・

め:・・・

い:え、なんで全ての機能移植しなかったんですか?

め:めんどうだったからですね。

い:ええぇ・・・

め:・・・

い:・・・

め:では、本日はありがとうございました。

い:はい、ありがとうございました。

(終わり)

本編開始

こんにちは。めりーです。

今回は、Flutterでアプリ作成しました。

備忘録感覚で記事を残していこうと思います。

Flutterの公式ドキュメント

https://docs.flutter.dev/

YOUは何でFlutterを?

それは4月のある日のこと。

スマホのホーム画面を左にスワイプしたら出てくるあれ(Discover)に以下の記事が出てきました。

qiita.com

ふ、Flutterだと、・・・!!聞いたことがない・・・
とりあえずインストールしてみるか、ということで速攻インストールしました。
フッ軽ですね。

なお、インストールしただけでモチベーションは落ちた模様

どんなアプリを作ったの?

じゃあ、実際にどんなアプリ作ったのかスクショを張っておきます。

アプリの画面です。

このアプリの機能的なものは以下のものです。

・ボタンを押した際の画面遷移
・条件分岐での画面遷移
・乱数を使う

Flutterってどんな感じでアプリ開発するの?

私はPythonで競プロ触ったことしかなかったので、 Flutterを初めて触ったとき

まず何をすればいいんだ・・・

と思ったので簡単に開発の流れを。

Flutterでは、画面を作っていきます。

Dart言語で画面を作っていき、画面遷移などのシステム的な動きもDart言語で作っていく感じです。

普通にAndroid StudioJavaで作ったときは、XMLで画面を作って、Javaで裏側を作る感じでした。
Javaで作ったときのやつ:
mery-kirokudayo.hateblo.jp

しかし、グラフィカルにパーツを置くだけで画面を作成できたXMLとは違い、Flutterでは完全にDart言語で画面を作る必要がありました。

その点が結構ハードルが高かった気がします。

Q.画面ってどうやって作るの?

A.次のように作ります。

Columun

  Container1
    Widget1

  Container2
    Widget2

さすがにこれだけでは味気ないので、もうちょっと詳しく。

Flutterの画面は様々な要素(Widget)を並べて作ります。

例:
・Text
・Button  など

そして、そのWidgetを格納するための箱がコンテナ(Container)です。
コンテナの中にウィジェットを格納して、ウィジェットの位置を調整します。

例:
コンテナ1の中にButtonを格納しました。←この時点でButtonは画面の最上部の端っこに存在するだけ。
コンテナのパラメータを変更することでButtonを中央に表示させたり、中央下部に表示させることができます。

しかし!!!なんと!!!
1つのコンテナの中に1つのウィジェットしか入らないのです・・・!!!!

じゃあ、2つ以上のウィジェット(Button2つとか)を配置したい場合はどのようにすればよいのでしょうか????

そこで登場するのが、RowColumunStackです。
この3つは基本的に使い方が同じです。
ウィジェットを横に並べたければRow、縦に並べたければColumun、重ねたければStackを使います。

Columunを使って作った画面がこれです。

Columunでテキストとボタンを縦に並べた

応用として、RowでColumunを2つ並べることとかもできます。

参考ページ:

Layouts in Flutter | Flutter

感想とか

画面作るのめっちゃ時間かかって疲れました、まる

Flutterに触れたことで、Dart言語どんな感じなんだろーとか、こんな感じで開発するんだーっていう雰囲気がわかってよかったです。

Dartについて調べたときにJavaScriptに似てる!って情報が結構あったので、webでもの作るのってこんな大変なんだ・・・って思いました。
あと、調べてもあんまり日本語のDartの情報とかが出てこなかったので途中で疲れて飽きました。
とりあえず形にしたからヨシ。

次回はDiscordのbot作ってみるつもりです。では!