はじめてのふらったー!!
前回の記事
目次
茶番(開発者インタビュー風)
インタビュアー(以降:い):インタビュアーです。本日はよろしくお願いいたします。
めりー(以降:め):こちらこそよろしくお願いいたします。
い:今回はなんでFlutterでアプリ開発を行おうと思ったのですか?
め:はい、やはり最近はFlutterじゃないですか。やっぱ、どこでも聞くっていうか。開発者なら知っておかないといけないじゃないですか。Flutterって。あと、やっぱ、響きがいいですよね。今風っていうか。
い:(なんか、こいつ浅いこといってんなぁ・・・)そ、そうなんですね。じゃあ、今回は、どんなアプリを作ったんですか?
め:はい。ランダムな数字を表示してその数字を入力するやつですね。
い:(ん?どこかで聞いたようなアプリだな・・・)これをAndroidに移植した感じですかね・・・?
め:概ねそうですね。
い:「概ね」ということは、アプリの機能が進化したんですか!?!?
め:いえ、退化しましたね。
い:?????????退化ですか??????
め:はい、退化ですね。
い:・・・
め:・・・
い:え、なんで全ての機能移植しなかったんですか?
め:めんどうだったからですね。
い:ええぇ・・・
め:・・・
い:・・・
め:では、本日はありがとうございました。
い:はい、ありがとうございました。
(終わり)
本編開始
こんにちは。めりーです。
今回は、Flutterでアプリ作成しました。
備忘録感覚で記事を残していこうと思います。
Flutterの公式ドキュメント
YOUは何でFlutterを?
それは4月のある日のこと。
スマホのホーム画面を左にスワイプしたら出てくるあれ(Discover)に以下の記事が出てきました。
ふ、Flutterだと、・・・!!聞いたことがない・・・
とりあえずインストールしてみるか、ということで速攻インストールしました。
フッ軽ですね。
なお、インストールしただけでモチベーションは落ちた模様
どんなアプリを作ったの?
じゃあ、実際にどんなアプリ作ったのかスクショを張っておきます。
このアプリの機能的なものは以下のものです。
・ボタンを押した際の画面遷移
・条件分岐での画面遷移
・乱数を使う
Flutterってどんな感じでアプリ開発するの?
私はPythonで競プロ触ったことしかなかったので、 Flutterを初めて触ったとき、
まず何をすればいいんだ・・・
と思ったので簡単に開発の流れを。
Flutterでは、画面を作っていきます。
Dart言語で画面を作っていき、画面遷移などのシステム的な動きもDart言語で作っていく感じです。
普通にAndroid StudioでJavaで作ったときは、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つとか)を配置したい場合はどのようにすればよいのでしょうか????
そこで登場するのが、Row、Columun、Stackです。
この3つは基本的に使い方が同じです。
ウィジェットを横に並べたければRow、縦に並べたければColumun、重ねたければStackを使います。
Columunを使って作った画面がこれです。
応用として、RowでColumunを2つ並べることとかもできます。
参考ページ:
感想とか
画面作るのめっちゃ時間かかって疲れました、まる
Flutterに触れたことで、Dart言語どんな感じなんだろーとか、こんな感じで開発するんだーっていう雰囲気がわかってよかったです。
Dartについて調べたときにJavaScriptに似てる!って情報が結構あったので、webでもの作るのってこんな大変なんだ・・・って思いました。
あと、調べてもあんまり日本語のDartの情報とかが出てこなかったので途中で疲れて飽きました。
とりあえず形にしたからヨシ。
次回はDiscordのbot作ってみるつもりです。では!