Input field overlap issue

[jin-reyapp]

Description

Two input fields are displayed overlaping each other when placeholder text is present. This seems to happen when the placeholder text is only one line long.

Test Environment

• iOS (TestFlight)

Screenshots

[csells]

@jin-reyapp this is not behavior I’m seeing. What version are the AI Toolkit are you using? Can you post a minimal repro project? Thanks.

[miquelbeltran]

Hi @csells I am on @jin-reyapp team, and I was able to reproduce the issue with a minimal example.

We use v0.8.0.

Seems that there's an overlap between the InputDecorationTheme from the ThemeData in the build context and the theme defined in the LlmChatViewStyle.ChatInputStyle.

For example, with this code:

import 'package:flutter/material.dart';
import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
import 'package:google_generative_ai/google_generative_ai.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final border = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(8)),
      borderSide: BorderSide(color: Colors.pink),
    );
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        inputDecorationTheme: InputDecorationTheme(
          hintStyle: TextStyle(color: Colors.white, fontSize: 10),
          fillColor: Colors.amber,
          filled: true,
          enabledBorder: border,
          focusedBorder: border,
          disabledBorder: border,
          errorBorder: border,
          focusedErrorBorder: border,
          border: border,
          isDense: true,
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: LlmChatView(
        style: LlmChatViewStyle(
          chatInputStyle: ChatInputStyle(
            hintText: "hint",
            hintStyle: TextStyle(color: Colors.white, fontSize: 16),
            decoration: BoxDecoration(
              color: Colors.red,
              border: Border.all(width: 1, color: Colors.black),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ),
        provider: GeminiProvider(
          model: GenerativeModel(
            model: 'gemini-2.0-flash',
            apiKey: 'YOUR_API_KEY',
          ),
        ),
      ),
    );
  }
}

I get the following UI:

The "red" box is defined as the ChatInputStyle and the "yellow" theme is defined in the InputDecorationTheme.

I haven't looked yet into the package code so I cannot provide any clues on what could be wrong. I hope this code sample helps!

[csells]

@miquelbeltran @jin-reyapp If you remove the isDense setting on the inputDecorationTheme, the text field is properly centered. Is there any reason that that is an insufficient fix?

here's a minimal repro:

import 'package:flutter/material.dart';
import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';

void main() => runApp(_MyApp());

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      inputDecorationTheme: InputDecorationTheme(
        fillColor: Colors.amber,
        filled: true,
        //isDense: true, // NOTE: removing this solves the issue
      ),
    ),
    home: _MyHomePage(),
  );
}

class _MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
    body: LlmChatView(
      style: LlmChatViewStyle(
        chatInputStyle: ChatInputStyle(
          hintStyle: TextStyle(color: Colors.white, fontSize: 16),
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(width: 1, color: Colors.black),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      provider: EchoProvider(),
    ),
  );
}

[miquelbeltran]

Hi Chris, changing the app theme was not an option, but we wrapped the LlmChatView in a Theme and override the InputDecorationTheme to match our custom ChatInputStyle. It's not ideal but works.

My proposal for a long-term solution would be that the LlmChatView applies the ChatInputStyle to the text input directly, instead of having a container or similar. Otherwise, it can be confusing for developers that see a clash between the two ways of customizing the llm chat input. As well, the LlmChatView overrides the input style internally to set isDense to false.

[csells]

My proposal for a long-term solution would be that the LlmChatView applies the ChatInputStyle to the text input directly, instead of having a container or similar.

the problem is that the toolkit has to work in both Material and Cupertino. still, I'll see what I can do to either fix this issue or remove the need to turn off isDense.