flutter – is there a way to communicate to server without any delay

i am trying to create an chat system with the backend of laravel but the problem is how can i listen to the incoming messange and send message without showing loading spinner to the page

this is how i tried to fetch message from api and store in my model

 static Future<Message?> getMessage(BuildContext context) async {
    String? token;
    SharedPreferences prefs = await SharedPreferences.getInstance();
    final userData = prefs.getString("userData");
    if (userData != null) {
      token = jsonDecode(userData)['token'];
    }
    try {
      final apiUrl = ApiRoute().getChat();
      final response = await http.get(Uri.parse(apiUrl!), headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer $token"
      });
      if (response.statusCode == 200) {
        print("This is response ${response.body}");
        return messageFromJson(response.body);
      } else if (response.statusCode == 403) {
        AlertBox().AlertBox403(context);
      } else if (response.statusCode == 400) {
        AlertBox().AlertBox400(context);
      } else if (response.statusCode == 401) {
        AlertBox().AlertBox401(context);
      } else if (response.statusCode == 500) {
        AlertBox().servererror(context);
      } else if (response.statusCode == 503) {
        AlertBox().servererror(context);
      } else {
        AlertBox().universalAlertBox(context);
      }
    } catch (e) {
      rethrow;
    }
  }

this is the function to send message to server

  static Future<String?> sendMessage(
      String? message, List<File> galleryImages, BuildContext context) async {
    int? userId;
    String? token;
    SharedPreferences prefs = await SharedPreferences.getInstance();
    final userData = prefs.getString("userData");
    if (userData != null) {
      userId = jsonDecode(userData)['user_id'];
      token = jsonDecode(userData)['token'];
    }
    try {
      final apiUrl = ApiRoute().chat(userId, message);
      http.MultipartRequest request =
          http.MultipartRequest("POST", Uri.parse(apiUrl!));
      Map<String, String> jsonData = {
        "Content-Type": "multipart/form-data",
        "Authorization": "Bearer $token"
      };

      for (int i = 0; i < galleryImages.length; i++) {
        FileImage(File(galleryImages[i].path.toString()))
            .file
            .readAsBytesSync();
        request.files.add(await http.MultipartFile.fromPath(
            'files[]', galleryImages[i].path,
            contentType: MediaType("image", "jpeg")));
      }
      request.headers.addAll(jsonData);
      request.fields['message'] = message!;
      request.fields['user_id'] = userId.toString();

      http.StreamedResponse response = await request.send();
      response.stream.transform(utf8.decoder).listen((event) {});

      if (response.statusCode == 200) {
        print("Success");
      } else if (response.statusCode == 403) {
        AlertBox().AlertBox403(context);
      } else if (response.statusCode == 400) {
        AlertBox().AlertBox400(context);
      } else if (response.statusCode == 401) {
        AlertBox().AlertBox401(context);
      } else if (response.statusCode == 500) {
        AlertBox().servererror(context);
      } else if (response.statusCode == 503) {
        AlertBox().servererror(context);
      } else {
        AlertBox().universalAlertBox(context);
      }
    } catch (e) {
      rethrow;
    }
  }

this is my controller for both send and reveive message

class MessageController extends GetxController {
  var isLoading = true.obs;
  Message? messageData;

  Future<String?> sendMessage(
      String? message, List<File> galleryImages, BuildContext context) async {
    try {
      isLoading(true);
      return await Services.sendMessage(message, galleryImages, context);
    } finally {
      isLoading(false);
    }
  }

  Future<Message?> getMessageData(BuildContext context) async {
    try {
      isLoading(true);
      messageData = await Services.getMessage(context);
      return messageData;
    } finally {
      isLoading(false);
    }
  }
}

this is my screen

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      // _timerForInter = Timer.periodic(Duration(seconds: 2), (result) {
      fetchApiData();
      // });
      getUserId();
    });
  }

List<String?> messages = [];
  MessageController mC = Get.put(MessageController());
  fetchApiData() async {
    try {
      final result = await InternetAddress.lookup("example.com");
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        print("connected");
        await mC.getMessageData(context).whenComplete(() {
          setState(() {
            messages.clear();
            mC.messageData!.message;
            for (int i = 0; i < mC.messageData!.message!.length; i++) {
              messages.add(mC.messageData!.message![i].message);
            }
          });
        });
      }
    } on SocketException catch (_) {
      print("Not connected");
      showSnackBar();
    }
  }


