Accelerating Flutter App
Development
Using Generative AI
Tokyo
Kenichi Kambara
Principal Evangelist@NTT TechnoCross
November 30, 2024
Slide 2
Slide 2 text
•Mobile App Development
•Speeches (e.g. 19 Int’l/100+ Domestic)
•Writings (e.g. 10 Dev/Edu Books)
•[Official] Evangelist at NTT TechnoCross
•[Private] iplatform.org
About me
Kenichi Kambara (X:@korodroid)
Slide 3
Slide 3 text
Generative AI@AI Heroes 2024
Recent Activities (Overseas)
Generative AI@Method Conference 2024 Flutter&AR@DevFest Atlanta 2024
Flutter&Globalize@DevFest Milano 2024
Slide 4
Slide 4 text
Using Generative AI for App Development
Code Generation
Refactoring & Modernization
Test Case Generation
Code Review
Debugging
Performance Improvement
Slide 5
Slide 5 text
1st Try: Code Generation with Generative AI
Code Generation
Refactoring & Modernization
Test Case Generation
Code Review
Debugging
Performance Improvement
Slide 6
Slide 6 text
Generative AI (for Accelerating Development)
Automate / Assist in code generation.
Gemini
ChatGPT
Claude
Slide 7
Slide 7 text
The First Recipe with Flutter & Generative AI
Slide 8
Slide 8 text
Workflow of Flutter App Dev Using Generative AI
Step1. Generating the base code
Step2. Modifying the app
Step3. Continue step by step with similar procedures
Just an example
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Step 1: Generating the Base Code
Slide 11
Slide 11 text
Step 1: Generating the Base Code
Slide 12
Slide 12 text
ChatGPT
Gemini Claude
Step 1: Generating the Base Code
Slide 13
Slide 13 text
Step 2: Modifying Your App
Some Issues…
•Changing the clock's color
•Clock appears too small
•Adding a clock face
•More customizations…
Slide 14
Slide 14 text
e.g. Changing the clock's background color
Slide 15
Slide 15 text
e.g. Clock appears too small
Slide 16
Slide 16 text
e.g. Clock appears too small
Slide 17
Slide 17 text
Step3. Continue Modifications Step by Step
Additional features:
•Changing the color of the second
hand
•Adding numbers (1-12)
•Adding a mark at 12 o’clock
Slide 18
Slide 18 text
2nd Try: Debugging with Generative AI
Code Generation
Refactoring & Modernization
Test Case Generation
Code Review
Debugging
Performance Improvement
Slide 19
Slide 19 text
Debug: Facing a Build Error
Slide 20
Slide 20 text
Asking Generative AI: Prompt Example
Slide 21
Slide 21 text
Context-Aware Responses: Simplified Prompts
Slide 22
Slide 22 text
Solution by Generative AI
Slide 23
Slide 23 text
Debug: Build Error Resolved
Slide 24
Slide 24 text
3rd Try: Code Review with Generative AI
Code Generation
Refactoring & Modernization
Test Case Generation
Code Review
Debugging
Performance Improvement
Slide 25
Slide 25 text
Bad Code Example
Slide 26
Slide 26 text
Asking Generative AI: Prompt Example
Slide 27
Slide 27 text
Solution by Generative AI
Slide 28
Slide 28 text
Utilizing generative AI as a tool🙌
Speeds up App development!🚀
Conclusion
Slide 29
Slide 29 text
Feel free to reach out if you have any requests,
whether for technical speeches, writing, or anything else.
Facebook: http://fb.com/kanbara.kenichi
X: @korodroid
LinkedIn: http://www.linkedin.com/in/korodroid
Thank you so much