Themes in Flutter AI AssistView (SfAIAssistView)

18 Nov 201824 minutes to read

This section explains the customization properties available in SfAIAssistViewThemeData.

Import the theme library

Import the following library to use the assist theme data. The syncfusion_flutter_core package provides the theme support.

DART

import 'package:syncfusion_flutter_core/theme.dart';

Each code sample in the following sections shares the same structure: the SfAIAssistView is wrapped with SfAIAssistViewTheme, and only the SfAIAssistViewThemeData portion changes to demonstrate the property being described.

Action button properties

Action button foreground color

The actionButtonForegroundColor property is used to specify the color for the default action button icon.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonForegroundColor: Colors.white,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button background color

The actionButtonBackgroundColor property is used to specify the background color for the action button in its default state.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonBackgroundColor: Colors.blueAccent,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button focus color

The actionButtonFocusColor property is used to specify the background color for the action button when it is in the focused state.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonFocusColor: Colors.blue,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button hover color

The actionButtonHoverColor property is used to specify the background color for the action button when it is hovered over.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonHoverColor: Colors.blueGrey,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button splash color

The actionButtonSplashColor property is used to specify the color of the ripple effect when the action button is tapped.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonSplashColor: Colors.lightBlueAccent,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button disabled foreground color

The actionButtonDisabledForegroundColor property is used to specify the color of the text or icon on the action button when it is disabled.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonDisabledForegroundColor: Colors.grey,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button disabled background color

The actionButtonDisabledBackgroundColor property is used to specify the background color of the action button when it is disabled.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonDisabledBackgroundColor: Colors.grey[300],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button elevation

The actionButtonElevation property is used to specify the elevation of the action button in its default state.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonElevation: 4.0,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button focus elevation

The actionButtonFocusElevation property is used to specify the elevation of the action button when it is focused.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonFocusElevation: 6.0,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button hover elevation

The actionButtonHoverElevation property is used to specify the elevation of the action button when it is hovered over.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonHoverElevation: 8.0,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button highlight elevation

The actionButtonHighlightElevation property is used to specify the elevation of the action button when it is highlighted.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonHighlightElevation: 12.0,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button disabled elevation

The actionButtonDisabledElevation property is used to specify the elevation of the action button when it is disabled.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonDisabledElevation: 0.0,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button mouse cursor

The actionButtonMouseCursor property is used to specify the type of cursor displayed when hovering over the action button.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonMouseCursor: SystemMouseCursors.click,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Action button shape

The actionButtonShape property is used to specify the shape and border radius of the action button.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        actionButtonShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Avatar properties

Request avatar background color

The requestAvatarBackgroundColor property is used to specify the background color of request message avatar.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestAvatarBackgroundColor: Colors.green[200],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response avatar background color

The responseAvatarBackgroundColor property is used to specify the background color of response message avatar.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseAvatarBackgroundColor: Colors.blue[200],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Request message background color

The requestMessageBackgroundColor property is used to specify the background color of contents containing request messages.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestMessageBackgroundColor: Colors.green[100],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response message background color

The responseMessageBackgroundColor property is used to specify the background color of contents containing response messages.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseMessageBackgroundColor: Colors.blue[100],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Text style properties

Editor text style

