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
150
Flutter入門講座
初心者向けのFlutter資料です。
おみくじアプリの作成を行う中でFlutterでの開発について学べます。
bugdog24
March 25, 2023
Tweet
Share
More Decks by bugdog24
See All by bugdog24
KSPで自動生成コードを作る
bugdog24
0
190
Androidに自作AIをのっけたい
bugdog24
0
130
Other Decks in Programming
See All in Programming
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
CSC305 Lecture 05
javiergs
PRO
0
210
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
110
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
110
CSC509 Lecture 04
javiergs
PRO
0
300
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
dynamic!
moro
10
7.4k
CSC509 Lecture 06
javiergs
PRO
0
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
300
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
A Tale of Four Properties
chriscoyier
161
23k
Speed Design
sergeychernyshev
32
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Documentation Writing (for coders)
carmenintech
75
5k
How GitHub (no longer) Works
holman
315
140k
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
完成!
講座終了! お疲れさまでした!