[DevFest Singapore] Getting Started with Mobile Development Using Generative AI

This is the slide, "Getting Started with Mobile Development Using Generative AI" at DevFest Singapore 2025. It's an 80-Minute Hands-On Session.
#DevFest #DevFestSG25 #DevFestSingapore2025
#GoogleForDevelopers #GDGSingapore

Transcript

1. Singapore 2025 Kenichi Kambara Principal Evangelist@NTT TechnoCross November 22, 2025 Getting Started with Mobile Development Using Generative AI
 
 - An 80-Minute Hands-On Session -
2. •Mobile App Development •Talks (24 Int’l/100+ Domestic) •Writings (10 Dev/Edu Books) •[Of fi cial] Evangelist at NTT TechnoCross e.g. ChatTX ;Enterprise GenAI services, AI- powered call analysis, smart livestock monitoring •[Private] iplatform.org About me Kenichi Kambara (X:@korodroid)
3. Sekaiphone Pro(Flutter(+Kotlin/Swift)) Behind the Scenes of My Personal Project
4. Agenda & Timeline [80-Minute Session] 📱 🤖 AI & Mobile: Fundamentals & Trends Generative AI Hands-On Workshop Wrap-Up & Takeaways (including Q&A) 💻 📌 10 min 55 min 15 min
5. AI & Mobile: Fundamentals & Trends 1. ɾAccelerating development with Generative AI ɾSimplifying debugging through conversation AI × Mobile — The New Era Begins ɾDevice and OS fragmentation ɾComplex app release workflows 🤖 AI Innovations 📱 Mobile Evolution
6. The Complexity of Mobile Apps Development  • Platform Support iOS Android Cross-platform Device diversity Coding Debugging Testing Refactoring Performance Versioning Review guidelines Metadata Release Accessibility Responsive design Localization Usability • Development Process • App Store Requirements • UI/UX
7. My MotivationɿA lot of things to do…  •Maintaining compatibility for the latest/old OS •Satisfying each App store requirements •Coding / Debugging / Testing •Refactoring / Modernization •etc.
8. My Vision  Generative AI can boost our product release cycle🚀
9. Mobile Fundamentals
10. Popular Cross-Platform frameworks  •Flutter •React Nativ e •Kotlin Multiplatfor m  •.NET MAU I •and others
11. Popular Cross-Platform frameworks  •Flutter •React Nativ e •Kotlin Multiplatfor m  •.NET MAU I •and others
12. About Flutter  A Cross-platform framework for supporting multiple platforms from a common source https://docs. fl utter.dev/
13. (1) Supporting platforms  ref. https://developers.googleblog.com/2021/03/announcing- fl utter-2.html
14. (2) Beautiful UI & High performance  Flutter showcase https:// fl utter.dev/showcase
15. (3) Uses Dart as the programming language  Shares similarities with Java and JavaScript import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( ‘Hello, Flutter’, textDirection: TextDirection.ltr, ), ), ); }
16. Generative AI Fundamentals
17. Evolving the Developer Work fl ow  $IBUCBTFE
    "* 🧠Gemini 🧠ChatGPT 🧠Claude 🧠Perplexity AI "HFOUCBTFE
    "* 🛠Gemini CLI 🛠Claude Code 🛠Cursor 🛠GitHub Copilot Conversational interface for Q&A, guidance, and ideation. Autonomous, tool-using agents that plan, act, and deliver outcomes.
18. Evolving the Developer Work fl ow  $IBUCBTFE
    "* 🧠Gemini 🧠ChatGPT 🧠Claude 🧠Perplexity AI "HFOUCBTFE
    "* 🛠Gemini CLI 🛠Claude Code 🛠Cursor 🛠GitHub Copilot Conversational interface for Q&A, guidance, and ideation. Autonomous, tool-using agents that plan, act, and deliver outcomes.
