{"id":"e97df468-84cb-4557-84b4-f43083588748","shortId":"X57BKF","kind":"skill","title":"cometchat-flutter-v6-placement","tagline":"Use when deciding WHERE to put CometChat in a Flutter app. Covers placement patterns: tab-based home (IndexedStack), Navigator.push messages screen, modal/bottom sheet chat, thread overlay, embedded panel, and floating widget. Includes Scaffold configuration, resizeToAvoidBottomI","description":"# CometChat Flutter UIKit — Placement\n\nWHERE to put CometChat in your Flutter app. Five patterns, each with complete code.\n\n**Before using this skill:**\n- Read `cometchat-flutter-v6-core` for init, login, and rules\n- Read `cometchat-flutter-v6-components` for component names and props (when available)\n\n---\n\n## Placement Recommendation\n\n| User intent | Recommended pattern | Components |\n|-------------|-------------------|------------|\n| Messaging app | Tab-based home (full screen) | IndexedStack + CometChatConversations + Messages screen |\n| Marketplace / platform | Navigator.push from product page | Single-thread messages screen |\n| SaaS / dashboard | Modal or bottom sheet | CometChatConversations in BottomSheet |\n| Social / community | Tab-based home with calls | IndexedStack + Conversations + CallLogs + Users + Groups |\n| Support / helpdesk | Floating action button → modal | FAB + showModalBottomSheet |\n| Just exploring | Replace home page | CometChatConversations as Scaffold body |\n\n---\n\n## Pattern 1: Tab-Based Home (Most Common)\n\nBottomNavigationBar with IndexedStack to preserve tab state. This is what master_app uses.\n\n```dart\nclass HomeScreen extends StatefulWidget {\n  const HomeScreen({super.key});\n  @override\n  State<HomeScreen> createState() => _HomeScreenState();\n}\n\nclass _HomeScreenState extends State<HomeScreen> {\n  int _currentIndex = 0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: IndexedStack(\n        index: _currentIndex,\n        children: [\n          // Tab 0: Conversations\n          CometChatConversations(\n            hideAppbar: true,\n            onItemTap: (conversation) => _openChat(context, conversation),\n          ),\n          // Tab 1: Call Logs\n          CometChatCallLogs(hideAppbar: true),\n          // Tab 2: Users\n          CometChatUsers(\n            hideAppbar: true,\n            onItemTap: (_, user) => _pushMessages(context, user: user),\n          ),\n          // Tab 3: Groups\n          CometChatGroups(\n            hideAppbar: true,\n            onItemTap: (_, group) => _pushMessages(context, group: group),\n          ),\n        ],\n      ),\n      bottomNavigationBar: BottomNavigationBar(\n        currentIndex: _currentIndex,\n        onTap: (i) => setState(() => _currentIndex = i),\n        type: BottomNavigationBarType.fixed,\n        items: const [\n          BottomNavigationBarItem(icon: Icon(Icons.chat_outlined), label: 'Chats'),\n          BottomNavigationBarItem(icon: Icon(Icons.call_outlined), label: 'Calls'),\n          BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: 'Users'),\n          BottomNavigationBarItem(icon: Icon(Icons.people_outline), label: 'Groups'),\n        ],\n      ),\n    );\n  }\n\n  void _openChat(BuildContext context, Conversation conversation) {\n    final user = conversation.conversationWith is User\n        ? conversation.conversationWith as User : null;\n    final group = conversation.conversationWith is Group\n        ? conversation.conversationWith as Group : null;\n    _pushMessages(context, user: user, group: group);\n  }\n\n  void _pushMessages(BuildContext context, {User? user, Group? group}) {\n    Navigator.push(context, MaterialPageRoute(\n      builder: (_) => MessagesScreen(user: user, group: group),\n    ));\n  }\n}\n```\n\n**Key details:**\n- `IndexedStack` keeps all tabs alive — no re-fetch when switching tabs\n- `hideAppbar: true` on all components — the parent Scaffold provides the AppBar\n- `onItemTap` extracts `User`/`Group` from `conversation.conversationWith`\n- Protected groups need a join/password screen before navigating to messages\n\n---\n\n## Pattern 2: Messages Screen (Navigator.push)\n\nThe standard messages screen pushed from any conversation/user/group tap.\n\n```dart\nclass MessagesScreen extends StatefulWidget {\n  final User? user;\n  final Group? group;\n  const MessagesScreen({super.key, this.user, this.group})\n      : assert(user != null || group != null);\n  @override\n  State<MessagesScreen> createState() => _MessagesScreenState();\n}\n\nclass _MessagesScreenState extends State<MessagesScreen> {\n  late User? _user;\n  late Group? _group;\n\n  @override\n  void initState() {\n    super.initState();\n    _user = widget.user;   // Mutable copy — updated by SDK listeners\n    _group = widget.group;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      resizeToAvoidBottomInset: false, // REQUIRED — composer handles keyboard\n      appBar: CometChatMessageHeader(\n        user: _user,\n        group: _group,\n        onBack: () => Navigator.pop(context),\n      ),\n      body: SafeArea(\n        bottom: false, // Composer handles bottom safe area\n        child: Column(\n          children: [\n            Expanded(child: CometChatMessageList(user: _user, group: _group)),\n            CometChatMessageComposer(user: _user, group: _group),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Critical Scaffold Rules\n\n1. `resizeToAvoidBottomInset: false` — MANDATORY on any Scaffold with `CometChatMessageComposer`. The composer uses `SliverSpacing` internally to handle keyboard. Setting `true` causes double-compensation.\n2. `SafeArea(bottom: false)` — The composer handles bottom safe area internally.\n3. Mutable `_user`/`_group` — Keep mutable copies in State, not `widget.user`/`widget.group`. Update from SDK listeners for block/kick/scope changes.\n\n---\n\n## Pattern 3: Thread Screen\n\nThread replies pushed from `onThreadRepliesClick`. Same Scaffold rules apply.\n\n```dart\nclass ThreadScreen extends StatelessWidget {\n  final User? user;\n  final Group? group;\n  final BaseMessage message;\n  final CometChatMessageTemplate? template;\n\n  const ThreadScreen({\n    super.key, this.user, this.group,\n    required this.message, this.template,\n  });\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      resizeToAvoidBottomInset: false, // REQUIRED — same rule as messages\n      appBar: CometChatMessageHeader(\n        user: user, group: group,\n        onBack: () => Navigator.pop(context),\n      ),\n      body: SafeArea(\n        bottom: false,\n        child: Column(\n          children: [\n            CometChatThreadedHeader(\n              parentMessage: message,\n              loggedInUser: CometChatUIKit.loggedInUser!,\n              template: template,\n            ),\n            Expanded(\n              child: CometChatMessageList(\n                user: user, group: group,\n                parentMessageId: message.id,\n                hideReplyInThreadOption: true,\n              ),\n            ),\n            CometChatMessageComposer(\n              user: user, group: group,\n              parentMessageId: message.id,\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\nWire it from the messages screen:\n```dart\nCometChatMessageList(\n  onThreadRepliesClick: (message, ctx, {template}) {\n    Navigator.push(context, MaterialPageRoute(\n      builder: (_) => ThreadScreen(\n        user: _user, group: _group,\n        message: message, template: template,\n      ),\n    ));\n  },\n)\n```\n\n---\n\n## Pattern 4: Modal / Bottom Sheet Chat\n\nQuick chat access from any screen without full navigation.\n\n```dart\nvoid _openChatModal(BuildContext context, User user) {\n  showModalBottomSheet(\n    context: context,\n    isScrollControlled: true,\n    useSafeArea: true,\n    builder: (_) => SizedBox(\n      height: MediaQuery.sizeOf(context).height * 0.85,\n      child: Scaffold(\n        resizeToAvoidBottomInset: false, // Still required!\n        appBar: CometChatMessageHeader(\n          user: user,\n          onBack: () => Navigator.pop(context),\n        ),\n        body: Column(\n          children: [\n            Expanded(child: CometChatMessageList(user: user)),\n            CometChatMessageComposer(user: user),\n          ],\n        ),\n      ),\n    ),\n  );\n}\n```\n\n**Key details:**\n- `isScrollControlled: true` — allows the sheet to be taller than half screen\n- `useSafeArea: true` — respects notch/status bar\n- Inner `Scaffold` still needs `resizeToAvoidBottomInset: false`\n- Use `MediaQuery.sizeOf(context)` not `MediaQuery.of(context).size`\n\n---\n\n## Pattern 5: Embedded Panel\n\nChat embedded alongside other content (e.g., split view on tablets).\n\n```dart\nclass SplitView extends StatelessWidget {\n  final User user;\n  const SplitView({super.key, required this.user});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      resizeToAvoidBottomInset: false,\n      body: Row(\n        children: [\n          // Left: your app content\n          Expanded(flex: 3, child: YourProductPage()),\n          // Right: embedded chat\n          Expanded(\n            flex: 2,\n            child: Column(\n              children: [\n                CometChatMessageHeader(user: user),\n                Expanded(child: CometChatMessageList(user: user)),\n                CometChatMessageComposer(user: user),\n              ],\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n---\n\n## Pattern 6: Floating Action Button → Chat\n\n```dart\nScaffold(\n  body: YourMainContent(),\n  floatingActionButton: FloatingActionButton(\n    onPressed: () => _openChatModal(context, supportUser),\n    child: const Icon(Icons.chat),\n  ),\n)\n```\n\n---\n\n## Incoming Calls — Global Placement\n\nIncoming call handling MUST be at the app root level, not per-screen. Use `VoipCallHandler` or mount the call overlay in `MaterialApp.builder`:\n\n```dart\n// In main.dart — before runApp\nVoipCallHandler.instance.init();\n\n// Or in MaterialApp builder for overlay approach\nMaterialApp(\n  builder: (context, child) {\n    return Stack(children: [\n      child!,\n      // Global incoming call overlay\n    ]);\n  },\n)\n```\n\n---\n\n## Anti-Patterns\n\n```dart\n// ❌ WRONG — resizeToAvoidBottomInset not set (defaults to true)\nScaffold(\n  body: Column(children: [\n    Expanded(child: CometChatMessageList(user: user)),\n    CometChatMessageComposer(user: user),\n  ]),\n)\n\n// ❌ WRONG — passing widget.user directly (stale after block/kick)\nCometChatMessageList(user: widget.user)\n\n// ❌ WRONG — incoming call handler only on messages screen\n// Calls ring on ALL screens, not just the one with call buttons\n\n// ❌ WRONG — navigating to messages without extracting user/group\nonItemTap: (conv) => Navigator.push(context, MaterialPageRoute(\n  builder: (_) => MessagesScreen(conversation: conv), // Wrong!\n))\n\n// ✅ CORRECT — extract user/group from conversation\nonItemTap: (conv) {\n  final user = conv.conversationWith is User ? conv.conversationWith as User : null;\n  final group = conv.conversationWith is Group ? conv.conversationWith as Group : null;\n  Navigator.push(context, MaterialPageRoute(\n    builder: (_) => MessagesScreen(user: user, group: group),\n  ));\n}\n```\n\n---\n\n## Checklist\n\n- [ ] `resizeToAvoidBottomInset: false` on every Scaffold with `CometChatMessageComposer`\n- [ ] `SafeArea(bottom: false)` when using composer (it handles safe area internally)\n- [ ] Mutable `_user`/`_group` state copies, not `widget.user`/`widget.group`\n- [ ] `onItemTap` extracts `User`/`Group` from `conversation.conversationWith`\n- [ ] Protected groups handled (check `group.hasJoined` and `group.type`)\n- [ ] Incoming call handler mounted at app root level\n- [ ] Thread screen also has `resizeToAvoidBottomInset: false`\n- [ ] `hideAppbar: true` when parent provides its own AppBar\n- [ ] `IndexedStack` used for tab-based home (preserves tab state)","tags":["cometchat","flutter","placement","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-flutter-v6-placement","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-flutter-v6-placement","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (11,323 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:51.869Z","embedding":null,"createdAt":"2026-05-07T13:05:11.798Z","updatedAt":"2026-05-18T19:04:51.869Z","lastSeenAt":"2026-05-18T19:04:51.869Z","tsv":"'0':196,210 '0.85':698 '1':158,221,492 '2':228,381,515,807 '3':240,526,546,799 '4':664 '5':755 '6':823 'access':671 'action':143,825 'aliv':345 'allow':727 'alongsid':760 'also':1048 'anti':895 'anti-pattern':894 'app':16,53,96,176,795,853,1043 'appbar':363,456,597,705,1059 'appli':557 'approach':881 'area':473,524,1015 'assert':410 'avail':87 'bar':740 'base':22,99,131,161,1065 'basemessag':570 'block/kick':923 'block/kick/scope':543 'bodi':156,204,465,606,712,790,830,906 'bottom':122,467,471,517,522,608,666,1007 'bottomnavigationbar':165,251,252 'bottomnavigationbaritem':264,271,278,285 'bottomnavigationbartype.fixed':261 'bottomsheet':126 'build':199,445,585,783 'buildcontext':200,294,324,446,586,681,784 'builder':333,653,692,878,883,959,992 'button':144,826,946 'call':134,222,277,843,847,865,892,929,935,945,1039 'calllog':137 'caus':511 'chang':544 'chat':30,270,668,670,758,804,827 'check':1034 'checklist':998 'child':474,478,610,621,699,716,800,808,815,838,885,889,910 'children':208,476,612,714,792,810,888,908 'class':179,190,395,419,559,769 'code':59 'column':475,611,713,809,907 'cometchat':2,12,42,49,66,77 'cometchat-flutter-v6-components':76 'cometchat-flutter-v6-core':65 'cometchat-flutter-v6-placement':1 'cometchatcalllog':224 'cometchatconvers':104,124,153,212 'cometchatgroup':242 'cometchatmessagecompos':484,500,631,720,819,914,1005 'cometchatmessagehead':457,598,706,811 'cometchatmessagelist':479,622,645,717,816,911,924 'cometchatmessagetempl':573 'cometchatthreadedhead':613 'cometchatuikit.loggedinuser':617 'cometchatus':230 'common':164 'communiti':128 'compens':514 'complet':58 'compon':80,82,94,357 'compos':453,469,502,520,1011 'configur':40 'const':183,263,405,575,776,839 'content':762,796 'context':201,218,236,248,295,317,325,331,447,464,587,605,651,682,686,687,696,711,749,752,785,836,884,957,990 'conv':955,962,970 'conv.conversationwith':973,976,982,985 'convers':136,211,216,219,296,297,961,968 'conversation.conversationwith':300,303,309,312,369,1030 'conversation/user/group':392 'copi':436,532,1021 'core':69 'correct':964 'cover':17 'createst':188,417 'critic':489 'ctx':648 'currentindex':195,207,253,254,258 'dart':178,394,558,644,678,768,828,869,897 'dashboard':119 'decid':8 'default':902 'detail':340,724 'direct':920 'doubl':513 'double-compens':512 'e.g':763 'embed':33,756,759,803 'everi':1002 'expand':477,620,715,797,805,814,909 'explor':149 'extend':181,192,397,421,561,771 'extract':365,952,965,1026 'fab':146 'fals':451,468,494,518,591,609,702,746,789,1000,1008,1051 'fetch':349 'final':298,307,399,402,563,566,569,572,773,971,980 'five':54 'flex':798,806 'float':36,142,824 'floatingactionbutton':832,833 'flutter':3,15,43,52,67,78 'full':101,676 'global':844,890 'group':139,241,246,249,250,291,308,311,314,320,321,328,329,337,338,367,371,403,404,413,427,428,441,460,461,482,483,487,488,529,567,568,601,602,625,626,634,635,657,658,981,984,987,996,997,1019,1028,1032 'group.hasjoined':1035 'group.type':1037 'half':734 'handl':454,470,507,521,848,1013,1033 'handler':930,1040 'height':694,697 'helpdesk':141 'hideappbar':213,225,231,243,353,1052 'hidereplyinthreadopt':629 'home':23,100,132,151,162,1066 'homescreen':180,184 'homescreenst':189,191 'icon':265,266,272,273,279,280,286,287,840 'icons.call':274 'icons.chat':267,841 'icons.people':288 'icons.person':281 'includ':38 'incom':842,846,891,928,1038 'index':206 'indexedstack':24,103,135,167,205,341,1060 'init':71 'initst':431 'inner':741 'int':194 'intent':91 'intern':505,525,1016 'isscrollcontrol':688,725 'item':262 'join/password':374 'keep':342,530 'key':339,723 'keyboard':455,508 'label':269,276,283,290 'late':423,426 'left':793 'level':855,1045 'listen':440,541 'log':223 'loggedinus':616 'login':72 'main.dart':871 'mandatori':495 'marketplac':107 'master':175 'materialapp':877,882 'materialapp.builder':868 'materialpagerout':332,652,958,991 'mediaquery.of':751 'mediaquery.sizeof':695,748 'messag':26,95,105,116,379,382,387,571,596,615,642,647,659,660,933,950 'message.id':628,637 'messagesscreen':334,396,406,960,993 'messagesscreenst':418,420 'modal':120,145,665 'modal/bottom':28 'mount':863,1041 'must':849 'mutabl':435,527,531,1017 'name':83 'navig':377,677,948 'navigator.pop':463,604,710 'navigator.push':25,109,330,384,650,956,989 'need':372,744 'notch/status':739 'null':306,315,412,414,979,988 'onback':462,603,709 'one':943 'onitemtap':215,233,245,364,954,969,1025 'onpress':834 'ontap':255 'onthreadrepliesclick':553,646 'openchat':217,293 'openchatmod':680,835 'outlin':268,275,282,289 'overlay':32,866,880,893 'overrid':186,197,415,429,443,583,781 'page':112,152 'panel':34,757 'parent':359,1055 'parentmessag':614 'parentmessageid':627,636 'pass':918 'pattern':19,55,93,157,380,545,663,754,822,896 'per':858 'per-screen':857 'placement':5,18,45,88,845 'platform':108 'preserv':169,1067 'product':111 'prop':85 'protect':370,1031 'provid':361,1056 'push':389,551 'pushmessag':235,247,316,323 'put':11,48 'quick':669 're':348 're-fetch':347 'read':64,75 'recommend':89,92 'replac':150 'repli':550 'requir':452,580,592,704,779 'resizetoavoidbottomi':41 'resizetoavoidbottominset':450,493,590,701,745,788,899,999,1050 'respect':738 'return':202,448,588,786,886 'right':802 'ring':936 'root':854,1044 'row':791 'rule':74,491,556,594 'runapp':873 'saa':118 'safe':472,523,1014 'safearea':466,516,607,1006 'scaffold':39,155,203,360,449,490,498,555,589,700,742,787,829,905,1003 'screen':27,102,106,117,375,383,388,548,643,674,735,859,934,939,1047 'sdk':439,540 'set':509,901 'setstat':257 'sheet':29,123,667,729 'showmodalbottomsheet':147,685 'singl':114 'single-thread':113 'size':753 'sizedbox':693 'skill':63 'skill-cometchat-flutter-v6-placement' 'sliverspac':504 'social':127 'source-cometchat' 'split':764 'splitview':770,777 'stack':887 'stale':921 'standard':386 'state':171,187,193,416,422,534,1020,1069 'statefulwidget':182,398 'statelesswidget':562,772 'still':703,743 'super.initstate':432 'super.key':185,407,577,778 'support':140 'supportus':837 'switch':351 'tab':21,98,130,160,170,209,220,227,239,344,352,1064,1068 'tab-bas':20,97,129,159,1063 'tablet':767 'taller':732 'tap':393 'templat':574,618,619,649,661,662 'this.group':409,579 'this.message':581 'this.template':582 'this.user':408,578,780 'thread':31,115,547,549,1046 'threadscreen':560,576,654 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'true':214,226,232,244,354,510,630,689,691,726,737,904,1053 'type':260 'uikit':44 'updat':437,538 'use':6,61,177,503,747,860,1010,1061 'user':90,138,229,234,237,238,284,299,302,305,318,319,326,327,335,336,366,400,401,411,424,425,433,458,459,480,481,485,486,528,564,565,599,600,623,624,632,633,655,656,683,684,707,708,718,719,721,722,774,775,812,813,817,818,820,821,912,913,915,916,925,972,975,978,994,995,1018,1027 'user/group':953,966 'usesafearea':690,736 'v6':4,68,79 'view':765 'void':292,322,430,679 'voipcallhandl':861 'voipcallhandler.instance.init':874 'widget':37,198,444,584,782 'widget.group':442,537,1024 'widget.user':434,536,919,926,1023 'wire':638 'without':675,951 'wrong':898,917,927,947,963 'yourmaincont':831 'yourproductpag':801","prices":[{"id":"c96c5ab8-a02b-4bcd-afa2-fb298a111409","listingId":"e97df468-84cb-4557-84b4-f43083588748","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:11.798Z"}],"sources":[{"listingId":"e97df468-84cb-4557-84b4-f43083588748","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-flutter-v6-placement","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v6-placement","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:11.798Z","lastSeenAt":"2026-05-18T19:04:51.869Z"}],"details":{"listingId":"e97df468-84cb-4557-84b4-f43083588748","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-flutter-v6-placement","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"82cf59fe887f876a94ef18c4e13d1acf77ef1f86","skill_md_path":"skills/cometchat-flutter-v6-placement/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v6-placement"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-flutter-v6-placement","license":"MIT","description":"Use when deciding WHERE to put CometChat in a Flutter app. Covers placement patterns: tab-based home (IndexedStack), Navigator.push messages screen, modal/bottom sheet chat, thread overlay, embedded panel, and floating widget. Includes Scaffold configuration, resizeToAvoidBottomInset, SafeArea, and keyboard-aware spacing patterns. Triggers on \"add chat to my app\", \"where to put chat\", \"messages screen layout\", \"tab bar with chat\", \"chat in modal\", \"chat in drawer\", \"embedded chat\", \"Scaffold layout\", or \"keyboard handling\".","compatibility":"cometchat_chat_uikit ^6.0.0-beta2; flutter >=2.5.0"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-flutter-v6-placement"},"updatedAt":"2026-05-18T19:04:51.869Z"}}