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ハンズオン 5
Search
Aya Ebata
September 16, 2024
Technology
0
51
Flutterハンズオン 5
Aya Ebata
September 16, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
JEP 480: Structured Concurrency
aya_ebata
0
240
Flutterハンズオン 4
aya_ebata
0
92
Flutterハンズオン 3
aya_ebata
0
51
Flutterハンズオン 2
aya_ebata
0
59
Flutterハンズオン 1
aya_ebata
0
90
あたらしい もじれつの かきかた
aya_ebata
0
100
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
750
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
750
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
700
Other Decks in Technology
See All in Technology
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
610
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
150
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
130
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
100
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
660
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
180
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
620
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
320
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fireside Chat
paigeccino
37
3.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Code Review Best Practice
trishagee
69
19k
Designing for Performance
lara
610
69k
Scaling GitHub
holman
461
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
Flutterハンズオン 5 2024/09/17 社内勉強会 えばた あや
今日話すこと 1. Webで実行 2. パッケージ管理 3. 画面遷移 4. 状態管理 5.
Widget Inspector 6. 実機でデバッグ(Android) 7. ノーコードツールの紹介 8. 自己勉強用資料の紹介
1. Webで実行
Webで実行 1. 使用するデバイスをChromeに変更する
Webで実行 2. 実行するとChromeが立ち上がる
2. パッケージ管理
パッケージ管理 1. パッケージをpub.devから検索する - https://pub.dev/ - 今回は例としてgoogle_fontsを入れる
パッケージ管理 2. Installingのタブへ移動するとインストール方法があるので確認する
パッケージ管理 3-1. コマンドラインからパッケージを追加する $ flutter pub add google_fonts
パッケージ管理 3-2. パッケージ管理ファイルpubspec.yamlから追加する 1. pubspec.yamlのdependenciesに以下のように追加 dependencies: google_fonts: ^6.2.1 2. flutter
pub getを実行 (VSCodeからだと右上のボタンを実行)
パッケージ管理 4. ReadmeやExampleのタブで使い方を確認する
パッケージ管理 5. 以下を適当なアプリに入れて反映されていることを確認する import 'package:google_fonts/google_fonts.dart'; Text( 'This is Google Fonts',
style: GoogleFonts.nerkoOne(), ),
パッケージ管理 元ネタのページ https://docs.flutter.dev/packages-and-plugins/using-packages
3. 画面遷移
画面遷移 - Flutterの画面遷移はNavigatorとRouterがある - Navigator - 小規模なアプリケーション向き - Router -
複雑なディープリンクとナビゲーションの要件がある アプリケーション向き - Web上で実行されているとき、アドレスバーとの同期を維持する ためにも使用
Navigator - Navigator.of().push()で画面遷移ができる ElevatedButton( child: const Text('Navigator'), onPressed: () {
Navigator.of(context).push( MaterialPageRoute(builder: (context) => const Placeholder()), ); }, ),
Router 1. Routerを使うためのルーティングパッケージを追加する - go_router、auto_route、beamerなど - 今回は公式の説明で使用されていたgo_routerで説明します 2. go_routerを追加する -
https://pub.dev/packages/go_router
Router 3. router用の変数を用意 final _router = GoRouter( routes: [ GoRoute(
path: '/', builder: (context, state) => const MyHomePage(title: 'Flutter Demo Home Page'), ), ], );
Router 4. MaterialAppをMaterialApp.routerに変更 MaterialApp.router( // ... );
Router 5. MaterialApp.router()の引数のhomeを削除し、routerConfigを追加 - ここまででRouterのベースが作成完了 MaterialApp.router( // ... home: const
MyHomePage(title: 'Flutter Demo Home Page'), routerConfig: _router, );
Router 6. 画面遷移のためのルーティングを追加 - _router変数のroutesに以下を追加 GoRoute( path: '/placeholder', builder: (context,
state) => const Placeholder(), ),
Router 7. 先ほど作成したElevatedButtonのonPressedを以下に変更 context.go('/placeholder');
画面遷移 元ネタのページ https://docs.flutter.dev/ui/navigation
4. 状態管理
状態管理 - 前回のハンズオンではStatefulWidgetを使って状態管理をしていた が、状態管理パッケージを導入して状態管理をしていくこともできる - 状態管理パッケージの一例 - Provider https://pub.dev/packages/provider -
GetIt https://pub.dev/packages/get_it - Riverpod https://pub.dev/packages/riverpod - Bloc https://pub.dev/packages/bloc - Rxdart https://pub.dev/packages/rxdart
状態管理 - StatefulWidgetを継承したWidgetにて状態管理をした場合、 そのWidgetで状態管理された値やメソッドを使用したいWidgetまで 渡していく必要がある - そのWidgetにたどり着くまでの全てのWidgetで値やメソッドを 持つ必要が出てきてしまう - それによって実際に再描画させたいWidgetまでの受け渡しに
使用したWidgetにも更新がかかる
状態管理 - 状態管理されている値が変更されると、3つのWidgetに再描画が かかる
状態管理 - 状態管理パッケージを使うことで状態管理がしやすくなる - どこからでも状態管理された値やメソッドを取得できるようになる - 再描画したいWidgetだけを更新できる
状態管理 参考資料 https://docs.flutter.dev/data-and-backend/state-mgmt/options
5. Widget Inspector
Widget Inspector - Widget Inspectorとは、既存のレイアウトを細かく確認したり、 レイアウトに問題がある場合に調査したりすることができるツール - Widget Tree: Widgetの階層を可視化する
- Layout Explorer: テキスト、ボタン、トグルなどの管理から、 中央揃え、パディング、行、列などのレイアウトまで確認できる
Widget Inspector - VSCodeからはアプリ起動後、以下の虫眼鏡ボタンをクリックすると 起動できる
Widget Inspector
Widget Inspector - Widget Tree
Widget Inspector - Layout Explorer
Widget Inspector - Select Widget Modeを使うと実際のアプリで表示されているWidget から詳細を確認できる
Widget Inspector - こんな感じに実際の アプリで選択して確認 できる
Widget Inspector 元ネタのページ https://docs.flutter.dev/tools/devtools/inspector
6. 実機でデバッグ(Android)
実機でデバッグ(Android) 1. Android端末にて「開発者向けオプション」を有効にする ※ 端末によってやり方が違うのでやり方は検索してください 2. 開発者向けオプションの画面でUSBデバッグをONにする 3. USBでPCと接続する 4.
USBデバッグを許可するか聞かれた場合は許可をする
実機でデバッグ(Android) 5. VSCodeのデバイス選択で実機を選択する
実機でデバッグ(Android) 6. 実行をし、実機でアプリが表示されていることを確認する
APKを作成して実機で確認する 1. 以下のコマンドでAPKを作成する $ flutter build apk 2. プロジェクト配下の以下のディレクトリにAPKが作成される ./build/app/outputs/flutter-apk
3. 実機でインストールして確認する
7. ノーコードツールの紹介
ノーコードツールの紹介 Flutter Flow https://flutterflow.io/ Flutter Studio https://flutterstudio.app/
8. 自己勉強用資料の紹介
自己勉強用資料の紹介 Googleが出しているCodelab https://codelabs.developers.google.com/codelabs/flutter-codelab-fi rst?hl=ja#0 Flutter公式のCodelab一覧 https://docs.flutter.dev/codelabs
まとめ - Flutterの基礎に加えて必要なパッケージ管理、画面遷移、状態管理 などの小技について学んだ - 自分で簡単なアプリを作成して、学んだことを実践してみるとさらに 理解が深まるかなと思います