Regarding Chat Screen
83 views
Skip to first unread message
HIMANSHU MISHRA
Jun 16, 2021, 1:35:06 AM6/16/21
to Flutter Development (flutter-dev)
Dear All,
I have attached the ScreenShot Chat Screen of my App. Now I want to Add Feature of WhatsApp(Grouping of Messages according to Date). In this App I have used Buuble Package. Everything is working fine. I have also attached the code as well.
Now please guide me to do add Date Wise Chat Messages on Screen Like WhatsApp.
If there is any plugin please let me know
import 'dart:convert';
import 'package:conqer_music/App/Model/APIUrl.dart';
import 'package:conqer_music/App/Model/PrayerData.dart';
import 'package:http/http.dart' as http;
import 'package:conqer_music/App/Model/User.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:bubble/bubble.dart';
import 'package:date_format/date_format.dart';
import 'package:roundcheckbox/roundcheckbox.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:swipe_to/swipe_to.dart';
class PrayerLinePage extends StatefulWidget {
static const String routeName = '/prayerLinePage';
@override
_PrayerLinePageState createState() => _PrayerLinePageState();
}
class _PrayerLinePageState extends State<PrayerLinePage> {
TextEditingController messageController = TextEditingController();
late FocusNode messageFocus;
String apiURL = APIUrl().stagingURl;
String isAnonymous = '';
String userID = '';
String userFullName = '';
bool anonymous = false;
String userProfilePic = '';
@override
void initState() {
super.initState();
readData();
}
readData() async {
final prefs = await SharedPreferences.getInstance();
final userId = prefs.getString('userId') ?? '';
final userName = prefs.getString('userName') ?? '';
final userPic = prefs.getString('userPic') ?? '';
setState(() {
userID = userId;
userFullName = userName;
userProfilePic = userPic;
});
}
Future<List<PrayerData>> prayerList() async {
final response = await http.get(Uri.parse(apiURL));
if (response.statusCode == 200) {
Map data = jsonDecode(response.body); //Yahan Data Aa Rha Hai
List apiData = data['res_data'];
print(apiData);
return apiData.map((e) => new PrayerData.fromJson(e)).toList();
} else {
throw Exception('Failed to load data from API');
}
}
Future<User> sendPrayerRequest() async {
onLoading();
// String uID = userID;
String userMessage = messageController.text.trim();
print('IsAnony ' + isAnonymous);
final response = await http.post(
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, String>{
'user_id': userID,
'anonymus': isAnonymous,
'message': userMessage,
}),
);
if (response.statusCode == 200) {
Navigator.pop(context);
setState(() {
Map data = jsonDecode(response.body);
String resStatus = data['res_status'];
print(resStatus);
if (resStatus == '200') {
} else {
// showUpdateProfileFailed(context);
}
});
return User.fromJson(jsonDecode(response.body));
} else {
throw Exception('Login Failed...');
}
}
showMessageTextFieldAlert(BuildContext context) {
// Create button
// ignore: deprecated_member_use
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
content: Text("Please Enter the Message"),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
onLoading() {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Center(
child: Container(
height: 50,
width: 50,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new CircularProgressIndicator(
backgroundColor: Color(0xFFbaa15e),
),
// new Text("Loading..."),
],
),
),
);
},
);
}
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
final screenWidgth = MediaQuery.of(context).size.height;
Widget sendMessage() {
return Container(
child: Column(
children: [
Container(
padding: EdgeInsets.only(top: 10),
width: screenWidgth * 0.6,
child: TextFormField(
textInputAction: TextInputAction.next,
controller: messageController,
decoration: InputDecoration(
isDense: true,
hintText: 'Prayer Request',
contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
filled: true,
suffixStyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white),
fillColor: Color(0xFFbaa15e),
hintStyle: TextStyle(
color: Colors.white,
),
suffixIcon: IconButton(
tooltip: 'Send Request',
icon: Icon(Icons.play_circle_outline_sharp),
color: Colors.white,
iconSize: 30,
onPressed: () {
if (messageController.text == '') {
showMessageTextFieldAlert(context);
} else {
sendPrayerRequest();
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
messageController.clear();
}
}
}),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
style: TextStyle(
color: Colors.white,
fontSize: 14,
textBaseline: TextBaseline.alphabetic),
),
),
Row(
children: [
Expanded(
flex: 0,
child: Checkbox(
checkColor: Colors.black,
activeColor: Colors.white,
value: anonymous,
onChanged: (value) {
setState(() {
anonymous = value!;
if (anonymous.toString() == 'false') {
isAnonymous = '0';
} else {
isAnonymous = '1';
}
});
},
)
// RoundCheckBox(
// onTap: (selected) {
// setState(() {
// if (anonymous == '0') {
// anonymous = '1';
// } else {
// anonymous = '0';
// }
// });
// },
// size: 14,
// uncheckedColor: Colors.white,
// checkedColor: Colors.black,
// ),
// Radio(
// focusColor: Colors.black,
// value: 0,
// groupValue: anonymous,
// // activeColor: Color(0xFF6200EE),
// onChanged: (var x) {
// setState(() {
// x = '1';
// anonymous = x.toString();
// });
// })
),
Expanded(
flex: 1,
child: Text(
'Anonymous',
style: TextStyle(color: Colors.white),
)),
],
),
],
),
);
}
Widget prayerListData(String id, String name, String message,
String anonymous, String userpic, String msgdate) {
DateTime msgdt = DateTime.parse(msgdate);
// final msgDateTime =
// formatDate(msgdt, [mm, '-', dd, '-', yy, ' ', HH, ':', mm]);
String msgDateTime = DateFormat(' hh:mm a').format(msgdt);
if (id.toString() == userID) {
return SingleChildScrollView(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
anonymous == '0'
? CircleAvatar(
backgroundImage: NetworkImage(
apiURL + userpic.substring(2),
),
backgroundColor: Colors.transparent,
radius: 22.0,
)
: CircleAvatar(
backgroundImage: AssetImage(
'lib/App/Assets/Images/Anonymous.png',
),
backgroundColor: Colors.transparent,
radius: 22.0,
),
SizedBox(
width: 5,
),
SwipeTo(
onRightSwipe: () {},
child: Bubble(
// alignment: Alignment.topLeft,
radius: Radius.elliptical(5.0, 8.0),
padding: BubbleEdges.all(5),
nip: id.toString() == userID
? BubbleNip.leftTop
: BubbleNip.rightTop, // nip: BubbleNip.rightBottom,
color: id.toString() == userID
? Color(0xFFbaa15e)
: Colors.white,
child: Text(
message + ' ' + msgDateTime,
textAlign: TextAlign.justify,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: (id.toString() == userID
? Colors.white
: Color(0xFFbaa15e)),
fontSize: 10),
),
),
),
],
),
),
);
} else {
return SingleChildScrollView(
child: Container(
width: screenWidgth,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
// crossAxisAlignment: id.toString() == userID
// ? CrossAxisAlignment.end
// : CrossAxisAlignment.start,
children: <Widget>[
// SizedBox(
// width: 10,
// ),
SwipeTo(
onRightSwipe: () => {},
child: Bubble(
// margin: BubbleEdges.only(top: 8, left: 50),
alignment: Alignment.topRight,
radius: Radius.elliptical(5.0, 8.0),
padding: BubbleEdges.all(5),
nip: id.toString() == userID
? BubbleNip.leftTop
: BubbleNip.rightTop, // nip: BubbleNip.rightBottom,
color: id.toString() == userID
? Color(0xFFbaa15e)
: Colors.white,
child: Wrap(
direction: Axis.horizontal,
children: [
Text(
'Ive been having a problem with my computer. Please see it. I am very tensed. I have a lot of work to do...',
// message + ' ' + msgDateTime,
maxLines: 3,
textAlign: TextAlign.justify,
overflow: TextOverflow.ellipsis,
softWrap: true,
style: TextStyle(
color: (id.toString() == userID
? Colors.white
: Color(0xFFbaa15e)),
fontSize: 10),
),
// SizedBox(
// height: 5,
// ),
// Align(
// alignment: Alignment.bottomRight,
// child: Text(
// msgDateTime,
// style: TextStyle(
// fontSize: 9,
// color: (id.toString() == userID
// ? Colors.white
// : Color(0xFFbaa15e))),
// ),
// )
],
),
),
),
SizedBox(
width: 5,
),
anonymous == '0'
? CircleAvatar(
backgroundImage: NetworkImage(
apiURL + userpic.substring(2),
),
backgroundColor: Colors.transparent,
radius: 22.0,
)
: CircleAvatar(
backgroundImage: AssetImage(
'lib/App/Assets/Images/Anonymous.png',
),
backgroundColor: Colors.transparent,
radius: 22.0,
),
],
),
),
);
}
}
showNetworkAlert(BuildContext context) {
// Create button
// ignore: deprecated_member_use
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: Text("Alert"),
content: Text("Please check the network"),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
ListView prayerData(List<PrayerData> data) {
return ListView.builder(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(top: 10, bottom: 10),
itemCount: data.length,
itemBuilder: (context, index) {
return prayerListData(
data[index].userid,
data[index].username,
data[index].message,
data[index].anonymus,
data[index].userpic,
data[index].msgdate);
},
);
}
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
height: screenHeight * 1.3,
width: screenWidgth,
child: Column(
children: [
sendMessage(),
Expanded(
child: FutureBuilder<List<PrayerData>>(
future: prayerList(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
List<PrayerData> data = snapshot.data;
return prayerData(data);
} else if (snapshot.hasError) {
return Container(
child: showNetworkAlert(context),
);
}
return Center(
child: Container(
height: 50,
width: 50,
child: CircularProgressIndicator()));
},
),
),
],
),
),
);
}
}
--
Thanks and Regards
HIMANSHU MISHRA
Benedicte Roussel
Jun 16, 2021, 6:28:46 AM6/16/21
to HIMANSHU MISHRA, Flutter Development (flutter-dev)
DateTime ... timestamp
Le mer., juin 16, 2021 à 7:35, HIMANSHU MISHRA<himansh...@gmail.com> a écrit:
--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAJySXU-NW%3DqaCEA-6cP2qqt0hVgCpS9aTFtLp0R3pCaLtFV8Yw%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages