初心者向けのFlutter資料です。 おみくじアプリの作成を行う中でFlutterでの開発について学べます。
<<Flutter入門講座
View Slide
工学部3年生自称Androidエンジニア趣味:刀鑑賞、将棋、プログラミング@bugdog24オキリョウ
1Flutterとは
Flutterとは以下のようなアプリケーションを作るためのツール● Androidアプリ● iOSアプリ(iPhone)● Webページプログラミング言語「Dart」で記述する
Flutterの利点Googleが全力でサポートしているため、廃れることはなさそうGoogle製従来: それぞれのコードが必須Flutter: 1つだけで動くめっちゃ楽
低コスト高品質なものが作れるベンチャーを中心に人気
2Flutter眺めてみる
開発用アプリを立ち上げるこのアイコンを探してダブルクリックする
こいつは何なのかプログラムの編集に使われるアプリ- 読みやすいように色をつけてくれる- 文字列の一括変更ができる- etc...
アプリを起動してみる
プログラムを見てみる
lib/main.dart
大体60行ちょいくらいこれくらいなら読めそう?
まずはmainから
アプリの開始地点アプリを起動すると、mainのかっこの中を上から実行する
アプリの開始地点この文を追加して実行すると・・・
アプリ全体の設定MyApp
アプリ全体の設定この文を追加して実行すると・・・
どういう内容を描写するのか指示この文を追加して実行すると・・・
Webページのタイトルこの文を追加して実行すると・・・
アプリの色セットこの文を追加して実行すると・・・
アプリの表示内容この文を追加して実行すると・・・
好きな色に変えてみるこの文を追加して実行すると・・・
アプリ全体の見た目 MyHomePage
アプリ全体の見た目
状態を持つページを作成している
アプリの本体_MyHomePageState
アプリの本体長いためbuildから見ていく
アプリの見た目を作る
アプリの上の部分を作る
下の文でこうなる
ここが対応
アプリの真ん中部分を作る
中心にものをおく
下の文だとこうなる
縦に要素を並べる
ここの文字を消すと上に
これによって中央寄せになってる
ちなみにRowという要素もあります
この二つの要素で真ん中に表示
指定した文字を画面に出力する
_counterの中身を画面に出力する
対応する文字に色がつく
_counter = 0である
右下の丸いやつ
クリックされた時に実行される内容
クリックして確認してみる
この部分
_counterの値に1を足す
つまり1. クリックする2. _counterが足される3. Textで表示される
長押しの時に出てくる文字
アイコン(適当なものに変えてみると?)
コード読解終了
3Flutter書いてみる
今回はおみくじアプリを書いてみる
一つずつコードを書いてみる
1.タイトルを変更する
MyAppを変更する
2.「おみくじ開始」を出す
3.クリックで文字を大吉に変える
4.クリックでランダムな文字に変える
大吉、中吉、etc…ここからランダムで一つ選ぶようにしたい
リストをシャッフルして、先頭の要素を取得するということ
5.いらない文字列を消す
6.ボタンのアイコンを変更
完成!
講座終了!お疲れさまでした!