updating the flutter AI playground's behavior and layout #52

apeynado · 2025-10-24T17:22:49Z

Pre-launch Checklist

I signed the CLA.

Tested downloading the sample app from git and connecting it to firebase using flutterfire

ericwindmill · 2025-10-27T17:14:08Z

Hey @apeynado, I'm not sure if you've contributed to this repository before, so just-in-case: this repository is lawless.

If you feel good about the PR, feel free to merge it. Or if you want someone to review it, request it explicitly.

apeynado · 2025-10-27T17:15:04Z

Ah thanks! I'll have Khanh scan it to keep me honest!

khanhnwin · 2025-10-28T05:23:58Z

firebase_ai_logic_showcase/lib/demos/live_api/live_api_demo.dart

  Future<void> startCall() async {
+    // Initialize audio and video streams if they haven't been already.
+    if (!_audioIsInitialized) {
+      await _initializeAudio();


Hmm why'd you move these out of of init state?

khanhnwin · 2025-10-28T05:28:29Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

+class _DemoHomeScreenState extends State<DemoHomeScreen> {
+  int _selectedIndex = 0;
+  final GlobalKey<ChatDemoNanoState> _chatNanoKey = GlobalKey();
+  bool _nanoPickerHasBeenShown = false;


These bits that are only relevant to specific demos (ex: Nano Banana chat) should probably be moved out into the Nano Banana demo

khanhnwin · 2025-10-28T05:30:08Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

+      const ChatDemo(),
+      const LiveAPIDemo(),
+      const MultimodalDemo(),
+      ChatDemoNano(key: _chatNanoKey),


why does this have a key?

khanhnwin · 2025-10-28T05:31:19Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

+  }
+
+  void _onItemTapped(int index) {
+    if (index == 3 && !_nanoPickerHasBeenShown) {


index == 3 is a magic number here, we'll want to refactor to reference a specific demo. We should also move the nanoPicker to the Nano Banana demo, that is probably not need in the main demo scaffolding!

fixed, but the magic number still needs to be in the selector index...

khanhnwin · 2025-10-28T05:31:53Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

-                                        context,
-                                      ).colorScheme.primary,
-                                    ),
-                                'github.com/flutter/demos/issues',


Without this screen, where do we point users to a place to get help/file issues?

khanhnwin · 2025-10-28T05:33:14Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

-                        demo.name,
-                        style: TextStyle(fontWeight: FontWeight.bold),
+            bottomNavigationBar: BottomNavigationBar(
+              items: <BottomNavigationBarItem>[


This can probably be refactored to be a little more module (have the BottomNavigationBar destinations be separate and iterate over it to create the list of BottomNavigationBarItem(s). It'll make it easier to add more demos in the future too.

khanhnwin · 2025-10-28T05:33:53Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

+                  onDestinationSelected: _onItemTapped,
+                  labelType: NavigationRailLabelType.all,
+                  destinations: <NavigationRailDestination>[
+                    const NavigationRailDestination(


Same this could probably reuse the same list of destinations for the mobile layout, but just loop over it and return NavigationRailDestinations instead

khanhnwin · 2025-10-28T05:34:46Z

firebase_ai_logic_showcase/lib/shared/ui/blaze_warning.dart

                ),
              ),
              TextSpan(text: '.'),
+              TextSpan(text: '\n\n'),


this addition makes the alert UI a little too cluttered & two CTAs distract from each other.

khanhnwin · 2025-10-28T05:38:53Z

firebase_ai_logic_showcase/lib/shared/models/gemini_model.dart

@@ -0,0 +1,56 @@
+import 'package:firebase_ai/firebase_ai.dart';


Do we use this component anymore since we broke out the Nano Banana and Chat demos?

khanhnwin · 2025-10-28T05:40:13Z

firebase_ai_logic_showcase/lib/demos/chat_nano/firebaseai_chat_service.dart

@@ -0,0 +1,122 @@
+// Copyright 2025 Google LLC


I don't think we need to duplicate this service from the original chat demo, it is identically the same business logic. We shouldn't have to duplicate code.

khanhnwin · 2025-10-28T05:41:10Z

firebase_ai_logic_showcase/lib/demos/chat_nano/chat_nano_demo.dart

@@ -0,0 +1,219 @@
+// Copyright 2025 Google LLC


This is also duplicated code that doesn't need to be duplicated! We should eb able to use the original chat demo, just swap out the model in that is being used!

I cleaned up the chat demo so it will focus on the function calling part and always select the gemini 2.5 flash. The majority of the UI component is moved to shared folder and reuse between two demos. I think it's ok to have independent demo page for different purposes.

Fixing Padding & UI & Adding Hamburger menu

khanhnwin · 2025-10-28T05:44:38Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

-  ),
-  Demo(
-    name: 'Multimodal Prompt',
-    description:


Removing the index screen now means that the user has 0 context to what each demo is meant to showcase/feature. That'll be hard for them to then back-track and understand what APIs they should use in Firebase AI Logic.

khanhnwin · 2025-10-28T06:14:51Z

firebase_ai_logic_showcase/lib/flutter_firebase_ai_demo.dart

+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth < 600) {
+          // Use BottomNavigationBar for smaller screens


when the app gets scaled down, it regenerates the demo and re-executes the function call to change the app color. I don't think that's an intended effect?

same with scaling up!

khanhnwin · 2025-10-28T06:21:33Z

firebase_ai_logic_showcase/lib/demos/chat/chat_demo.dart

+        'Hey Gemini! Can you set the app color to purple?';
    WidgetsBinding.instance.addPostFrameCallback((_) {
-      opController.show();
+      sendMessage(_userTextInputController.text);


I don't think it's a good idea to hijack the UI and automatically send the first message. As someone launching the demo for the first time, sending the message automatically kind of takes away the user's agency? Generally a bad UX pattern to execute an action without user consent. Maybe an alternative is to add a pop up or something that says "click send message" to see a tool call! or something that encourages the user to send the initial message, but still lets them decide.

Added a dialog to ask the user to make the decision

khanhnwin · 2025-10-28T06:23:16Z

firebase_ai_logic_showcase/lib/demos/chat_nano/firebaseai_chat_service.dart

+    }
+  }
+
+  Future<ChatResponse> _handleFunctionCall(


I don't think function calls are even supported in the nano banana models?

apeynado added 3 commits October 24, 2025 10:12

updating the flutter AI playground's behavior and layout

8182542

making navigation and style changes to improve look and feel

7ddd102

added the free trial promotion to the blaze warning banner

3cf3f49

apeynado closed this Oct 27, 2025

apeynado reopened this Oct 27, 2025

apeynado marked this pull request as draft October 27, 2025 17:15

apeynado marked this pull request as ready for review October 27, 2025 17:16

apeynado marked this pull request as draft October 27, 2025 17:16

apeynado marked this pull request as ready for review October 27, 2025 17:16

apeynado and others added 9 commits October 27, 2025 11:18

updating the hero image to reflect the current UX

0a64cb8

actually making the UI responsive

94a3ec9

make the banana bigger

fb32b52

updated hero image

e836a0e

removed the headers from each demo app

6136796

adding vertical padding to a few demos

6c45eb4

update audio input sample rate

76f043f

putting back message input field in bottom navigation bar

c9d47a7

deleting unused imagen demo

4f00882

khanhnwin reviewed Oct 28, 2025

View reviewed changes

khanhnwin and others added 4 commits October 27, 2025 23:12

remove unused imports

b4f51bf

remove padding from top of multimodal & live api demos

5cd46db

replace bottom nav bar with a hamburger menu + drawer

764d8c5

Merge pull request #1 from apeynado/apeynado/main

c6e9af4

Fixing Padding & UI & Adding Hamburger menu

khanhnwin reviewed Oct 28, 2025

View reviewed changes

cynthiajoan added 6 commits November 10, 2025 22:09

refactor the common UI and service code

961bc59

add a dialog to trigger the function call

03ab41b

refactor the repeat logic for different layout

4d65d1a

more layout refactor

91272eb

update the initialize logic for live api demo

0d933c3

keep firebase_options.dart out of gitignore

15b3835

		@@ -0,0 +1,56 @@
		import 'package:firebase_ai/firebase_ai.dart';

updating the flutter AI playground's behavior and layout #52

Are you sure you want to change the base?

updating the flutter AI playground's behavior and layout #52

Conversation

apeynado commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

ericwindmill commented Oct 27, 2025

Uh oh!

apeynado commented Oct 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khanhnwin Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

apeynado commented Oct 24, 2025 •

edited

Loading

khanhnwin Oct 28, 2025 •

edited

Loading