diff --git a/Flutter/ai-assistview/images/rtl/action_button_rtl.gif b/Flutter/ai-assistview/images/rtl/action_button_rtl.gif new file mode 100644 index 000000000..630dcc192 Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/action_button_rtl.gif differ diff --git a/Flutter/ai-assistview/images/rtl/composer_rtl.png b/Flutter/ai-assistview/images/rtl/composer_rtl.png new file mode 100644 index 000000000..af18a2e9d Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/composer_rtl.png differ diff --git a/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif b/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif new file mode 100644 index 000000000..f9a5b5d93 Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif differ diff --git a/Flutter/ai-assistview/images/rtl/placeholder_rtl.png b/Flutter/ai-assistview/images/rtl/placeholder_rtl.png new file mode 100644 index 000000000..79239845a Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/placeholder_rtl.png differ diff --git a/Flutter/ai-assistview/right-to-left.md b/Flutter/ai-assistview/right-to-left.md new file mode 100644 index 000000000..e5027e170 --- /dev/null +++ b/Flutter/ai-assistview/right-to-left.md @@ -0,0 +1,215 @@ +--- +layout: post +title: Placeholder in Flutter Chat widget | Syncfusion +description: Learn here about the Right to Left(RTL) support in Syncfusion Flutter Chat (SfChat) widget and more. +platform: flutter +control: SfChat +documentation: ug +--- + + +# Right To Left (RTL) in Flutter Chat (SfChat) + + +Chat supports the right to left rendering for all the elements in the Chat widget. + +## RTL rendering ways + +Right to left rendering can be switched in the following ways: + +### Wrapping the SfChat with Directionality widget + +To change the rendering direction from right to left, you can wrap the [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). + +{% tabs %} +{% highlight dart hl_lines="5" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + //... + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +## RTL supported chat elements + +### Placeholder + +Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/placeholderBuilder.html) in the chat. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + placeholderBuilder: (context) { + return const Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: 10), + Icon( + size: 30, + Icons.emoji_people_rounded, + color: Colors.red, + ), + SizedBox(width: 5), + Text( + 'Start a conversation', + style: TextStyle( + color: Colors.deepPurple, + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ); + }, + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![PlaceHolder RTL](images/rtl/placeholder_rtl.png) + +### Composer + +Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) in the chat. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + composer: const ChatComposer( + decoration: InputDecoration( + hintText: 'Enter Message here', + )), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![Composer RTL](images/rtl/composer_rtl.png) + + +### Action Button + +Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/actionButton.html) in the chat. Action button will be rendered from right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + actionButton: ChatActionButton( + onPressed: (value) { + setState(() { + _messages.add( + ChatMessage( + text: value, + time: DateTime.now(), + author: const ChatAuthor( + id: '1010', name: 'Johnathan wick'), + ), + ); + }); + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Action Button RTL](images/rtl/action_button_rtl.gif) + + +### Message Content + +Right to left (RTL) rendering is supported for [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) in the chat conversation area. In RTL mode, message content, header and suggestions will render the widget in right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 8" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: [ + ChatMessage( + text: 'Hey, Any plans for today?', + time: DateTime.parse('2025-03-21T10:02:00Z'), + author: const ChatAuthor( + id: '1010', + name: 'Johnathan wick', + avatar: AssetImage('assets/images/People_Circle23.png'), + ), + ), + ChatMessage( + text: + "I'm thinking of watching a web series. Can you suggest some?", + time: DateTime.parse('2025-03-21T10:03:00Z'), + author: const ChatAuthor( + id: '1020', + name: 'John carter', + avatar: AssetImage('assets/images/People_Circle5.png'), + ), + suggestions: [ + const ChatMessageSuggestion(data: 'Peaky Blinders'), + const ChatMessageSuggestion(data: 'Breaking Bad'), + const ChatMessageSuggestion(data: 'Prison Break'), + const ChatMessageSuggestion(data: 'Blacklist'), + ], + ), + ], + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Message Content RTL](images/rtl/message_content_rtl.png) diff --git a/Flutter/chat/images/rtl/action_button_rtl.gif b/Flutter/chat/images/rtl/action_button_rtl.gif new file mode 100644 index 000000000..1e4a165c3 Binary files /dev/null and b/Flutter/chat/images/rtl/action_button_rtl.gif differ diff --git a/Flutter/chat/images/rtl/composer_rtl.png b/Flutter/chat/images/rtl/composer_rtl.png new file mode 100644 index 000000000..d57ec2b74 Binary files /dev/null and b/Flutter/chat/images/rtl/composer_rtl.png differ diff --git a/Flutter/chat/images/rtl/message_content_rtl.png b/Flutter/chat/images/rtl/message_content_rtl.png new file mode 100644 index 000000000..79bda52e3 Binary files /dev/null and b/Flutter/chat/images/rtl/message_content_rtl.png differ diff --git a/Flutter/chat/images/rtl/placeholder_rtl.png b/Flutter/chat/images/rtl/placeholder_rtl.png new file mode 100644 index 000000000..d0d606126 Binary files /dev/null and b/Flutter/chat/images/rtl/placeholder_rtl.png differ diff --git a/Flutter/chat/right-to-left.md b/Flutter/chat/right-to-left.md new file mode 100644 index 000000000..e5027e170 --- /dev/null +++ b/Flutter/chat/right-to-left.md @@ -0,0 +1,215 @@ +--- +layout: post +title: Placeholder in Flutter Chat widget | Syncfusion +description: Learn here about the Right to Left(RTL) support in Syncfusion Flutter Chat (SfChat) widget and more. +platform: flutter +control: SfChat +documentation: ug +--- + + +# Right To Left (RTL) in Flutter Chat (SfChat) + + +Chat supports the right to left rendering for all the elements in the Chat widget. + +## RTL rendering ways + +Right to left rendering can be switched in the following ways: + +### Wrapping the SfChat with Directionality widget + +To change the rendering direction from right to left, you can wrap the [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). + +{% tabs %} +{% highlight dart hl_lines="5" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + //... + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +## RTL supported chat elements + +### Placeholder + +Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/placeholderBuilder.html) in the chat. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + placeholderBuilder: (context) { + return const Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: 10), + Icon( + size: 30, + Icons.emoji_people_rounded, + color: Colors.red, + ), + SizedBox(width: 5), + Text( + 'Start a conversation', + style: TextStyle( + color: Colors.deepPurple, + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ); + }, + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![PlaceHolder RTL](images/rtl/placeholder_rtl.png) + +### Composer + +Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) in the chat. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + composer: const ChatComposer( + decoration: InputDecoration( + hintText: 'Enter Message here', + )), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![Composer RTL](images/rtl/composer_rtl.png) + + +### Action Button + +Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/actionButton.html) in the chat. Action button will be rendered from right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + actionButton: ChatActionButton( + onPressed: (value) { + setState(() { + _messages.add( + ChatMessage( + text: value, + time: DateTime.now(), + author: const ChatAuthor( + id: '1010', name: 'Johnathan wick'), + ), + ); + }); + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Action Button RTL](images/rtl/action_button_rtl.gif) + + +### Message Content + +Right to left (RTL) rendering is supported for [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) in the chat conversation area. In RTL mode, message content, header and suggestions will render the widget in right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 8" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: [ + ChatMessage( + text: 'Hey, Any plans for today?', + time: DateTime.parse('2025-03-21T10:02:00Z'), + author: const ChatAuthor( + id: '1010', + name: 'Johnathan wick', + avatar: AssetImage('assets/images/People_Circle23.png'), + ), + ), + ChatMessage( + text: + "I'm thinking of watching a web series. Can you suggest some?", + time: DateTime.parse('2025-03-21T10:03:00Z'), + author: const ChatAuthor( + id: '1020', + name: 'John carter', + avatar: AssetImage('assets/images/People_Circle5.png'), + ), + suggestions: [ + const ChatMessageSuggestion(data: 'Peaky Blinders'), + const ChatMessageSuggestion(data: 'Breaking Bad'), + const ChatMessageSuggestion(data: 'Prison Break'), + const ChatMessageSuggestion(data: 'Blacklist'), + ], + ), + ], + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Message Content RTL](images/rtl/message_content_rtl.png) diff --git a/flutter-toc.html b/flutter-toc.html index 913e96a0a..f959ad34b 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -109,6 +109,7 @@
  • Action Button
  • Conversation Area
  • Theme
  • +
  • Right to Left (RTL)
  • @@ -158,6 +159,7 @@
  • Action Button
  • Conversation Area
  • Theme
  • +
  • Right to Left (RTL)