Skip to content

feat: chat input text area with sent button #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivang-git wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: chat input text area with sent button #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cdbf41
app_name
shivang-git May 13, 2024
a83889f
chat-input
shivang-git May 13, 2024
3fae29b
Chat-box-Added
shivang-git May 13, 2024
746631f
bug-fixes
shivang-git May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion android/app/src/main/AndroidManifest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="test_app"
android:label="Looper"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<activity
Expand Down
4 changes: 2 additions & 2 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:test_app/screens/HomePage.dart';
import 'package:looper/screens/HomePage.dart';

void main() {
runApp(const MyApp());
Expand All @@ -12,7 +12,7 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
title: 'Looper',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
Expand Down
116 changes: 81 additions & 35 deletions lib/screens/ChatPage.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ class ChatPage extends StatefulWidget {
}

class _ChatPageState extends State<ChatPage> {
final TextEditingController _messageController = TextEditingController();
final ScrollController _scrollController = ScrollController();

@override
void initState() {
super.initState();
Expand All @@ -20,6 +22,19 @@ class _ChatPageState extends State<ChatPage> {
});
}

void _sendMessage() {
String message = _messageController.text.trim();
if (message.isNotEmpty) {
messages.add({"message": message, "sent": true});
_messageController.clear();
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn,
);
}
}

List<Map> messages = [
{
"message": "Hola!",
Expand Down Expand Up @@ -122,44 +137,75 @@ class _ChatPageState extends State<ChatPage> {
),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
controller: _scrollController,
itemCount: messages.length,
itemBuilder: (context, index) {
int previous = index - 1 >= 0 ? index - 1 : 0;
int current = index;
return Padding(
padding: messages[previous]["sent"] == messages[current]["sent"]
? const EdgeInsets.only(left: 8, right: 8, top: 4)
: const EdgeInsets.only(left: 8, right: 8, top: 8),
child: Align(
alignment: messages[index]["sent"]
? Alignment.centerRight
: Alignment.centerLeft,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: messages[index]["sent"]
? Colors.amber[200]
: Colors.blue[200],
),
child: Padding(
padding: const EdgeInsets.all(10),
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.8,
),
child: Text(
messages[index]["message"],
style: const TextStyle(fontSize: 18),
padding: const EdgeInsets.fromLTRB(5, 10, 5, 5),
child: Column(
children: [
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: messages.length,
itemBuilder: (context, index) {
int previous = index - 1 >= 0 ? index - 1 : 0;
int current = index;
return Padding(
padding: messages[previous]["sent"] ==
messages[current]["sent"]
? const EdgeInsets.only(left: 8, right: 8, top: 4)
: const EdgeInsets.only(left: 8, right: 8, top: 8),
child: Align(
alignment: messages[index]["sent"]
? Alignment.centerRight
: Alignment.centerLeft,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: messages[index]["sent"]
? Colors.amber[200]
: Colors.blue[200],
),
child: Padding(
padding: const EdgeInsets.all(10),
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width * 0.8,
),
child: Text(
messages[index]["message"],
style: const TextStyle(fontSize: 18),
),
),
),
),
),
),
),
);
}),
),
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 7, 0, 0),
child: TextField(
controller: _messageController,
decoration: InputDecoration(
hintText: "Message",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
)),
),
IconButton(
icon: const Icon(Icons.send_rounded),
onPressed: () {
_sendMessage();
},
),
);
}),
],
),
],
),
),
);
}
Expand Down
18 changes: 9 additions & 9 deletions lib/screens/HomePage.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// ignore_for_file: file_names

import 'package:flutter/material.dart';
import 'package:test_app/screens/ChatPage.dart';
import 'package:looper/screens/ChatPage.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});
Expand Down Expand Up @@ -81,35 +81,35 @@ class _HomePageState extends State<HomePage> {
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("What's UP"),
const Text("Looper"),
Row(
children: [
Icon(Icons.search),
const Icon(Icons.search),
PopupMenuButton<String>(
onSelected: (value) => {print(value)},
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[
PopupMenuItem(
const PopupMenuItem(
value: "New Group",
child: Text("New Group"),
),
PopupMenuItem(
const PopupMenuItem(
value: "New Broadcast",
child: Text("New Broadcast"),
),
PopupMenuItem(
const PopupMenuItem(
value: "Linked devices",
child: Text("Linked devices"),
),
PopupMenuItem(
const PopupMenuItem(
value: "Starred message",
child: Text("Starred message"),
),
PopupMenuItem(
const PopupMenuItem(
value: "Payment",
child: Text("Payment"),
),
PopupMenuItem(
const PopupMenuItem(
value: "Settings",
child: Text("Settings"),
),
Expand Down
4 changes: 2 additions & 2 deletions pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: test_app
description: "A new Flutter project."
name: looper
description: " Conversations that never stop."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
Expand Down