19. Why We Focus on Chat-based AI in this Workshop?  •Develop through dialogue, not automation •Explore how AI thinks and helps •Learn more compared to Agent-based AI •Quick to start — no setup needed $IBUCBTFE
    "* 💡
    *O
    UIJT
    XPSLTIPQ
    XF`MM
    VTF
    (FNJOJ
    BT
    B
    DPOWFSTBUJPOBM
    DPEJOH
    QBSUOFS 💡
    *O
    UIF
    fi OBM
    QBSU
    *`MM
    BMTP
    DPWFS
    UIF
    UPQJD
    PG
    l"HFOUCBTFE
    "*z
20. Generative AI Hands-On Workshop 2. ɾCreate apps from natural language ɾGenerate UI and logic automatically Learn by building from code generation to testing ɾFix build errors with AI help ɾWrite and simulate widget tests 💻 Code Generation 💻 Debugging & Testing
21. Using Generative AI for App Development  🖥
    (FOFSBUJOH
    $PEF 🔄
    3FGBDUPSJOH
    
    .PEFSOJ[JOH ✍
    8SJUJOH
    5FTU
    $BTFT 🧐
    3FWJFXJOH
    $PEF 🐞
    %FCVHHJOH ⚡
    *NQSPWJOH
    1FSGPSNBODF
22. Work fl ow of this workshop
    
    4UFQ
    $SFBUJOH
    UIF
    #BTF
    "QQ
    
    4UFQ
    "EEJOH
    /FX
    'FBUVSFT 
    
    4UFQ
    %FCVHHJOH
    BOE
    5FTUJOH
    
    4UFQ
    (FUUJOH
    4UBSUFE
23. Step 0. Getting Started
24. Flutter Development Environment  •Web Browser: Cloud •DartPad •IDE: Local •Android Studio •Visual Studio Code •IntelliJ IDEA
25.  Quick Approach (This time, I’ll go with this) •Web Browser: Cloud •DartPad •IDE: Local •Android Studio •Visual Studio Code •IntelliJ IDEA Regular Approach (for experienced devs) Flutter Development Environment
26. DartPad  https://dartpad.dev
27. DartPad: Operation Check  🔧)BOETPO
28.  •Chat-based AI — Collaborative Partner •Gemini 🧠 •How We’ll Use It: •Generate UI and code snippets •Debug and refactor through conversation •Create tests and documentation collaboratively Generative AI Environment
29. Gemini  https://gemini.google.com/
30. Gemini on DartPad  https://dartpad.dev
31. Gemini: Operation Check  Generate a simple Flutter app that displays ‘Hello, Flutter!’ in the center of the screen. 🔧)BOETPO 💬
32. Gemini: Operation Check  🔧)BOETPO
33. Step 1. Creating the Base App
34. The First Recipe with Flutter & Generative AI 
35. First Code Generation  Create code to display an analog clock with Flutter. 🔧)BOETPO 💬
36.  First Code Generation 🔧)BOETPO
37. Step2. Adding New Features
38. Adding New Features  Feature Addition Examples 🎨 Changing the clock's color 🔍 Clock appears too small ⏰ Adding a clock face ⚙ Additional customizations
39. Adding 1st new feature  🔧)BOETPO Change the color of the second hand to blue. 💬
40.  e.g.) I want to change the hour hand to red and the minute hand to yellow. ? 💬 Adding 2nd new feature
41. 💡Clear Instructions are crucial.  🔧)BOETPO Change the color of the hour hand to red and the minute hand to yellow. 💬
42.  Change the clock color to green. 💬 🔧)BOETPO Adding 3rd new feature
43. ⚠ Avoid Vague Instructions.  Sample Output 💡6OEP
    1SPNQU
    FH
    
    3FWFSU
    UIF
    DIBOHFT
    
    6OEP
    UIF
    MBTU
    DIBOHFT