Column(mainAxisAlignment: MainAxisAlignment.start, children: [
        Obx(() {
          if (mC.isLoading.value) {
            return Expanded(child: LinearProgressIndicator());
          } else {
            return Expanded(
              child: SingleChildScrollView(
                reverse: true,
                child: ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: messages.length,
                    itemBuilder: (ctx, i) {
                      return Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 15.0, left: 15),
                            child: Row(
                              children: [
                                // mC.messageData!.message![i].admin != null &&
                                // mC.messageData!.message![i].to == 0 &&
                                mC.messageData!.message![i].isRead == 0
                                    ? Container(
                                        alignment: Alignment.topLeft,
                                        child: Column(
                                          children: [
                                            Container(
                                              constraints: BoxConstraints(
                                                  maxWidth:
                                                      MediaQuery.of(context)
                                                              .size
                                                              .width *
                                                          0.60),
                                              decoration: BoxDecoration(
                                                  color: Colors.grey.shade400,
                                                  borderRadius:
                                                      const BorderRadius.all(
                                                          Radius.circular(5))),
                                              child: Padding(
                                                padding: EdgeInsets.only(
                                                    top: 8.0,
                                                    left: 8,
                                                    right: 8,
                                                    bottom: 5),
                                                child: Text(
                                                  '${messages[i]}',
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 18),
                                                ),
                                              ),
                                            ),
                                            Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.end,
                                              children: [
                                                Text(
                                                    "${mC.messageData!.message![i].createdAt.toString().split(" ")[0]} "),
                                                Padding(
                                                  padding: EdgeInsets.symmetric(
                                                      vertical:
                                                          size.width * 0.015),
                                                  child: Text(
                                                      " - ${mC.messageData!.message![i].createdAt.toString().split(" ")[1].split(".")[0]}"),
                                                )
                                              ],
                                            )
                                          ],
                                        ),
                                      )
                                    : Container(),
                                const SizedBox(
                                  width: 10,
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          mC.messageData!.message![i].from == userId
                              ? Column(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Container(
                                      constraints: BoxConstraints(
                                          maxWidth: MediaQuery.of(context)
                                                  .size
                                                  .width *
                                              0.60),
                                      decoration: BoxDecoration(
                                          color: Colors.blue,
                                          borderRadius: const BorderRadius.all(
                                              Radius.circular(5))),
                                      child: Padding(
                                        padding: EdgeInsets.only(
                                            top: 8.0,
                                            left: 8,
                                            right: 8,
                                            bottom: 5),
                                        child: Text(
                                          '${messages[i]}',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 18),
                                        ),
                                      ),
                                    ),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: [
                                        Text(
                                            "${mC.messageData!.message![i].createdAt.toString().split(" ")[0]} "),
                                        Padding(
                                          padding: EdgeInsets.symmetric(
                                              vertical: size.width * 0.015),
                                          child: Text(
                                              " - ${mC.messageData!.message![i].createdAt.toString().split(" ")[1].split(".")[0]}"),
                                        )
                                      ],
                                    )
                                  ],
                                )
                              : Container()
                        ],
                      );
                    }),
              ),
            );
          }
        }),
        BottomAppBar(
          child: Padding(
            padding: const EdgeInsets.only(right: 10.0, left: 5),
            child: Container(
              alignment: Alignment.bottomCenter,
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              height: 45,
              child: TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Padding(
                      padding: const EdgeInsets.all(8),
                      child: GestureDetector(
                        onTap: () {
                          openBottomSheet(context);
                        },
                        child: Container(
                            decoration: const BoxDecoration(
                              shape: BoxShape.circle,
                              color: Color(0xff8F3F97),
                            ),
                            child: const Icon(
                              Icons.add,
                              color: Colors.white,
                            )),
                      ),
                    ),
                    suffixIcon: const Icon(
                      Icons.emoji_emotions,
                      color: Colors.grey,
                      size: 28,
                    ),
                    contentPadding: const EdgeInsets.only(top: 5, left: 55),
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none,
                      borderRadius: BorderRadius.circular(25.0),
                    ),
                    hintText: 'Type a message',
                    hintStyle:
                        const TextStyle(fontSize: 16, color: Colors.black45)),
                textCapitalization: TextCapitalization.sentences,
                controller: messageController,
                onFieldSubmitted: (value) async {
                  try {
                    final result = await InternetAddress.lookup("example.com");
                    if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
                      setState(() {
                        mC.sendMessage(
                            messageController.text, imageFileList, context);
                        fetchApiData();
                        messageController.text = "";
                      });
                    }
                  } on SocketException catch (_) {
                    showSnackBar();
                  }
                },
              ),
            ),
          ),
        ),
      ]),

is there a way to continously listen to server and send message to server without showing loading spinner. I am trying to build chat app like messanger but i am stuck here and dont know what i can do to achieve that need some help thanks

Leave a Comment