Concept to Code – AI in Flutter Apps

Discover how AI can supercharge your Flutter app development process—from ideation to implementation. In this session, we’ll explore how tools like DartPad, Firebase Studio, and Cursor can accelerate coding, automate repetitive tasks using AI, and streamline your overall development workflow.

Transcript

1. Concept to Code – AI in Flutter Apps Urvashi Kharecha Lead Software Engineer, 7Span Shweta Butani Lead Software Engineer, 7Span
2. Why Use AI in Mobile App Development?
3. GDG Ahmedabad Challenges • Repetitive tasks: models, UI, API parsing • Building complex layouts from scratch • Creating sample/test data manually • Debugging layout issues or runtime errors • Searching documentation or Stack Overflow repeatedly
4. GDG Ahmedabad What is Prompt Engineering? • Prompt engineering is the art and science of crafting effective prompts. • It guides AI models, especially LLMs, to generate desired responses. • Careful prompt design provides context, instructions, and examples. • This helps the model understand intent and respond meaningfully.
5. GDG Ahmedabad The Science of Tokenization • Pieces of Words ◦ Tokens can be thought of as pieces of words or sub-words. • Input Breakdown ◦ Before the API processes the request, the input is broken down into tokens. • Flexible Boundaries ◦ Tokens do not strictly align with word starts & ends. They can include spaces or even sub-words. Gemini 2.5 Pro has 1 million token context window
6. GDG Ahmedabad [The] [ developer] [ smiled] [.] "The developer smiled." [The] [ Developer] [ Sm] [iled] [.] "The Developer Smiled."
7. GDG Ahmedabad The Problem • Sometimes, when we ask AI to perform a task, it doesn’t always get it right. • And when we express our frustration by saying things like: "This is useless." "This feature isn't supported." • The AI often responds with something like: "You're right!" • It is always nice to be Right. But I also wish the model/AI could work right.
8. GDG Ahmedabad DartPad • DartPad is an online editor for writing and running Dart code. • No setup needed, just open and start coding. • Great for trying out Flutter widgets, experimenting, and even testing AI generated code. • Create with Gemini helps generate code directly.
9. GDG Ahmedabad Gemini + DartPad: What’s Possible? • Generate new Flutter UI code from a prompt. • Use images like UX mocks or screenshots to generate widget code. • Refactor or improve existing code using prompts. • Get suggestions for fixing analysis and run-time errors.
10. GDG Ahmedabad Tips for Using Gemini in DartPad • Break down the UI into smaller parts (e.g., header, card, list item). • Generate each component separately, then combine and customize. • Use clear images to get more accurate widget code. • Try different prompt styles to improve results. • Don’t hesitate to ask Gemini to regenerate, refactor, or explain the code.
11. Let’s See It in Action
12. GDG Ahmedabad Cursor • Cursor is an AI-powered code editor, built on top of VS Code. • It integrates with models like GPT-4 or Gemini, allowing you to chat directly with your codebase. • You can select code, ask for improvements, generate components, and fix bugs, all from within the editor. • It supports framework-aware AI help (like for Flutter, React, etc.).
13. GDG Ahmedabad What can Cursor do? • Write Flutter UI code from a prompt (just describe what you want). • Complete your code based on what you’ve written. • Refactor code (like extract widgets or rename variables). • Explain code in simple words. • Write tests for your widgets. • Add comments and documentation to your code.
14. GDG Ahmedabad Custom Rules • Why custom rules required? • Start by checking the Docs or ReadMe. • Stick to the same context throughout the conversation. • Define your custom rules. • Check cursor.directory for all types of Rules
15. GDG Ahmedabad IDE (Global-Level) Rules Project-Level & Global AI Rules Project-Level Rules • Create rules under .cursor/rules directory of your project. • Use it to define custom AI behavior specific to your project. • User-defined rules live in your Cursor IDE under: • Settings > Rules
16. GDG Ahmedabad Types of Rules • Always: Rules that are always applied regardless of the situation. • Auto-Attached: Automatically added based on the detected context or files. • Agent Requested: Applied when the AI agent explicitly requests additional context. • Manual: Triggered only when manually added by the user.
17. Keep Rules Focused Good rules are focused, actionable and scoped: Keep rules concise, under 500 line is a good target. Best Practices
18. How It Works?
19. GDG Ahmedabad What AI Seems? vs. What It Does? • AI will replace developers entirely • It's a powerful co-pilot, NOT auto-pilot • AI writes flawless, complete apps • AI solves every complex problem. • Using AI means you're not skilled enough • It generates helpful code snippets, not full apps • AI just speeds you up — you still solve the problem. • Smart developers use AI to save time and stay sharp
20. “AI isn’t here to replace developers, it’s here to remove the boring parts so we can build with more focus and flow.”
21. GDG Ahmedabad Bonus 🎉 • Jules with Git Repo • Firebase Studio with flutter • Android Studio + Gemini • Windsurf • Trae
22. Thank You! @urvashikharecha @shwetabutani