Skip to content

Commit

Permalink
chat screen
Browse files Browse the repository at this point in the history
  • Loading branch information
Dat-TG committed Dec 10, 2023
1 parent eb16353 commit 94f8b08
Show file tree
Hide file tree
Showing 6 changed files with 322 additions and 45 deletions.
4 changes: 4 additions & 0 deletions lib/constants/app_theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -118,5 +118,9 @@ class AppThemeData {
bodyMedium: GoogleFonts.roboto(fontWeight: _regular, fontSize: 16.0),
titleLarge: GoogleFonts.roboto(fontWeight: _bold, fontSize: 20.0),
labelLarge: GoogleFonts.roboto(fontWeight: _semiBold, fontSize: 14.0),
displayMedium: GoogleFonts.roboto(
fontWeight: _regular,
fontSize: 14.0,
),
);
}
10 changes: 8 additions & 2 deletions lib/core/widgets/chat_thread.dart
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import 'dart:ffi';

import 'package:flutter/material.dart';

class ChatThread extends StatefulWidget {
final String name;
const ChatThread({Key? key, required this.name}) : super(key: key);
final VoidCallback onTap;
const ChatThread({Key? key, required this.name, required this.onTap})
: super(key: key);

@override
State<ChatThread> createState() => _ChatThreadState();
Expand Down Expand Up @@ -49,7 +53,9 @@ class _ChatThreadState extends State<ChatThread> {
},
child: ListTile(
title: Text(widget.name),
onTap: () {},
onTap: () {
widget.onTap();
},
),
);
}
Expand Down
133 changes: 113 additions & 20 deletions lib/core/widgets/main_drawer.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MainDrawer extends StatelessWidget {
const MainDrawer({super.key});
final Function setChatThreadId;
const MainDrawer({super.key, required this.setChatThreadId});

@override
Widget build(BuildContext context) {
Expand All @@ -22,30 +23,122 @@ class MainDrawer extends StatelessWidget {
),
title: Text('New chat'),
minLeadingWidth: 10,
onTap: () {},
onTap: () {
setChatThreadId(null);
},
),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: [
ChatThread(name: 'GraphQL in Flutter'),
ChatThread(name: 'REST API Explanation'),
ChatThread(name: 'Jitsi Meet in Flutter'),
ChatThread(name: 'Websockets in Flutter'),
ChatThread(name: 'ChatGPT Flutter App'),
ChatThread(name: 'GraphQL in Flutter'),
ChatThread(name: 'REST API Explanation'),
ChatThread(name: 'Jitsi Meet in Flutter'),
ChatThread(name: 'Websockets in Flutter'),
ChatThread(name: 'GraphQL in Flutter'),
ChatThread(name: 'REST API Explanation'),
ChatThread(name: 'Jitsi Meet in Flutter'),
ChatThread(name: 'Websockets in Flutter'),
ChatThread(name: 'ChatGPT Flutter App'),
ChatThread(name: 'GraphQL in Flutter'),
ChatThread(name: 'REST API Explanation'),
ChatThread(name: 'Jitsi Meet in Flutter'),
ChatThread(name: 'Websockets in Flutter'),
ChatThread(
name: 'GraphQL in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'REST API Explanation',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Jitsi Meet in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Websockets in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'ChatGPT Flutter App',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'GraphQL in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'REST API Explanation',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Jitsi Meet in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Websockets in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'GraphQL in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'REST API Explanation',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Jitsi Meet in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Websockets in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'ChatGPT Flutter App',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'GraphQL in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'REST API Explanation',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Jitsi Meet in Flutter',
onTap: () {
setChatThreadId('1');
},
),
ChatThread(
name: 'Websockets in Flutter',
onTap: () {
setChatThreadId('1');
},
),
],
),
),
Expand Down
29 changes: 9 additions & 20 deletions lib/core/widgets/progress_indicator_widget.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,17 @@ class CustomProgressIndicatorWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
height: 100,
constraints: BoxConstraints.expand(),
child: FittedBox(
fit: BoxFit.none,
child: SizedBox(
height: 100,
width: 100,
child: Card(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: CircularProgressIndicator(),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
),
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 30,
height: 30,
child: CircularProgressIndicator(
strokeWidth: 1,
color: Theme.of(context).colorScheme.primary,
),
),
decoration: BoxDecoration(
color: Color.fromARGB(100, 105, 105, 105)),
),
);
}
Expand Down
171 changes: 171 additions & 0 deletions lib/presentation/chat_screen/chat_screen.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
import 'package:boilerplate/core/widgets/chat_input.dart';
import 'package:boilerplate/core/widgets/progress_indicator_widget.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class Message {
final String content;
final bool isGPT;
final DateTime createdAt;