The editorTextStyle property is used to specify the style for text in the message editor.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        editorTextStyle: const TextStyle(
          color: Colors.black,
          fontSize: 16.0,
          fontWeight: FontWeight.normal,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Request content text style

The requestContentTextStyle property is used to specify the style for text in request message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestContentTextStyle: const TextStyle(
          color: Colors.black87,
          fontSize: 14.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response content text style

The responseContentTextStyle property is used to specify the style for text in response message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseContentTextStyle: const TextStyle(
          color: Colors.black,
          fontSize: 14.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Request primary header text style

The requestPrimaryHeaderTextStyle property is used to specify the style for the primary header text in request message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestPrimaryHeaderTextStyle: const TextStyle(
          color: Colors.black,
          fontSize: 12.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response primary header text style

The responsePrimaryHeaderTextStyle property is used to specify the style for the primary header text in response message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responsePrimaryHeaderTextStyle: const TextStyle(
          color: Colors.black,
          fontSize: 12.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Request secondary header text style

The requestSecondaryHeaderTextStyle property is used to specify the style for the secondary header text in request message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestSecondaryHeaderTextStyle: const TextStyle(
          color: Colors.grey,
          fontSize: 12.0,
          fontStyle: FontStyle.italic,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response secondary header text style

The responseSecondaryHeaderTextStyle property is used to specify the style for the secondary header text in response message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseSecondaryHeaderTextStyle: const TextStyle(
          color: Colors.grey,
          fontSize: 12.0,
          fontStyle: FontStyle.normal,
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Suggestion item text style

The suggestionItemTextStyle property is used to specify the text style for response message suggestion items.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        suggestionItemTextStyle: WidgetStateProperty.resolveWith(
          (Set<WidgetState> state) {
            if (state.contains(WidgetState.selected)) {
              return const TextStyle(
                  color: Colors.blue,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold);
            } else if (state.contains(WidgetState.focused)) {
              return const TextStyle(
                  color: Colors.blueGrey,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold);
            } else if (state.contains(WidgetState.hovered)) {
              return const TextStyle(
                  color: Colors.lightBlueAccent,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold);
            } else if (state.contains(WidgetState.disabled)) {
              return const TextStyle(
                  color: Colors.grey,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold);
            }
            return const TextStyle(
                color: Colors.black,
                fontSize: 16.0,
                fontWeight: FontWeight.bold);
          },
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Message shape properties

Request message shape

The requestMessageShape property is used to specify the shape and border radius of request message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        requestMessageShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16.0),
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response message shape

The responseMessageShape property is used to specify the shape and border radius of response message contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseMessageShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16.0),
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Suggestion properties

Suggestion background color

The suggestionBackgroundColor property is used to specify the background color of response message suggestion contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        suggestionBackgroundColor: Colors.lightBlue[50],
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Suggestion background shape

The suggestionBackgroundShape property is used to specify the background shape of response message suggestion contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        suggestionBackgroundShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Suggestion item background color

The suggestionItemBackgroundColor property is used to specify the background color for response message suggestion items.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        suggestionItemBackgroundColor: WidgetStateProperty.resolveWith(
          (Set<WidgetState> state) {
            if (state.contains(WidgetState.selected)) {
              return Colors.blue;
            } else if (state.contains(WidgetState.focused)) {
              return Colors.blueGrey;
            } else if (state.contains(WidgetState.hovered)) {
              return Colors.lightBlueAccent;
            } else if (state.contains(WidgetState.disabled)) {
              return Colors.grey[300];
            }
            return Colors.white;
          },
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Suggestion item shape

The suggestionItemShape property is used to specify the shape for response message suggestion items.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        suggestionItemShape: WidgetStateProperty.resolveWith(
          (Set<WidgetState> state) {
            if (state.contains(WidgetState.selected)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              );
            } else if (state.contains(WidgetState.focused)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              );
            } else if (state.contains(WidgetState.hovered)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(6.0),
              );
            } else if (state.contains(WidgetState.disabled)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4.0),
              );
            }
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            );
          },
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response toolbar properties

Response toolbar background color

The responseToolbarBackgroundColor property is used to specify the background color of response message toolbar contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseToolbarBackgroundColor: Colors.red,
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response toolbar background shape

The responseToolbarBackgroundShape property is used to specify the background shape of response message toolbar contents.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseToolbarBackgroundShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response toolbar item background color

The responseToolbarItemBackgroundColor property is used to specify the background color of response message toolbar items.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseToolbarItemBackgroundColor:
            WidgetStateProperty.resolveWith(
          (Set<WidgetState> state) {
            if (state.contains(WidgetState.selected)) {
              return Colors.blue;
            } else if (state.contains(WidgetState.focused)) {
              return Colors.blueGrey;
            } else if (state.contains(WidgetState.hovered)) {
              return Colors.lightBlueAccent;
            } else if (state.contains(WidgetState.disabled)) {
              return Colors.grey[400];
            }
            return Colors.white;
          },
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

Response toolbar item shape

The responseToolbarItemShape property is used to specify the shape of response message toolbar items.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
import 'package:syncfusion_flutter_core/theme.dart';

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

  final List<AssistMessage> _messages = const <AssistMessage>[];

  @override
  Widget build(BuildContext context) {
    return SfAIAssistViewTheme(
      data: const SfAIAssistViewThemeData(
        responseToolbarItemShape: WidgetStateProperty.resolveWith(
          (Set<WidgetState> state) {
            if (state.contains(WidgetState.selected)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16.0),
              );
            } else if (state.contains(WidgetState.focused)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              );
            } else if (state.contains(WidgetState.hovered)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              );
            } else if (state.contains(WidgetState.disabled)) {
              return RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4.0),
              );
            }
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            );
          },
        ),
      ),
      child: Scaffold(
        body: SfAIAssistView(
          messages: _messages,
        ),
      ),
    );
  }
}

You can refer to our Flutter AI AssistView feature tour page for its groundbreaking feature representations. You can also explore our Flutter AI AssistView example which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects.

See Also

• Action button
• Composer
• Conversation area
• Placeholder