Флаттер создает экран чата для получения или отправки сообщений в api

#api #flutter #chat

#API #флаттер #Чат

Вопрос:

У меня здесь 2 проблемы.

  1. когда я набираю сообщение в текстовом поле, чем закрываю клавиатуру без отправки сообщения, текст, написанный автоматически, стирается.
  2. Я не получаю сообщения в реальном времени от api при перезагрузке экрана, чем после получения всех сообщений. Я хочу отправлять или получать сообщения в режиме реального времени. Примечание: я использую два API для отправки сообщений И получения сообщений. Для отправки сообщений вызывается API при нажатии кнопки отправки.
 import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:application1/modals/msgdisplay.dart';
import 'package:application1/modals/msgsend.dart';
import 'package:application1/services/api.dart';
import 'package:application1/widgets/bottombar.dart';
import 'package:application1/widgets/sizeconfig.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'package:web_socket_channel/web_socket_channel.dart';

// ignore: must_be_immutable
class PersonalChat1 extends StatefulWidget {
  String userid, username, userphoto;
  PersonalChat1(this.userid, this.username, this.userphoto, {Key key})
      : super(key: key);
  @override
  _PersonalChat1State createState() => _PersonalChat1State();
}

Future<String> getNamePreference() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String id = prefs.getString("id");
  return id;
}

Future<Msgsend> msgSend(String regid, String userid, String sid, String msgtext,
    String msgimage) async {
  final String apiUrl = url   'msg_insert.php';
  final response = await http.post(apiUrl, headers: {
    'Accept': 'application/json'
  }, body: {
    "regid": regid,
    "user_id": userid,
    "subcategory_id": sid,
    "msg_text": msgtext,
    "msg_image": msgimage,
  });
  print(response.statusCode);
  if (response.statusCode == 200) {
    final String responseString = response.body;
    print(responseString);
    return msgsendFromJson(responseString);
  } else {
    return null;
  }
}

List<MsgDisplay> _msgLists = List<MsgDisplay>();
Future<List<MsgDisplay>> msgList(String regid, String uid, String sid) async {
  final String apiUrl = url   'display_msg.php';
  final response = await http.post(apiUrl, headers: {
    'Accept': 'application/json'
  }, body: {
    "regid": regid,
    "uid": uid,
    "sid": sid,
  });
  var msgList = List<MsgDisplay>();
  // print(response.statusCode);
  if (response.statusCode == 200) {
    var responseString = json.decode(response.body);
    print(responseString);
    for (var user in responseString["server"]) {
      msgList.add(MsgDisplay.fromJson(user));
    }
  } else {
    return null;
  }
  return msgList;
}

class _PersonalChat1State extends State<PersonalChat1> {
  String _id = '';
  // Timer timer;
  @override
  void initState() {
    super.initState();
    getNamePreference().then((String id) {
      setState(() {
        this._id = id;
      });
      msgList(_id, widget.userid, "0").then((value) {
        setState(() {
          _msgLists.clear();
          _msgLists.addAll(value);
        });
      });
      // timer = Timer.periodic(
      //   Duration(seconds: 1),
      //   (Timer t) => addValue(),
      // );
      print(_id);
    });
  }

  // void addValue() {
  //   setState(() {
  //     msgList(_id, widget.userid, "0").then((value) {
  //       _msgLists.clear();
  //       _msgLists.addAll(value);
  //     });
  //   });
  // }

  // setUpTimedFetch() async {
  //   Timer.periodic(Duration(seconds: 1), (timer) {
  //     msgList(_id, widget.userid, "0").then((value) {
  //       setState(() {
  //         _msgLists.clear();
  //         _msgLists.addAll(value);
  //       });
  //     });
  //   });
  // }

  // @override
  // void dispose() {
  //   timer?.cancel();
  //   super.dispose();
  // }