44. Adding 3rd new feature  Change the background color of the clock to green. Do not modify any other elements. 💬 🔧)BOETPO
45. Step3. Debugging and Testing
46. Debugging and Testing  Create a Flutter app with a green “Press me” button centered on the screen. 💬 🔧)BOETPO
47. Debugging  🔧)BOETPO If you don’t have any issues, replace “TextButton” with “FlatButton” manually.
48. 🤖 Let AI Lend a Hand.  🔧)BOETPO
49. Testing 
50. Testing  Write a widget test to verify that the text ‘Pushed’ appears after the button is pressed. 🔧)BOETPO 💬
51. ⚠ Even Precise Prompts Can Lead to Unexpected Results  Possible Output
52. ⚠ Why the Error Occurred?: DartPad Limitations  Packages Currently Supported on DartPad https://github.com/dart-lang/dart-pad/wiki/Package-and-plugin-support • animations • basics • bloc • characters • collection • cross_ fi le • dartz • english_words • equatable • fast_immutable_collections • fl ame • fl ame_ fi re_atlas • fl ame_forge2d • fl ame_splash_screen • fl ame_tiled • fl utter_bloc • fl utter_hooks • fl utter_riverpod • google_fonts • hooks_riverpod • http • intl • meta • path • petitparser • provider • quiver • riverpod • rohd • rohd_vf • rxdart • timezone • vector_math • video_player • yaml • yaml_edit
53. Extra Exercises
54. 🧩 Extra Exercises  Choose one you like👇 1⃣ Enhance the analog clock (make it more stylish or functional) 2⃣ Create a calculator app 3⃣ Create a To-Do list app 4⃣ Create anything you like!
55. 💻 Example Implementations  1⃣ 2⃣ 3⃣
56. 1⃣ Enhance the analog clock  💬 Show the year, month, day, and weekday below the clock. 💬 Add numbers 1 to 12 around the clock face. 💡*NQMFNFOU
    JODSFNFOUBMMZ TU
    1SPNQU OE
    1SPNQU
