Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter入門講座
Search
bugdog24
March 25, 2023
Programming
0
130
Flutter入門講座
初心者向けのFlutter資料です。
おみくじアプリの作成を行う中でFlutterでの開発について学べます。
bugdog24
March 25, 2023
Tweet
Share
More Decks by bugdog24
See All by bugdog24
KSPで自動生成コードを作る
bugdog24
0
120
Androidに自作AIをのっけたい
bugdog24
0
110
Other Decks in Programming
See All in Programming
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Advanced App Shrinking Techniques
cbeyls
2
150
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
AHC035解説
terryu16
0
710
Jetpack for KMP
fornewid
1
290
CSC307 Lecture 06
javiergs
PRO
0
360
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Featured
See All Featured
Producing Creativity
orderedlist
PRO
340
39k
Six Lessons from altMBA
skipperchong
24
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Gamification - CAS2011
davidbonilla
78
4.9k
Building Applications with DynamoDB
mza
89
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
The Cult of Friendly URLs
andyhume
75
5.9k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Designing for humans not robots
tammielis
247
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
A designer walks into a library…
pauljervisheath
201
24k
Transcript
<< Flutter 入門講座
工学部3年生 自称Androidエンジニア 趣味:刀鑑賞、将棋、プログラミング @bugdog24 オキリョウ
1 Flutterとは
Flutterとは 以下のようなアプリケーションを作るためのツール • Androidアプリ • iOSアプリ(iPhone) • Webページ プログラミング言語「Dart」で記述する
Flutterの利点 Googleが全力でサポートしてい るため、廃れることはなさそう Google製 従来: それぞれのコードが必須 Flutter: 1つだけで動く めっちゃ楽
低コスト高品質なものが作れる ベンチャーを中心に人気
2 Flutter 眺めてみる
開発用アプリを立ち上げる このアイコンを探してダブルクリックする
こいつは何なのか プログラムの編集に使われるアプリ - 読みやすいように色をつけてくれる - 文字列の一括変更ができる - etc...
None
None
None
None
None
None
アプリを起動してみる
None
None
None
None
プログラムを見てみる
lib/main.dart
None
大体60行ちょいくらい これくらいなら読めそう?
まずはmainから
アプリの開始地点 アプリを起動すると、mainのかっこの中を上 から実行する
アプリの開始地点 この文を追加して実行すると・・・
アプリ全体の設定 MyApp
アプリ全体の設定 この文を追加して実行すると・・・
どういう内容を描写するのか指示 この文を追加して実行すると・・・
Webページのタイトル この文を追加して実行すると・・・
アプリの色セット この文を追加して実行すると・・・
アプリの表示内容 この文を追加して実行すると・・・
好きな色に変えてみる この文を追加して実行すると・・・
アプリ全体の見た目 MyHomePage
アプリ全体の見た目
状態を持つページを作成している
アプリの本体 _MyHomePageState
アプリの本体 長いため buildから見ていく
アプリの見た目を作る
アプリの見た目を作る
アプリの上の部分を作る
下の文でこうなる
ここが対応
アプリの真ん中部分を作る
中心にものをおく
下の文だとこうなる
縦に要素を並べる
下の文だとこうなる
ここの文字を消すと上に
これによって中央寄せになってる
ちなみにRowという要素も あります
この二つの要素で真ん中に表示
指定した文字を画面に出力する
None
_counterの中身を画面に出力する
対応する文字に色がつく
_counter = 0である
None
右下の丸いやつ
右下の丸いやつ
クリックされた時に実行される内容
クリックして確認してみる
この部分
_counterの値に1を足す
つまり 1. クリックする 2. _counterが足される 3. Textで表示される
長押しの時に出てくる文字
アイコン(適当なものに変えてみると?)
コード読解終了
3 Flutter 書いてみる
今回はおみくじアプリを 書いてみる
None
一つずつコードを書いてみる
1.タイトルを変更する
MyAppを変更する
MyAppを変更する
2.「おみくじ開始」を出す
None
None
None
None
None
3.クリックで文字を大吉に 変える
None
4.クリックでランダムな 文字に変える
大吉、中吉、etc… ここからランダムで一つ選ぶ ようにしたい
None
None
リストをシャッフルして、 先頭の要素を取得する ということ
5.いらない文字列を消す
None
6.ボタンのアイコンを変更
None
None
完成!
講座終了! お疲れさまでした!