Skip to content

Commit

Permalink
chat messages ui
Browse files Browse the repository at this point in the history
  • Loading branch information
lohanidamodar committed Aug 19, 2019
1 parent af06821 commit fb09aa9
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ The code for Springy Widget is taken and refactored from (https://github.com/mat
<img height="480px" src="screenshots/intro4.gif"> <img height="480px" src="screenshots/onboard3.gif"> <img height="480px" src="screenshots/onboard2.gif"> <img height="480px" src="screenshots/onboarding1.gif"><img height="480px" src="screenshots/i5.gif">

## miscellaneous widgets
<img height="480px" src="screenshots/dash1.png"> <img height="480px" src="screenshots/chatui.png"> <img height="480px" src="screenshots/landing1.png"> <img height="480px" src="screenshots/form.png"> <img height="480px" src="screenshots/sliders.gif"> <img height="480px" src="screenshots/dialog2.png"> <img height="480px" src="screenshots/dialog1.png"> <img height="480px" src="screenshots/hidden_menu1.gif"> <img height="480px" src="screenshots/springy_slider.gif"> <img height="480px" src="screenshots/sliverappbar1.gif"> <img height="480px" src="screenshots/hero-animation.gif">
<img height="480px" src="screenshots/chat2.png"> <img height="480px" src="screenshots/dash1.png"> <img height="480px" src="screenshots/chatui.png"> <img height="480px" src="screenshots/landing1.png"> <img height="480px" src="screenshots/form.png"> <img height="480px" src="screenshots/sliders.gif"> <img height="480px" src="screenshots/dialog2.png"> <img height="480px" src="screenshots/dialog1.png"> <img height="480px" src="screenshots/hidden_menu1.gif"> <img height="480px" src="screenshots/springy_slider.gif"> <img height="480px" src="screenshots/sliverappbar1.gif"> <img height="480px" src="screenshots/hero-animation.gif">

## Blog

Expand Down
170 changes: 170 additions & 0 deletions lib/src/pages/misc/chat2.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
import 'dart:math';

/**
* Author: Damodar Lohani
* profile: https://github.com/lohanidamodar
*/
import 'package:flutter/material.dart';

class ChatTwoPage extends StatefulWidget {
static final String path = "lib/src/pages/misc/chat2.dart";
@override
_ChatTwoPageState createState() => _ChatTwoPageState();
}

class _ChatTwoPageState extends State<ChatTwoPage> {
String text;
TextEditingController _controller;
final List<String> avatars = [
"assets/img/1.jpg",
"assets/img/3.jpg",
];
final List<Message> messages = [
Message(0, "But I may not go if the weather is bad."),
Message(0, "I suppose I am."),
Message(1, "Are you going to market today?"),
Message(0, "I am good too"),
Message(1, "I am fine, thank you. How are you?"),
Message(1, "Hi,"),
Message(0, "How are you today?"),
Message(0, "Hello,"),
];
final rand = Random();

@override
void initState() {
super.initState();
_controller = TextEditingController();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Chat"),
),
body: Column(
children: <Widget>[
Expanded(
child: ListView.separated(
physics: BouncingScrollPhysics(),
separatorBuilder: (context, index) {
return const SizedBox(height: 10.0);
},
reverse: true,
itemCount: messages.length,
itemBuilder: (BuildContext context, int index) {
Message m = messages[index];
if (m.user == 0) return _buildMessageRow(m, current: true);
return _buildMessageRow(m, current: false);
},
),
),
_buildBottomBar(context),
],
),
);
}

Container _buildBottomBar(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16.0,
),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(30.0),
),
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 20.0,
),
child: Row(
children: <Widget>[
Expanded(
child: TextField(
textInputAction: TextInputAction.send,
controller: _controller,
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0)),
hintText: "Aa"),
onEditingComplete: _save,
),
),
IconButton(
icon: Icon(Icons.send),
color: Theme.of(context).primaryColor,
onPressed: _save,
)
],
),
);
}

_save() async {
if (_controller.text.isEmpty) return;
FocusScope.of(context).requestFocus(FocusNode());
setState(() {
messages.insert(0, Message(rand.nextInt(2), _controller.text));
_controller.clear();
});
}

Row _buildMessageRow(Message message, {bool current}) {
return Row(
mainAxisAlignment:
current ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment:
current ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: <Widget>[
SizedBox(width: current ? 30.0 : 20.0),
if (!current) ...[
CircleAvatar(
backgroundImage: AssetImage(
current ? avatars[0] : avatars[1],
),
radius: 20.0,
),
const SizedBox(width: 5.0),
],
Container(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16.0,
),
decoration: BoxDecoration(
color: current ? Theme.of(context).primaryColor : Colors.white,
borderRadius: BorderRadius.circular(10.0)),
child: Text(
message.description,
style: TextStyle(
color: current ? Colors.white : Colors.black, fontSize: 18.0),
),
),
if (current) ...[
const SizedBox(width: 5.0),
CircleAvatar(
backgroundImage: AssetImage(
current ? avatars[0] : avatars[1],
),
radius: 10.0,
),
],
SizedBox(width: current ? 20.0 : 30.0),
],
);
}
}

class Message {
final int user;
final String description;

Message(this.user, this.description);
}
3 changes: 3 additions & 0 deletions lib/src/widgets/main_menu.dart
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import 'package:flutter_ui_challenges/src/pages/login/login7.dart';
import 'package:flutter_ui_challenges/src/pages/login/login6.dart';
import 'package:flutter_ui_challenges/src/pages/login/signup2.dart';
import 'package:flutter_ui_challenges/src/pages/ecommerce/ecommerce5.dart';
import 'package:flutter_ui_challenges/src/pages/misc/chat2.dart';
import 'package:flutter_ui_challenges/src/pages/misc/chatui.dart';
import 'package:flutter_ui_challenges/src/pages/misc/dash1.dart';
import 'package:flutter_ui_challenges/src/pages/misc/navybar.dart';
Expand Down Expand Up @@ -219,6 +220,8 @@ class _MainMenuState extends State<MainMenu> {
SubMenuItem("Onboarding 5", Intro5(), path: Intro5.path),
]),
MenuItem(title: "Miscllaneous", items: [
SubMenuItem("Chat Messaages", ChatTwoPage(),
path: ChatTwoPage.path),
SubMenuItem("Dashboard One", DashboardOnePage(),
path: DashboardOnePage.path),
SubMenuItem("Form Elements", FormElementPage(),
Expand Down
Binary file added screenshots/chat2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fb09aa9

Please sign in to comment.