Quickly complete an IM front-end project with Flutter

The goal is to achieve a simple IM chat tool, personal access to Tencent IM, cloud IM, the effect is also ok, suffering from fees, itself with a small number of users, so the UI map, let a day or two to write, really don’t know what to think.

1. The login page and chat page are simple. It was done in no time
2. Dialog box to achieve text sending, basically according to the UI restore (send voice, send pictures to be done) specific effect a put APK bar

The shelves: apps.apple.com/cn/app/auto…

// Define a mock message body
List<Map> item = [
     {"my": 0."text": "I love you."},
     {"my": 1."text": "Do you love me too?"},
     {"my": 0."text": "I love you."},];// The controller of SingleChildScrollView scrolls to the bottom of the message after sending it
ScrollController _controller = ScrollController();
// Input box controller
TextEditingController textEditingController = new TextEditingController();

int state = 0; // 0 displays nothing temporary data 1 displays emoticons 2 more

bool showKeyboard = false; // Not displayed by default

// Integrate with WidgetsBindingObserver
/ / in the WidgetsBinding initState binding. The instance. AddObserver (this);
/ / _controller. Position. MaxScrollExtent / / maximum can scroll range

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        _controller.jumpTo(_controller.position.maxScrollExtent);
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          _controller.jumpTo(_controller.position.maxScrollExtent);
          print("Close the keyboard");
          if(state ! =0) {
            setState(() {
              showKeyboard = true; }); }}else {
          print("Display keyboard");
          // Display keyboard
          if(showKeyboard ! =false) {
            setState(() {
              showKeyboard = false; }); }}}}); }Copy the code

In the build

// Scroll to the bottom after the first entry, adding a delay to prevent scrolling before loading is complete
if (item.length > 0) {
      Timer(Duration(milliseconds: 100),
          () => _controller.jumpTo(_controller.position.maxScrollExtent));
    }
// Bottom menu input box
// Using bottomSheet,SafeArea is not easy to control if you don't use the profiled screen
// Use the carriage return event from the TextField input field to simulate message sending
onSubmitted: (value) {
                      contentNode.requestFocus();
                      textEditingController.text = "";
                      item.add({"my": 0."text": value});
                      item.add({"my": 1."text": "I love you."});
                      setState(() {});
},

// Use one outside of the body
InkResponse(onTap: () {
          setState(() {
            state = 0;
            showKeyboard = false;
          });
          FocusScope.of(context).unfocus();
})
// At the bottom of the body
if (showKeyboard) // Save the placeholder or you won't be able to scroll to the point
                Container(
                  width: 1.sw,
                  height: 200.w,
                  color: Color(0xFFFFFFFF),Copy the code

3. Address book page, using a friend list similar to QQ

  // The simulated data
  List<Map<dynamic.dynamic>> map = [
    {
      "name": "Default group"."childrend": ["Li Yao"."Dija Altman."."Thero Altman."] {},"name": "Auto Parts Supplier"."childrend": ["Fake boss"."Real boss".Ed Sheeran."Boss Sun"] {},"name": "Auto mechanic."."childrend": ["Tech 1"."Tech 2"."Tech 3"."Tech 4"] {},"name": "Nearby repair shop."."childrend": ["Garage No. 1"."Garage 2"."Garage Number three."."Garage 4"]]},// ExpansionItem (s) may not ExpansionItem (s). // ExpansionItem (s) may not ExpansionItem (s)

   for (int i = 0; i < map.length; i++)
                ExpansionItem(
                  expandedAlignment: Alignment.topLeft,
                  title: child,
                  backgroundColor: Colors.white,
                  tilePadding: EdgeInsets.symmetric(horizontal: 16.w),
                  childrenPadding:
                      EdgeInsets.only(left: 16.w, right: 16.w, bottom: 17.w),
                  children: <Widget>[
                      // own style],),Copy the code

• Other pages too lazy to sort out, specific download APP experience, is the company’s project, simple sorting out the function points.
• APP is a static page at present, just log in, and it is being improved

Cardata-gudain.oss-cn-beijing.aliyuncs.com/app-release…

If you have any questions, you can add wechat to communicate with d0_pub