분류, 패키지 및 저장소 검색

mentionable_text_field 표지
패키지 상세v0.0.2

mentionable_text_field

사용자 언급 기능을 가진 사용자 정의 가능한 텍스트 필드를 생성하는 플러터 플러그인입니다. 일치하는 사용자를 표시하고 선택하는 방식은 위젯 자체와 분리되어 있어, 원하는 방식으로 선택할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
267
좋아요
35
Pub 점수
130

패키지 설치

flutter pub add mentionable_text_field

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

사용자가 텍스트 내에서 다른 사람을 태그할 수 있도록 해주는 사용자 정의 가능한 Flutter 텍스트 필드 플러그인입니다. 언급 매칭 및 표시 로직을 UI에서 분리하여 제안 사항의 표시 및 선택 방식에 유연성을 제공합니다. 채팅 또는 소셜 앱에 이상적이며, Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원합니다. 특정 UI 컴포넌트에 얽매이지 않고 언급 경험을 완전히 제어하고 싶은 개발자를 위한 것입니다.

사용 사례

  • 채팅 애플리케이션
  • 소셜 미디어 플랫폼
  • 협업 편집 도구
  • 댓글 내 사용자 태그
  • 실시간 메시징 인터페이스
  • 멘션을 포함한 콘텐츠 생성

주요 기능

  • 분리된 언급 표시 및 선택
  • 사용자 지정 가능한 제안 UI
  • 크로스 플랫폼 지원
  • 확장 가능한 매칭 로직
  • 사용자 정의 트리거 문자
  • 통합 친화적 설계

적합한 대상

  • 풍부한 텍스트 입력을 구축하는 개발자
  • 사용자 태그가 필요한 앱
  • 유연한 언급 시스템이 필요한 팀
  • 사용자 정의 UI 요구 사항이 있는 프로젝트
  • 다중 플랫폼을 대상으로 하는 Flutter 앱

고려 사항

  • 제안 렌더링을 위해 사용자 정의 구현이 필요합니다
  • 추가 상태 관리가 필요할 수 있습니다
  • 간단한 텍스트 입력에 적합하지 않습니다
  • 사용자 매칭에 외부 로직에 의존합니다
  • 제한된 내장 스타일 옵션
  • 텍스트 커서 및 선택 처리에 주의가 필요합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

mentionable_text_field

A flutter plugin to create customizable text field that has a mentionable feature.

Installing:

In your pubspec.yaml

dependencies:
  mentionable_text_field: ^0.0.2
import 'package:mentionable_text_field/mentionable_text_field.dart';


Basic Usage:

    class _MyHomePageState extends State<MyHomePage> {
  List<Mentionable> _mentionableUsers = [];
  late void Function(Mentionable mentionable) _onSelectMention;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Positioned(
              bottom: 0,
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: Column(
                children: [
                  MentionableTextField(
                    onControllerReady: (value) =>
                    _onSelectMention = value.pickMentionable,
                    maxLines: 1,
                    onSubmitted: print,
                    mentionables: const [
                      MyUser('John Doe'),
                      MyUser('Jeanne Aulas'),
                      MyUser('Alexandre Dumas')
                    ],
                    onMentionablesChanged: (mentionableUsers) =>
                        setState(() => _mentionableUsers = mentionableUsers),
                    decoration:
                    const InputDecoration(hintText: 'Type something ...'),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        final mentionable = _mentionableUsers[index];
                        return ListTile(
                          leading: const Icon(Icons.person),
                          title: Text(mentionable.label),
                          onTap: () => _onSelectMention(mentionable),
                        );
                      },
                      itemCount: _mentionableUsers.length,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}



Custom usage

In addition to basic textField's attributes, There are other options:\

Properties Description
ValueChanged<MentionTextEditingController>? onControllerReady A callback to retrieve the TextField controller when ready
List<Mentionable> mentionables List of possible Mentionable objects, eg: users.
String escapingMentionCharacter The character used to replace mention. It should not be used by the user to avoid issues. It should be a single character.
MentionablesChangedCallback onMentionablesChanged Callback that is called on each new characters typed in TextField. It gives the current candidates to mention feature.
TextStyle mentionStyle Text Style applied to mentions

Additional information

Don't hesitate to suggest any features or fix that will improve the package!

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.