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
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
CSC305 Lecture 09
javiergs
PRO
0
310
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
250
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Developer Joy - The New Paradigm
hollycummins
1
350
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Bash Introduction
62gerente
615
210k
For a Future-Friendly Web
brad_frost
180
10k
RailsConf 2023
tenderlove
30
1.3k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Language of Interfaces
destraynor
162
25k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Writing Fast Ruby
sferik
629
62k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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
完成!
講座終了! お疲れさまでした!