new chat screen

android/app/build.gradle

@@ -34,7 +34,7 @@ android {
  defaultConfig {
  // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
  applicationId "com.iotecksolutions.todoapp"
- minSdkVersion 16
+ minSdkVersion 19
  targetSdkVersion 33
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

lib/constants/app_theme.dart

@@ -113,10 +113,10 @@ class AppThemeData {
  headlineSmall: GoogleFonts.roboto(fontWeight: _medium, fontSize: 16.0),
  titleMedium: GoogleFonts.roboto(fontWeight: _medium, fontSize: 16.0),
  labelSmall: GoogleFonts.roboto(fontWeight: _medium, fontSize: 12.0),
- bodyLarge: GoogleFonts.roboto(fontWeight: _regular, fontSize: 14.0),
+ bodyLarge: GoogleFonts.roboto(fontWeight: _regular, fontSize: 18.0),
  titleSmall: GoogleFonts.roboto(fontWeight: _medium, fontSize: 14.0),
  bodyMedium: GoogleFonts.roboto(fontWeight: _regular, fontSize: 16.0),
- titleLarge: GoogleFonts.roboto(fontWeight: _bold, fontSize: 16.0),
+ titleLarge: GoogleFonts.roboto(fontWeight: _bold, fontSize: 20.0),
  labelLarge: GoogleFonts.roboto(fontWeight: _semiBold, fontSize: 14.0),
  );
 }

lib/core/widgets/chat_input.dart

@@ -0,0 +1,134 @@
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/foundation.dart' as foundation;
+import 'package:flutter/material.dart';
+
+/// Example for EmojiPickerFlutter
+class ChatInput extends StatefulWidget {
+ final Function onSend;
+ const ChatInput({super.key, required this.onSend});
+
+ @override
+ ChatInputState createState() => ChatInputState();
+}
+
+class ChatInputState extends State<ChatInput> {
+ final TextEditingController _controller = TextEditingController();
+ bool emojiShowing = false;
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ _onBackspacePressed() {
+ _controller
+ ..text = _controller.text.characters.toString()
+ ..selection = TextSelection.fromPosition(
+ TextPosition(offset: _controller.text.length));
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ children: [
+ Container(
+ height: 66.0,
+ color: Colors.transparent,
+ child: Row(
+ children: [
+ Material(
+ color: Colors.transparent,
+ child: IconButton(
+ splashRadius: 20,
+ onPressed: () {
+ setState(() {
+ emojiShowing = !emojiShowing;
+ });
+ },
+ icon: Icon(
+ Icons.emoji_emotions,
+ color: Theme.of(context).colorScheme.primary,
+ ),
+ ),
+ ),
+ Expanded(
+ child: Padding(
+ padding: const EdgeInsets.symmetric(vertical: 8.0),
+ child: TextField(
+ controller: _controller,
+ style: Theme.of(context).textTheme.bodyLarge,
+ decoration: InputDecoration(
+ hintText: 'Message',
+ filled: true,
+ fillColor: Theme.of(context).colorScheme.surface,
+ contentPadding: const EdgeInsets.only(
+ left: 16.0, bottom: 8.0, top: 8.0, right: 16.0),
+ border: OutlineInputBorder(
+ borderRadius: BorderRadius.circular(50.0),
+ ),
+ )),
+ ),
+ ),
+ Material(
+ color: Colors.transparent,
+ child: IconButton(
+ splashRadius: 20,
+ onPressed: () {
+ // send message
+ widget.onSend(_controller.text);
+ _controller.text = '';
+ },
+ icon: Icon(
+ Icons.send,
+ color: Theme.of(context).colorScheme.primary,
+ )),
+ )
+ ],
+ )),
+ Offstage(
+ offstage: !emojiShowing,
+ child: SizedBox(
+ height: 250,
+ child: EmojiPicker(
+ textEditingController: _controller,
+ onBackspacePressed: _onBackspacePressed,
+ config: Config(
+ columns: 7,
+ // Issue: https://github.com/flutter/flutter/issues/28894
+ emojiSizeMax: 32 *
+ (foundation.defaultTargetPlatform == TargetPlatform.iOS
+ ? 1.30
+ : 1.0),
+ verticalSpacing: 0,
+ horizontalSpacing: 0,
+ gridPadding: EdgeInsets.zero,
+ initCategory: Category.RECENT,
+ bgColor: Theme.of(context).colorScheme.background,
+ indicatorColor: Theme.of(context).colorScheme.primary,
+ iconColor: Colors.grey,
+ iconColorSelected: Theme.of(context).colorScheme.primary,
+ backspaceColor: Theme.of(context).colorScheme.primary,
+ skinToneDialogBgColor: Colors.white,
+ skinToneIndicatorColor: Colors.grey,
+ enableSkinTones: true,
+ recentTabBehavior: RecentTabBehavior.RECENT,
+ recentsLimit: 28,
+ replaceEmojiOnLimitExceed: false,
+ noRecents: const Text(
+ 'No Recents',
+ style: TextStyle(fontSize: 20, color: Colors.black26),
+ textAlign: TextAlign.center,
+ ),
+ loadingIndicator: const SizedBox.shrink(),
+ tabIndicatorAnimDuration: kTabScrollDuration,
+ categoryIcons: const CategoryIcons(),
+ buttonMode: ButtonMode.MATERIAL,
+ checkPlatformCompatibility: true,
+ ),
+ )),
+ ),
+ ],
+ );
+ }
+}

