Skip to content
12 changes: 6 additions & 6 deletions Flutter/chat/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Getting started with Flutter Chat widget | Syncfusion
description: Learn here about getting started with Syncfusion Flutter Chat (SfChat) widget, its elements, and more.
description: Learn here about getting started with Syncfusion Essential Studio Flutter Chat widget, its elements, and more.
platform: flutter
control: SfChat
documentation: ug
---

# Getting started with Flutter Chat (SfChat)
# Getting started with Flutter Chat

This section explains how to add the Flutter Chat widget to a single Flutter application and how to use its basic features.

Expand Down Expand Up @@ -99,7 +99,7 @@ Add a chat widget with the necessary properties, such as [`messages`](https://pu
{% endhighlight %}
{% endtabs %}

![Default chat](images/getting-started/initialize-chat.png)
![Getting started with Flutter Chat.](images/getting-started/initialize-chat.png)

## Add placeholder to composer

Expand Down Expand Up @@ -151,7 +151,7 @@ To add a placeholder to the [`ChatComposer`](https://pub.dev/documentation/syncf
{% endhighlight %}
{% endtabs %}

![Placeholder to composer](images/getting-started/add-placeholder-to-composer.png)
![Add placeholder to composer in Flutter Chart.](images/getting-started/add-placeholder-to-composer.png)

## Add placeholder to conversation area

Expand Down Expand Up @@ -187,7 +187,7 @@ By default, conversation messages are empty. It’s a good idea to show a messag
{% endhighlight %}
{% endtabs %}

![Placeholder](images/getting-started/placeholder.png)
![Add placeholder to conversation area in Flutter Chat.](images/getting-started/add-placeholder-to-conversation-area-in-flutter-chat.png)

## Add action button

Expand Down Expand Up @@ -260,6 +260,6 @@ When the send button is clicked, the [`ChatActionButton.onPressed`](https://pub.
{% endhighlight %}
{% endtabs %}

![Action button chat](images/getting-started/actionbutton-chat.png)
![Add action button in Flutter Chat.](images/getting-started/actionbutton-in-flutter-chat.png)

>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.