DevCoach 198: Maching Learning dalam Flutter: Bikin Aplikasi Kamu Makin Canggih dengan AI!

Tertarik membuat aplikasi Flutter yang lebih pintar dan interaktif?

Yuk, ikuti sesi seru ini dan temukan bagaimana AI bisa langsung diintegrasikan ke dalam aplikasi yang kamu bangun! Kita akan kupas tuntas bagaimana AI dan Flutter bisa saling melengkapi, mengenal teknologi AI di Flutter, serta melihat showcase penerapan AI secara langsung.

Cocok banget buat kamu yang ingin naik level jadi developer masa depan. Jangan lewatkan kesempatan langka ini untuk eksplorasi AI di dunia Flutter!

Transcript

1. Machine Learning dalam Flutter Bikin Aplikasi Kamu Makin Canggih dengan AI Flutter
2. • Professor, Institut STTS • Dicoding Academy Advisor and Instructor • AI Engineer, Yapos ERP • Head of Department: Diploma of Information Systems & Bachelor of Professional Informatics Program Institut STTS • Google Developer Groups Surabaya and Flutter Surabaya Founder • Google Developer Experts Machine Learning and Cloud Champion Innovator AI / ML • Google Dev Library Contributor • AI ML Surabaya Co-Lead • Nvidia Deep Learning Institute Certified Instructor • Woman Ambassador IEEE IES • Bangkit, Laskar AI, Fastcampus Instructor Esther Irawati Setiawan Flutter
3. Flutter
4. Flutter
5. LOADING… Flutter
6. AI Chatbot & Flutter Artificial Intelligence AI has changed the way we interact with technology. One of the interesting innovations in the world of AI is chatbots. A chatbot is a computer program designed to communicate with humans via text or voice messages. One chatbot API that can be used is the Google AI Studio. Flutter, is known as a popular UI application development framework. With flutter, we can create multiplatform applications. allows us to build AI chatbot applications with an attractive and responsive appearance. Flutter
7. Why Should We use Flutter ? Multiplatform programming Android, Desktop, Web) Flutter
8. Why Should We use Flutter ? Flutter Hot Reload Big Community Google Support Open Source Rich and attractive widgets
9. What is Flutter? A SDK that makes building high-performing, modern and beautiful apps easy Works for both Android and iOS Flutter An open-source toolkit, developed by Google 100+ contributions from the open source community
10. What is Great About Flutter? Design-oriented Development Flow Flutter Developer Experience Performance
11. Running at 60 fps, user interfaces created with Flutter perform far better than those created with other cross-platform development frameworks. Learning Path] “ ˮ
12. Who is Flutter For? Designers • that care about a brand-driven experience on Android and iOS Prototypers • get a high-fidelity and fast way to build working prototypes. Developers • benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences. Flutter
13. Diagram The Layout Flutter
14. Flutter Diagram The Layout • Look for rows and columns • Is there a grid? • Any overlapping elements? • Do we need tabs? • Padding, alignment or borders needed?
15. Designing Bottom Up Flutter
16. HTML / CSS Analog in Flutter <div class="greybox">Lorem ipsum</div> .greybox { background-color: #e0e0e0; width: 320px; height: 240px; font: 900 24px Georgia; } var container = Container( child: Text( "Lorem ipsum", style: TextStyle( fontSize: 24.0, fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ), width: 320.0, height: 240.0, color: Colors.grey[300], ); Flutter HTML/CSS Flutter
17. Efficient Tooling $ flutter doctor • Checks your environment and displays a report to the terminal window $ flutter upgrade • Updates both the Flutter SDK and your packages $ flutter packages get • Checks your environment and displays a report to the terminal window Flutter
18. Efficient Tooling $ flutter packages upgrade • Will retrieve the highest available version of the package $ flutter format • Automatically formats your code according to the Flutter-style $ flutter analyse • Will retrieve the highest available version of the package Flutter
19. Hot Reload • Injecting updated source code files into the running Dart VM • Stateful: App state is retained after a reload. • Quickly iterate on a screen deeply nested in your app Flutter
20. Flutter
21. Dart Observatory • Statement-level single-stepping debugger and profiler • Automatically running when you start your app using flutter run • See which lines of code have executed • Check out memory allocations • Debug memory leaks & fragmentation Flutter
22. Great Looking and Fast Widget Flutter
23. Great Looking and Fast Widget Flutter
24. Google I/O 2025 Flutter
25. Flutter
26. Flutter
27. Flutter
28. Flutter
29. Flutter
30. Flutter
31. Flutter
32. Flutter
33. Flutter
34. Flutter
35. Quiz #1 DevCoach 198 Flutter
36. Manakah aplikasi mobile yang dibangun dengan Flutter? Opsi lebih dari satu. Quiz #1 DevCoach 198 a. Google Earth b. Google Cloud c. Nubank d. NotebookLM Flutter
37. Everything is a Widget Flutter
38. Goodbye, global layout system Local layouts: Every Widget defines itʼs own layout. No need to tell the parent that itʼs children are supposed to be centered. Flutter new Center( child: new Text('Centered Text', style: textStyle), )
39. Customizing and Extending Widget • Flutterʼs Widget system was designed to be easily customizable • Composition: Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets Flutter class FilledButton extends StatelessWidget { ... }
40. Each layer builds upon the previous layer Flutter
41. Platform Channels Using platform channels allows for receiving method calls and sending back results Flutter
42. Example: Retrieving the battery level Flutter class MainActivity() : FlutterActivity() { private val CHANNEL = "samples.flutter.io/battery" override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) GeneratedPluginRegistrant.registerWith(this) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> // TODO } } } Kotlin
43. Example: Retrieving the battery level Flutter String _batteryLevel = 'Unknown battery level.'; Future<Null> _getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .'; } on PlatformException catch (e) { batteryLevel = "Failed to get battery level: '${e.message}'."; } setState(() { _batteryLevel = batteryLevel; }); } Flutter
44. Flutter is Flutter Optimized for Performance Compiles to Native Code No bridge needed Structural Repainting No reliance on OEM widgets
45. Reactive Frameworks on the Web Flutter
46. Using Flutter Flutter
47. Coding with Dart and Flutter rekindled the joy I had when I started with mobile dev way back when … No B.S. Learning Path] “ ˮ
48. The UI is butter smooth (when building a release version), I have never seen such a smooth Android app Learning Path] “ ˮ
49. Quiz #2 DevCoach 198 Flutter
50. Apa nama fitur Flutter yang dapat berkomunikasi dengan kode native, seperti Android atau iOS? Quiz #2 DevCoach 198 a. Hot Reload b. Platform Channel c. Flutter Plugins d. Native Platform Flutter
51. Gemini Gemini is a versatile AI model with a variety of features that can help in a variety of tasks. One of Gemini's key features is its multimodal capabilities. This capability allows Gemini to understand and produce information in a variety of formats, such as text, and images. Flutter
52. Gemini Some of the advantages of Gemini that Palm Maker Suite cannot provide are: • Gemini can process text and image input simultaneously. • Gemini has access to up-to-date information via Google Search. • Gemini has the ability to understand and produce more natural language. • Gemini has the ability to perform more complex tasks because it has a larger and more powerful language model. • Gemini can work with multiple platforms, including Google Assistant, Google Search, and Google Translate. Flutter
53. AI Agent AI agents are computer-based programs designed to help humans to _solve problems_ or perform specific tasks using various AI technologies such as machine learning, natural language processing NLP, and computer vision for dynamic response and interaction. Characteristics of AI Agents: Autonomous, Adaptive, Interactive, Goal-Focused Flutter
54. The Role of AI Agent in the System • Carrying out new research processes. • Using edge computing. • Facilitates network interactions. • Use external data when local information is not available. Flutter
55. What is Responsible AI • Responsible AI is an approach to the development and application of artificial intelligence AI) that takes into account ethical, social and economic impacts. • The reason for using Responsible AI is because every decision point and AI answer requires consideration and evaluation to ensure that choices have been determined responsibly, from concept to deployment and maintenance. Flutter
56. Why do we need Responsible AI? • Ethics and responsibility are important, not only because they are the right thing to do, but they can also guide the design of AI to better benefit society. • Embedding Responsibility in AI deployment will result in better models and build trust from users. Flutter
57. Accountability Responsible AI Principle Flutter Transparency Justice Security
58. AI Development • General Recommended Practices for AI Development • Check raw data directly • Understand the limitations of datasets and models • Continue to monitor and update the system after implementation Flutter
59. Explainable AI Benefits Flutter Engineer Users Regulators Improve Understanding Improve Performance Better algorithm Debugging Increase Trust Transparent Increase Trust Not Biased and Transparent Comply with the Rules Reports Better algorithm Debugging
60. Expand strong security foundations to the AI ecosystem • Implement AI Interaction Security • AI Risk Analysis • AI Security Needs Analysis • Secure AI Training Assets and Data Flutter
61. Individual Expectations Why do You need Privacy? Flutter Legal Requirements Regulatory Requirements Social Norms
62. Vector Search Vector Search is a search method that uses _vector embeddings_, for data representation in the form of multidimensional numbers. Flutter
63. Key Features of Vector Search Semantic Similarity: Vector Search allows searching based on meaning, not just literal occurrences of keywords. This system looks for items that have semantic similarity or similarity in meaning, even though the words used are different. • Example: If the query contains "buy a car", the system may return results related to "purchase an automobile", because their meaning is similar. Dense Vectors: The vectors used are dense vectors, meaning they have many dimensions that capture many aspects of the meaning of a word or object. Flutter
64. Main Features of Vector Search • Word2Vec, GloVe, and BERT produces vectors representing words in a dimensional space that can measure the distance or similarity between words. • Contextual Understanding: Models like BERT take into account the context around words, so searches can more accurately capture the meaning of whole sentences, not just individual words. Flutter
65. ML KIT ML Kit brings Googleʼs machine learning expertise to mobile developers in a powerful and easy-to-use package. Make your iOS and Android apps more engaging, personalized, and helpful with solutions that are optimized to run on device. Flutter
66. Flutter
67. Flutter
68. Flutter
69. Flutter
70. LiteRT Flutter Litert, formerly known as TensorFlow Lite, is a high-performance runtime environment developed by Google for deploying machine learning models on mobile, embedded, and edge devices. It is optimized for on-device AI, enabling fast and efficient inference with low latency and a small memory footprint.
71. Retrieval Augmented Generation Flutter Text Generation Information Retrieval IR System External Knowledge Retriever BM25, encoder, vector search) Generator LLM question related context Input Prompt ranked results Answer
72. Uji Coba On Device Gemma dengan Pixel 8 Pro Flutter
73. Uji Coba Flutter Gemma dengan RAG Flutter
74. Flutter
75. Flutter LOADING….
76. Flutter
77. Quiz #3 DevCoach 198 Flutter
78. Teknologi apa yang umum digunakan untuk menghubungkan model Machine Learning ML yang sudah ada dengan aplikasi Flutter? Quiz #3 DevCoach 198 a. ML Kit b. LiteRT c. Gemini API d. Semua benar Flutter
79. Continue Learning dicoding.id/a/758
80. Additional Resources • Blog: Whatʼs Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9 • Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0DU • Video: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0 • And of course: github.com/flutter & flutter.io Flutter
81. Thank You esther_is estherirawati estherirawati esetiawan esther.irawati esthersetiawan Flutter