lib/presentation/home/home_screen.dart

@@ -1,5 +1,6 @@
 import 'package:boilerplate/core/widgets/main_app_bar.dart';
 import 'package:boilerplate/core/widgets/main_drawer.dart';
+import 'package:boilerplate/presentation/new_chat/new_chat_screen.dart';
 import 'package:flutter/material.dart';
 
 class HomeScreen extends StatelessWidget {
@@ -13,6 +14,7 @@ class HomeScreen extends StatelessWidget {
  child: MainAppBar(),
  ),
  drawer: MainDrawer(),
+ body: NewChatScreen(),
  );
  }
 }

lib/presentation/new_chat/new_chat_screen.dart

@@ -1,5 +1,6 @@
-import 'package:boilerplate/core/widgets/main_app_bar.dart';
+import 'package:boilerplate/core/widgets/chat_input.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class NewChatScreen extends StatefulWidget {
  const NewChatScreen({super.key});
@@ -11,11 +12,52 @@ class NewChatScreen extends StatefulWidget {
 class _NewChatScreenState extends State<NewChatScreen> {
  @override
  Widget build(BuildContext context) {
- return Scaffold(
- appBar: PreferredSize(
- preferredSize: Size.fromHeight(60),
- child: MainAppBar(),
- ),
+ return Column(
+ mainAxisSize: MainAxisSize.max,
+ children: [
+ Expanded(
+ child: Center(
+ child: Transform.translate(
+ offset: Offset(0, -20),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Container(
+ padding: const EdgeInsets.all(10),
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Theme.of(context).colorScheme.surface,
+ border: Border.all(
+ color: Theme.of(context).colorScheme.primary,
+ width: 1,
+ ),
+ ),
+ child: SvgPicture.asset(
+ 'assets/icons/logo.svg',
+ semanticsLabel: 'ChatGPT logo',
+ width: 50,
+ height: 50,
+ ),
+ ),
+ const SizedBox(
+ height: 10,
+ ),
+ Text(
+ 'How can I help you today?',
+ style: Theme.of(context).textTheme.titleLarge,
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ Align(
+ alignment: Alignment.bottomCenter,
+ child: ChatInput(
+ onSend: () {},
+ ),
+ ),
+ ],
  );
  }
 }

linux/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,10 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <emoji_picker_flutter/emoji_picker_flutter_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
+ g_autoptr(FlPluginRegistrar) emoji_picker_flutter_registrar =
+ fl_plugin_registry_get_registrar_for_plugin(registry, "EmojiPickerFlutterPlugin");
+ emoji_picker_flutter_plugin_register_with_registrar(emoji_picker_flutter_registrar);
 }

linux/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+ emoji_picker_flutter
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,10 +5,12 @@
 import FlutterMacOS
 import Foundation
 
+import emoji_picker_flutter
 import path_provider_foundation
 import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+ EmojiPickerFlutterPlugin.register(with: registry.registrar(forPlugin: "EmojiPickerFlutterPlugin"))
  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
 }

pubspec.yaml

@@ -63,6 +63,8 @@ dependencies:
  xxtea: ^2.1.0
  json_annotation: ^4.8.1
  font_awesome_flutter: ^10.6.0
+ flutter_svg: ^2.0.9
+ emoji_picker_flutter: ^1.6.3
  # Y
  # Z
 

windows/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,9 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <emoji_picker_flutter/emoji_picker_flutter_plugin_c_api.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
+ EmojiPickerFlutterPluginCApiRegisterWithRegistrar(
+ registry->GetRegistrarForPlugin("EmojiPickerFlutterPluginCApi"));
 }

windows/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+ emoji_picker_flutter
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST