How To Show Asynchronous Data in the Flutter Mention List?

ashut08 commented 2 years ago

Here is the code which i using in one of my projects .

`import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_mentions/flutter_mentions.dart';
import 'package:sportsshare/src/controller/mentions_hastags_controller/mention_user_hastgs_controller.dart';

class MentionHashtagTextField extends StatefulWidget {
  MentionHashtagTextField(
      {Key? key,
      required this.mentionKey,
      required this.suggestionPosition,
      required this.defaultText})
      : super(key: key);
  GlobalKey<FlutterMentionsState> mentionKey;
  SuggestionPosition suggestionPosition;
  String defaultText;
  @override
  State<MentionHashtagTextField> createState() =>
      _MentionHashtagTextFieldState();
}

class _MentionHashtagTextFieldState extends State<MentionHashtagTextField> {
  List<Map<String, dynamic>> mentiondata = []; **//initialize mention data here**

  bool isDataLoading = true;
  String nonHashvalue = "";
  Timer? _debounce;
  GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();

  @override
  Widget build(BuildContext context) {
    return FlutterMentions(
      onMentionAdd: (Map<String, dynamic> map) {},

      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: widget.defaultText,
      ),
      style: const TextStyle(fontSize: 16, color: Colors.black),
      onSearchChanged: (String trigger, String value) {

        if (trigger == "@") {
          if (_debounce?.isActive ?? false) _debounce!.cancel();
          _debounce = Timer(const Duration(milliseconds: 200), () {
            MentionUserHashTagController.getMentionUser(userName: value).then(
              (data) {

**//call the  api  and update the mentiondata to build mention list** 
                for (var element in data) {
                  setState(() {

                    mentiondata.add({
                      "username": element.profilepic,
                      "id": element.userid,
                      "name": element.name,
                      "display": element.username ?? ""
                    });

                    isDataLoading = false;
                  });
                  print(mentiondata.length);
                }
              },
            );
          });
        }
      },
      key: widget.mentionKey,
      suggestionPosition: widget.suggestionPosition,
      maxLines: 5,
      minLines: 1,
      // decoration: const InputDecoration(hintText: 'hello'),
      mentions: [
        Mention(
            trigger: '@',
            disableMarkup: false,
            style: const TextStyle(color: Colors.blue),
            markupBuilder: ((trigger, mention, id) {
              return "@[__${mention}__]";
            }),
            data: mentiondata.reversed.toList(),
            matchAll: true,
            suggestionBuilder: (data) {
              return Container(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  children: <Widget>[
                    CircleAvatar(
                      backgroundImage: NetworkImage(
                        data['username'],
                      ),
                    ),
                    const SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(data['name']),
                        Text('@${data['display']}'),
                      ],
                    )
                  ],
                ),
              );
            }),

      ],
    );
  }
}
`

amr1tv1rd1 commented 2 years ago

Here is the code which i using in one of my projects .

`import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_mentions/flutter_mentions.dart';
import 'package:sportsshare/src/controller/mentions_hastags_controller/mention_user_hastgs_controller.dart';

class MentionHashtagTextField extends StatefulWidget {
  MentionHashtagTextField(
      {Key? key,
      required this.mentionKey,
      required this.suggestionPosition,
      required this.defaultText})
      : super(key: key);
  GlobalKey<FlutterMentionsState> mentionKey;
  SuggestionPosition suggestionPosition;
  String defaultText;
  @override
  State<MentionHashtagTextField> createState() =>
      _MentionHashtagTextFieldState();
}

class _MentionHashtagTextFieldState extends State<MentionHashtagTextField> {
  List<Map<String, dynamic>> mentiondata = []; **//initialize mention data here**

  bool isDataLoading = true;
  String nonHashvalue = "";
  Timer? _debounce;
  GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();

  @override
  Widget build(BuildContext context) {
    return FlutterMentions(
      onMentionAdd: (Map<String, dynamic> map) {},

      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: widget.defaultText,
      ),
      style: const TextStyle(fontSize: 16, color: Colors.black),
      onSearchChanged: (String trigger, String value) {

        if (trigger == "@") {
          if (_debounce?.isActive ?? false) _debounce!.cancel();
          _debounce = Timer(const Duration(milliseconds: 200), () {
            MentionUserHashTagController.getMentionUser(userName: value).then(
              (data) {

**//call the  api  and update the mentiondata to build mention list** 
                for (var element in data) {
                  setState(() {

                    mentiondata.add({
                      "username": element.profilepic,
                      "id": element.userid,
                      "name": element.name,
                      "display": element.username ?? ""
                    });

                    isDataLoading = false;
                  });
                  print(mentiondata.length);
                }
              },
            );
          });
        }
      },
      key: widget.mentionKey,
      suggestionPosition: widget.suggestionPosition,
      maxLines: 5,
      minLines: 1,
      // decoration: const InputDecoration(hintText: 'hello'),
      mentions: [
        Mention(
            trigger: '@',
            disableMarkup: false,
            style: const TextStyle(color: Colors.blue),
            markupBuilder: ((trigger, mention, id) {
              return "@[__${mention}__]";
            }),
            data: mentiondata.reversed.toList(),
            matchAll: true,
            suggestionBuilder: (data) {
              return Container(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  children: <Widget>[
                    CircleAvatar(
                      backgroundImage: NetworkImage(
                        data['username'],
                      ),
                    ),
                    const SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(data['name']),
                        Text('@${data['display']}'),
                      ],
                    )
                  ],
                ),
              );
            }),

      ],
    );
  }
}
`

Thanks, it worked like a charm 👍

holkarsanyukta commented 2 years ago

Here is the code which i using in one of my projects .

`import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_mentions/flutter_mentions.dart';
import 'package:sportsshare/src/controller/mentions_hastags_controller/mention_user_hastgs_controller.dart';

class MentionHashtagTextField extends StatefulWidget {
  MentionHashtagTextField(
      {Key? key,
      required this.mentionKey,
      required this.suggestionPosition,
      required this.defaultText})
      : super(key: key);
  GlobalKey<FlutterMentionsState> mentionKey;
  SuggestionPosition suggestionPosition;
  String defaultText;
  @override
  State<MentionHashtagTextField> createState() =>
      _MentionHashtagTextFieldState();
}

class _MentionHashtagTextFieldState extends State<MentionHashtagTextField> {
  List<Map<String, dynamic>> mentiondata = []; **//initialize mention data here**

  bool isDataLoading = true;
  String nonHashvalue = "";
  Timer? _debounce;
  GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();

  @override
  Widget build(BuildContext context) {
    return FlutterMentions(
      onMentionAdd: (Map<String, dynamic> map) {},

      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: widget.defaultText,
      ),
      style: const TextStyle(fontSize: 16, color: Colors.black),
      onSearchChanged: (String trigger, String value) {

        if (trigger == "@") {
          if (_debounce?.isActive ?? false) _debounce!.cancel();
          _debounce = Timer(const Duration(milliseconds: 200), () {
            MentionUserHashTagController.getMentionUser(userName: value).then(
              (data) {

**//call the  api  and update the mentiondata to build mention list** 
                for (var element in data) {
                  setState(() {

                    mentiondata.add({
                      "username": element.profilepic,
                      "id": element.userid,
                      "name": element.name,
                      "display": element.username ?? ""
                    });

                    isDataLoading = false;
                  });
                  print(mentiondata.length);
                }
              },
            );
          });
        }
      },
      key: widget.mentionKey,
      suggestionPosition: widget.suggestionPosition,
      maxLines: 5,
      minLines: 1,
      // decoration: const InputDecoration(hintText: 'hello'),
      mentions: [
        Mention(
            trigger: '@',
            disableMarkup: false,
            style: const TextStyle(color: Colors.blue),
            markupBuilder: ((trigger, mention, id) {
              return "@[__${mention}__]";
            }),
            data: mentiondata.reversed.toList(),
            matchAll: true,
            suggestionBuilder: (data) {
              return Container(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  children: <Widget>[
                    CircleAvatar(
                      backgroundImage: NetworkImage(
                        data['username'],
                      ),
                    ),
                    const SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(data['name']),
                        Text('@${data['display']}'),
                      ],
                    )
                  ],
                ),
              );
            }),

      ],
    );
  }
}
`

Thank you for this.

fayeed / flutter_mentions

How To Show Asynchronous Data in the Flutter Mention List? #80