Facing issues while making chat real time using apis flutter - flutter

Question

Hi Im developing chat app in flutter having sql backend. Web developers have provide me apis for sending and receiveing messages. The app is working fine, the issue is its not so real time, like it take time to send message and after that i have to manually call set state to get new message. So is there any way to make chat real using apis in flutter?
I am writing following code to implement this:
Widget _getUI(BuildContext context) {
return FutureProvider.value(
value: _services.getUserMessages(
context, widget.chatUserList.chatConnectionID),
builder: (context, child) {
print("Called");
return Container(
child: context.watch<List<MessagesModel>>() == null
? LoadingWidget()
: Column(
children: [
Expanded(
child: Container(
child: ListView.builder(
controller: _scrollController,
itemCount:
context.watch<List<MessagesModel>>().length,
itemBuilder: (context, i) {
Timer(
Duration(milliseconds: 300),
() => _scrollController.animateTo(
_scrollController
.position.maxScrollExtent,
duration: Duration(milliseconds: 700),
curve: Curves.ease));
return Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
child: MessageTile(
message: context
.watch<List<MessagesModel>>()[i]
.textMessage,
sendByMe: context
.watch<List<MessagesModel>>()[i]
.chatReceiverTypeId !=
userModel.patientID,
time: context
.watch<List<MessagesModel>>()[i]
.createdDate,
),
);
}),
),
),
Container(
alignment: Alignment.bottomCenter,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 24, vertical: 10),
child: Row(
children: [
Expanded(
child: TextField(
style:
TextStyle(color: Colors.black, fontSize: 13),
controller: messageController,
onChanged: (val) {
setState(() {});
},
decoration: InputDecoration(
hintText: "Type Here...",
hintStyle: TextStyle(
color: Colors.black,
fontSize: 13,
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide.none),
border: OutlineInputBorder(
borderSide: BorderSide.none)),
)),
SizedBox(
width: 16,
),
IconButton(
onPressed: () async {
if (messageController.text.isEmpty) {
return;
}
Timer(
Duration(milliseconds: 300),
() => _scrollController.animateTo(
_scrollController
.position.maxScrollExtent,
duration: Duration(milliseconds: 700),
curve: Curves.ease));
await _services.createMessage(context,
model: MessageComposerModel(
senderId: userModel.patientID,
senderTypeId: 2,
message: messageController.text,
receiverId:
widget.chatUserList.doctorID,
receiverTypeId: 1,
chatConnectionId: widget
.chatUserList.chatConnectionID,
lastInsertedMessageID: 0));
if (Provider.of<AppState>(context,
listen: false)
.getStateStatus() ==
AppCurrentState.IsFree) {
messageController.clear();
}
setState(() {});
},
icon: Icon(
Icons.send,
color: messageController.text.isEmpty
? Colors.grey
: Colors.black,
),
)
],
),
),
)
],
),
);
},
);
}
And my services call look like this:
Future<void> createMessage(BuildContext context,
{MessageComposerModel model, String authToken}) async {
try {
return await http.post(
Uri.parse(BackendConfigs.apiBaseUrl + "/api/Chat/SendChatMessage"),
body: json.encode(model.toJson()),
headers: {
'Authorization': 'Bearer $authToken',
'Content-Type': 'application/json'
},
).then((response) {
if (response.statusCode == 201 || response.statusCode == 200) {
Provider.of<AppState>(context, listen: false)
.stateStatus(AppCurrentState.IsFree);
print(response.body);
// return SuccessResponseModel.fromJson(json.decode(response.body));
} else {
Provider.of<AppState>(context, listen: false)
.stateStatus(AppCurrentState.IsFree);
Provider.of<ErrorString>(context, listen: false)
.saveErrorString(response.reasonPhrase);
}
});
} on HttpException catch (e) {
Provider.of<AppState>(context, listen: false)
.stateStatus(AppCurrentState.IsError);
Provider.of<ErrorString>(context, listen: false)
.saveErrorString(e.message);
rethrow;
}
}