57.  2⃣ Create a calculator app 💡$POUFYU
    JT
    LFZ 💬 Create a calculator app. 💬 Create a calculator app using Flutter. 1SPNQUT
    GPS
    (FNJOJ
    PO
    %BSU1BE 1SPNQUT
    GPS
    4UBOEBMPOF
    (FNJOJ
58. 3⃣ Create a To-Do list app  💡#F
    TQFDJ fi D
    XJUI
    ZPVS
    TUBDL 💬 Create a To-Do list app. 💬 Use Riverpod for state management. TU
    1SPNQU OE
    1SPNQU
59. 4⃣ Create anything you like!  🚀 Time to Share Your Creations! Did anyone build anything new?✋
60. Wrap-Up & Takeaways 3. AI + Human Continuous Improvement Bringing AI and Human skills together
61. AI Paradigm Shift  From Passive to Active Key Transitions Evolved from waiting for prompts to acting on context •From isolated commands to continuous collaboration •From single- fi le focus to project-wide understanding •From reactive suggestions to proactive improvements
62. “Chat-based AI” vs. “Agent-based AI”  Aspect Chat ‑ based AI Agent ‑ based AI Learning curve Easy to get started; simple chat interface. Higher learning effort; know its abilities and limits. Interaction model Conversation ‑ driven; explicit prompts; manual copy between tools Goal ‑ driven; plan → act → review; orchestrates tools/APIs Project awareness Limited context window; no project ‑ wide understanding Understands codebase & dependencies; workspace indexing Execution capability Suggests code; user applies changes; no direct code manipulation Direct edits, runs tests/builds; multi ‑ step operations across files Context & state Session resets disrupt continuity; weak persistence/ memory Persistent context across sessions; memory & artifacts Delivery workflow Human handoffs; PR/tests/reports done manually Draft PRs, tests, profiling & reports automated; human approval gate
63. Deep Dive into “Agent-based AI”  Plan → Act → Check — context-aware, tool-using, outcome-driven Key Characteristics Context Awareness Multi ‑ step Reasoning Direct Execution Persistent State Understands codebase, dependencies, and developer intent. Plans tasks and executes across fi les/functions. Edits code, runs tests/builds, generates draft PRs. Keeps memory and artifacts across sessions.
64. Use Cases (with Demo)
65. Use Case 1: Creating a Camera App  6TFS
    *OUFSGBDF #VTJOFTT
    -PHJD Camera App
66. Tasks to create a Camera App  "EEJOH
    UIF
    DBNFSB
    QBDLBHF 8SJUJOH
    UIF
    DBNFSB
    MPHJD #VJMEJOH
    UIF
    6*
    GPS
    QSFWJFX
    EJTQMBZ Camera App ʜBOE
    NPSF
67. Use Case 1: Creating a Camera App  Camera App $IBUCBTFE
    "* "HFOUCBTFE
    "*
68. Accelerating with Cursor 
69. Use Case 2: Performance Tuning  'SBNF
    CVJMET
    
    GPS
    
    JUFNT
70. Processing with Claude Code  You are an autonomous code agent in a Flutter repo. Goal: A screen scrolls slowly. Diagnose → improve → verify → open a draft PR. Proceed without approval. Guardrails: - Keep business logic & public APIs unchanged. - Limit edits to the affected screen (e.g., MyHomePage) and minimal helpers. - Keep the diff small and self-explanatory. Plan: - List 3 hypotheses for the slowdown. - Add lightweight measurements ( fi rst-frame builds, per-screen scroll rebuilds) using debug-only logs. - Start measuring immediately. Diagnose: - Run measurements ( fl utter run/test/analyze). - Output key numbers on one line and choose up to 2 approaches with a brief rationale. Act: - Apply a minimal design that reduces fi rst-frame builds and scroll rebuilds while preserving visuals/API. - Show the diff and apply it. Check: - Run analyze/test; report green/red. - Show Before → After numbers on one line each. Draft PR: - Branch: perf/scroll-optimization - Commits: perf(ui)… ; chore(debug) remove counters - Create a draft PR with problem, root cause (numbers), changes, diff size, key metrics, and checks. Start now. If anything fails, propose a fallback and continue. Plan → Diagnose → Act → Check → Draft PR
71. In-Progress Screenshot (Claude Code)  1MBO
    4DPQFE
    BDUJPO
    QMBO $IFDL
    5FTUT
    HFOFSBUFE
    BVUPNBUJDBMMZ
72. Result: Faster scroll, same UI  'SBNF
    CVJMET
    
    ˠ
    d
73. Practical Insights
74. Safe Agent-Based AI  🔧 Permission Scope 🗝 Data & secrets 🛡 Prompt/tool safety 🚧 Execution guardrails 📝 Quality & change control 📊 Cost & Ops Monitoring
75. Evaluating Agent-based AI  Context Understanding Multi-step Processing Iterative Improvement Autonomy Level
76. The Story of Accelerating Release Cycles  $IBUCBTFE
    "* "HFOUCBTFE
    "* “Instruct → execute → con fi rm” remains human-driven: answers, not completion. Releases queue behind human availability. Give a goal → Agent plans → implements → tests → measures → creates a draft PR in an automated loop. Humans focus on approval. 💬 Chat-based AI 🧑💻 Human Work ⚙ CI ✅ Human Review 📝 Draft PR ✅ Approval Gate Plan Act Test Measure Loop
77. AI + Human Collaboration  •Translate quickly •Ensure consistency •Generate Drafts Continuous Learning < > > > AI •Design from Real Experience •Re fi ne Nuance •Review & Improve Human
78. 💡Key Takeaways: 3 Keys to Agent-based AI •Read diffs as data (Small PRs, intent labels) •Gate changes via draft PRs (Draft- fi rst) •Keep Humans on risky edits (Risk-based reviews) 
79. Using Generative AI, we build more and deliver faster 🚀 Conclusion
80. Reference  X: @korodroid
81. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much Feel free to reach out for technical speeches, writing, or other inquiries.