  @override
  Widget build(BuildContext context) {
    final FocusNode _msgFocus = FocusNode();
    TextEditingController _msg = TextEditingController();
    ScrollController _scrollController = ScrollController();
    final GlobalKey<FormState> _formkey = GlobalKey<FormState>();
    SizeConfig().init(context);
    File _image;
    final picker = ImagePicker();
    // Size size = MediaQuery.of(context).size;
    return WillPopScope(
      onWillPop: () async {
        Navigator.of(context).pop();
        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          //  backgroundColor: Colors.white,
          leading: InkWell(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              child: Padding(
                padding: EdgeInsets.only(top: 8.0, left: 12),
                child: Stack(
                  children: [
                    Container(
                      // color: Colors.red,
                      width: 60.0,
                      height: 60.0,
                      // margin: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(widget.userphoto),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 32.0),
                      child: Container(
                        // color: Colors.red,
                        width: 15.0,
                        height: 15.0,
                        // margin: EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                          color: Colors.orange,
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          title: Padding(
            padding: const EdgeInsets.all(8.0),
            child: InkWell(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      widget.username,
                      style: TextStyle(
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                        fontSize: 20,
                      ),
                    ),
                    Text(
                      "Online",
                      style: TextStyle(
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                        fontSize: 15,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          actions: <Widget>[
            IconButton(
              icon: SvgPicture.asset(
                'assets/icons/notification/options.svg',
                color: Colors.white,
              ),
              onPressed: () {
                print('Click start');
              },
            ),
          ],
        ),
        body: SafeArea(
          child: Stack(
            fit: StackFit.loose,
            children: [
              Column(
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Text("data"),
                  // SizedBox(
                  //   height: 50,
                  // ),
                  Flexible(
                    fit: FlexFit.tight,
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      // height: SizeConfig.safeBlockVertical * 80,
                      child: SingleChildScrollView(
                        controller: _scrollController,
                        child: ListView.builder(
                          shrinkWrap: true,
                          // reverse: true,
                          physics: ClampingScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          itemCount: _msgLists.length,
                          itemBuilder: (context, index) {
                            return Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                SizedBox(
                                  height: 10,
                                ),
                                _msgLists[index].senderId == _id
                                    ? Row(
                                        children: [
                                          Expanded(
                                            child: Container(),
                                          ),
                                          Expanded(
                                            child: Container(
                                              child: Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                mainAxisAlignment:
                                                    MainAxisAlignment.end,
                                                children: [
                                                  Flexible(
                                                    child: Container(
                                                      // width: 300.0,
                                                      // height: 300.0,
                                                      decoration: BoxDecoration(
                                                        border: Border.all(
                                                          color: Colors.black,
                                                        ),
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(16.0),
                                                      ),
                                                      child: Padding(
                                                        padding:
                                                            const EdgeInsets
                                                                .all(8.0),
                                                        child: Text(
                                                          _msgLists[index]
                                                              .msgText,
                                                          style: TextStyle(
                                                            color: Colors.black,
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.all(
                                                            8.0),
                                                    child: Column(
                                                      children: [
                                                        Container(
                                                          // color: Colors.red,
                                                          width: 60.0,
                                                          height: 60.0,
                                                          // margin: EdgeInsets.all(8.0),
                                                          decoration:
                                                              BoxDecoration(
                                                            shape:
                                                                BoxShape.circle,
                                                            image:
                                                                DecorationImage(
                                                              fit: BoxFit.fill,
                                                              image: NetworkImage(
                                                                  widget
                                                                      .userphoto),
                                                            ),
                                                          ),
                                                        ),
                                                        Text(DateFormat.Hm()
                                                            .format(_msgLists[
                                                                    index]
                                                                .chatDateTime)),
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      )
                                    : Row(
                                        children: [
                                          Expanded(
                                            child: Container(
                                              child: Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                children: [
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.all(
                                                            8.0),
                                                    child: Column(
                                                      children: [
                                                        Container(
                                                          // color: Colors.red,
                                                          width: 60.0,
                                                          height: 60.0,
                                                          // margin: EdgeInsets.all(8.0),
                                                          decoration:
                                                              BoxDecoration(
                                                            shape:
                                                                BoxShape.circle,
                                                            image:
                                                                DecorationImage(
                                                              fit: BoxFit.fill,
                                                              image: NetworkImage(
                                                                  widget
                                                                      .userphoto),
                                                            ),
                                                          ),
                                                        ),
                                                        Text(DateFormat.Hm()
                                                            .format(_msgLists[
                                                                    index]
                                                                .chatDateTime)),
                                                      ],
                                                    ),
                                                  ),
                                                  Flexible(
                                                    child: Container(
                                                      // width: 300.0,
                                                      // height: 300.0,
                                                      decoration: BoxDecoration(
                                                        border: Border.all(
                                                          color: Colors.black,
                                                        ),
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(16.0),
                                                      ),
                                                      child: Padding(
                                                        padding:
                                                            const EdgeInsets
                                                                .all(8.0),
                                                        child: Text(
                                                          _msgLists[index]
                                                              .msgText,
                                                          style: TextStyle(
                                                            color: Colors.black,
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                          Expanded(
                                            child: Container(),
                                          ),
                                        ],
                                      ),
                              ],
                            );
                          },
                        ),
                      ),
                    ),
                  ),

                  Container(
                    height: 50,
                    child: Row(
                      children: [
                        Expanded(
                          flex: 6,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: Container(
                              height: 50,
                              child: Form(
                                // key: _formkey,
                                child: TextFormField(
                                  textInputAction: TextInputAction.newline,
                                  // focusNode: _msgFocus,
                                  keyboardType: TextInputType.multiline,
                                  controller: _msg,
                                  style: TextStyle(
                                    fontSize: 20,
                                    color: Colors.blue[900],
                                    letterSpacing: 1,
                                  ),
                                  autofocus: false,
                                  decoration: InputDecoration(
                                    // border: InputBorder.none,
                                    prefixIcon: Padding(
                                      padding: const EdgeInsets.fromLTRB(
                                          8.0, 10.0, 8.0, 8.0),
                                      child: SvgPicture.asset(
                                        'assets/icons/personalchat/emoji.svg',
                                        color: Colors.blueGrey[700],
                                        height: 20,
                                        width: 20,
                                      ),
                                    ),
                                    suffixIcon: InkWell(
                                      onTap: () async {
                                        final image = await picker.getImage(
                                            source: ImageSource.gallery);
                                        setState(() {
                                          _image = File(image.path);
                                        });
                                      },
                                      child: Container(
                                        child: Padding(
                                          padding: const EdgeInsets.fromLTRB(
                                              8.0, 10.0, 8.0, 8.0),
                                          child: SvgPicture.asset(
                                            'assets/icons/personalchat/link.svg',
                                            height: 20,
                                            width: 20,
                                          ),
                                        ),
                                      ),
                                    ),
                                    enabledBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(8.0),
                                      ),
                                      borderSide: BorderSide(
                                        color: Colors.grey[400],
                                      ),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(8.0),
                                      ),
                                      borderSide: BorderSide(
                                        color: Colors.indigo[500],
                                      ),
                                    ),
                                    // errorBorder: OutlineInputBorder(
                                    //   borderRadius: BorderRadius.all(
                                    //     Radius.circular(5.0),
                                    //   ),
                                    //   borderSide: BorderSide(
                                    //     color: Colors.red[900],
                                    //   ),
                                    // ),
                                    // focusedErrorBorder: OutlineInputBorder(
                                    //   borderRadius: BorderRadius.all(
                                    //     Radius.circular(5.0),
                                    //   ),
                                    //   borderSide: BorderSide(
                                    //     color: Colors.red[900],
                                    //   ),
                                    // ),
                                    contentPadding:
                                        EdgeInsets.fromLTRB(12, 8, 12, 8),
                                    hintText: "Type a Message",
                                    hintStyle: TextStyle(
                                      fontSize: 15,
                                      // color: Colors.grey[200],
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: InkWell(
                              onTap: () async {
                                // print("send");
                                if (_msg.text != '') {
                                  final Msgsend response = await msgSend(
                                      _id, widget.userid, "0", _msg.text, "");
                                  if (response.server[0].result == 'success') {
                                    print('msg send');

                                    // setState(() {
                                    //   Navigator.of(context)
                                    //       .pushAndRemoveUntil(
                                    //           MaterialPageRoute(
                                    //             builder: (context) =>
                                    //                 PersonalChat1(
                                    //               widget.userid,
                                    //               widget.username,
                                    //               widget.userphoto,
                                    //             ),
                                    //           ),
                                    //           (Route<dynamic> route) =>
                                    //               false);
                                    // });
                                    Navigator.pushReplacement(
                                      context,
                                      MaterialPageRoute(
                                        builder: (context) => PersonalChat1(
                                            widget.userid,
                                            widget.username,
                                            widget.userphoto),
                                      ),
                                    );
                                  } else {
                                    print('error');
                                  }
                                } else {
                                  Fluttertoast.showToast(
                                      msg: "Message is Empty",
                                      backgroundColor: Colors.red,
                                      textColor: Colors.white);
                                }
                              },
                              child: Container(
                                child: SvgPicture.asset(
                                  'assets/icons/personalchat/send.svg',
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomBar(),
      ),
    );
  }
}

  

Комментарии:

1. у кого-нибудь есть решение этой проблемы?