Message({
required this.content,
required this.isGPT,
required this.createdAt,
});
}

class ChatScreen extends StatefulWidget {
final String chatThreadId;
const ChatScreen({super.key, required this.chatThreadId});

@override
State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
int showTimeAtIndex = -1;
final ScrollController _controller = ScrollController();

void scrollToBottom() {
if (_controller.hasClients) {
_controller.jumpTo(
_controller.position.maxScrollExtent,
);
}
}

void scrollToPosition(double position) {
if (_controller.hasClients) {
_controller.jumpTo(
position,
);
}
}

List<Message> messages = [
Message(
content: 'How can I help you?', isGPT: true, createdAt: DateTime.now()),
Message(
content: 'I want to learn about Flutter',
isGPT: false,
createdAt: DateTime.now()),
Message(
content: 'What do you want to learn about Flutter?',
isGPT: true,
createdAt: DateTime.now()),
Message(
content: 'I want to learn about Bloc',
isGPT: false,
createdAt: DateTime.now()),
Message(
content: 'What do you want to learn about Bloc?',
isGPT: true,
createdAt: DateTime.now()),
Message(
content: 'I want to learn about Bloc',
isGPT: false,
createdAt: DateTime.now()),
];

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ListView.builder(
controller: _controller,
itemCount: messages.length + 1,
shrinkWrap: true,
padding: EdgeInsets.zero,
itemBuilder: (context, index) {
// if (index == state.messages?.length) {
// return (state is! ConversationDone)
// ? Center(
// child: SizedBox(
// width: 30,
// height: 30,
// child: CircularProgressIndicator(
// strokeWidth: 1.5,
// color: Theme.of(context).primaryColor,
// ),
// ),
// )
// : const SizedBox();
// }
if (index == 0) {
return CustomProgressIndicatorWidget();
}
return Container(
padding: EdgeInsets.only(
left: (messages[index - 1].isGPT) ? 14 : 56,
right: (messages[index - 1].isGPT) ? 56 : 14,
top: 10,
bottom: 10),
child: Column(
crossAxisAlignment: (messages[index - 1].isGPT)
? CrossAxisAlignment.start
: CrossAxisAlignment.end,
children: [
if (index - 1 == showTimeAtIndex)
Center(
child: Padding(
padding: const EdgeInsets.only(
bottom: 5,
),
child: Text(
DateFormat(null, 'en')
.format(messages[index - 1].createdAt),
style: Theme.of(context).textTheme.displayMedium,
),
),
),
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {
setState(() {
if (showTimeAtIndex != index - 1) {
showTimeAtIndex = index - 1;
} else {
showTimeAtIndex = -1;
}
});
},
child: Material(
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: (messages[index - 1].isGPT)
? Colors.grey.shade300
: Theme.of(context).colorScheme.primary),
padding: const EdgeInsets.only(
left: 16, right: 16, top: 16, bottom: 16),
child: Text(
messages[index - 1].content,
style: TextStyle(
color: (messages[index - 1].isGPT)
? Colors.black
: Colors.white),
),
),
),
),
],
),
);
},
),
),
ChatInput(onSend: () {}),
],
);
}
}

0 comments on commit 94f8b08

Please sign in to comment.