All Projects → fluttercandies → Extended_text_field

fluttercandies / Extended_text_field

Licence: mit
extended official text field to quickly build special text like inline image, @somebody, custom background etc.

Programming Languages

5618 projects

Projects that are alternatives of or similar to Extended text field

A Material Design ViewPager easy to use library
Stars: ✭ 8,224 (+3189.6%)
Mutual labels:  toolbar
The best (?) date range picker control for OS X.
Stars: ✭ 126 (-49.6%)
Mutual labels:  toolbar
Stars: ✭ 164 (-34.4%)
Mutual labels:  toolbar
【2.0.0以后版本由UIWidget维护,不做更新】}Android 一个支持Android 4.4以上版本沉浸式及半透明状态栏效果的标题栏控件.支持文xml及java代码设置众多自定义属性;实现MIUI V6、Flyme 4.0、Android 6.0以上状态栏文字颜色切换;支持设置主/副标题跑马灯效果;可设置左边文字/图片、中间主、副标题、右边文字/图片;支持Java代码添加左边、中间、右边 View
Stars: ✭ 74 (-70.4%)
Mutual labels:  toolbar
No description or website provided.
Stars: ✭ 1,475 (+490%)
Mutual labels:  toolbar
An Arc view for the android Toolbar.
Stars: ✭ 145 (-42%)
Mutual labels:  toolbar
Tc Material Design
Série de artigos sobre o Material Design Android
Stars: ✭ 64 (-74.4%)
Mutual labels:  toolbar
Everything integration for the Windows taskbar.
Stars: ✭ 3,706 (+1382.4%)
Mutual labels:  toolbar
A toolbar that morphs from a FloatingActionButton
Stars: ✭ 1,540 (+516%)
Mutual labels:  toolbar
Tool Bar
Package providing customisable toolbar for Atom
Stars: ✭ 159 (-36.4%)
Mutual labels:  toolbar
Example with advanced configuration of the navigation controller's appearance
Stars: ✭ 91 (-63.6%)
Mutual labels:  toolbar
Navigation Bar Customization in Xamarin Forms
Stars: ✭ 104 (-58.4%)
Mutual labels:  toolbar
Android List To Grid
Implementation of List to Grid: Icon Transition
Stars: ✭ 147 (-41.2%)
Mutual labels:  toolbar
Material Design 控件集合。ConstraintLayout、NestedScrollView、Toolbar、TabLayout、TextInputLayout。。。
Stars: ✭ 68 (-72.8%)
Mutual labels:  toolbar
Frameless Titlebar
Customizable Electron Titlebar for frameless windows
Stars: ✭ 167 (-33.2%)
Mutual labels:  toolbar
Nativescript Keyboard Toolbar
⌨️🛠Add a customizable toolbar on top of the soft keyboard
Stars: ✭ 66 (-73.6%)
Mutual labels:  toolbar
A small library for creating tabbed toolbars
Stars: ✭ 129 (-48.4%)
Mutual labels:  toolbar
Bforartists is a fork of the popular 3D software Blender, with the goal to improve the UI.
Stars: ✭ 240 (-4%)
Mutual labels:  toolbar
Quill Emoji
Quill module toolbar extension for emoji
Stars: ✭ 175 (-30%)
Mutual labels:  toolbar
Summernote Cleaner
Plugin for Summernote that adds a Button and/or Paste functionality for cleaning MS Word Crud from editor text
Stars: ✭ 148 (-40.8%)
Mutual labels:  toolbar


pub package GitHub stars GitHub forks GitHub license GitHub issues flutter-candies

Extended official text field to build special text like inline image, @somebody, custom background etc quickly.It also support to build custom seleciton toolbar and handles.

Language: English | 中文简体


  • Not support: it won't handle special text when TextDirection.rtl.

    Image position calculated by TextPainter is strange.

  • Not support:it won't handle special text when obscureText is true.

Special Text

Create Special Text

extended text helps to convert your text to special textSpan quickly.

for example, follwing code show how to create @xxxx special textSpan.

class AtText extends SpecialText {
  static const String flag = "@";
  final int start;

  /// whether show background for @somebody
  final bool showAtBackground;

  AtText(TextStyle textStyle, SpecialTextGestureTapCallback onTap,
      {this.showAtBackground: false, this.start})
      : super(
          " ",

  InlineSpan finishText() {
    TextStyle textStyle =
        this.textStyle?.copyWith(color:, fontSize: 16.0);

    final String atText = toString();

    return showAtBackground
        ? BackgroundTextSpan(
            background: Paint()..color =,
            text: atText,
            actualText: atText,
            start: start,

            ///caret can move into special text
            deleteAll: true,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);
        : SpecialTextSpan(
            text: atText,
            actualText: atText,
            start: start,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);


create your SpecialTextSpanBuilder

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  /// whether show background for @somebody
  final bool showAtBackground;
  final BuilderType type;
      {this.showAtBackground: false, this.type: BuilderType.extendedText});

  TextSpan build(String data, {TextStyle textStyle, onTap}) {
    var textSpan =, textStyle: textStyle, onTap: onTap);
    return textSpan;

  SpecialText createSpecialText(String flag,
      {TextStyle textStyle, SpecialTextGestureTapCallback onTap, int index}) {
    if (flag == null || flag == "") return null;

    ///index is end index of start flag, so text start index should be index-(flag.length-1)
    if (isStart(flag, AtText.flag)) {
      return AtText(textStyle, onTap,
          start: index - (AtText.flag.length - 1),
          showAtBackground: showAtBackground,
          type: type);
    } else if (isStart(flag, EmojiText.flag)) {
      return EmojiText(textStyle, start: index - (EmojiText.flag.length - 1));
    } else if (isStart(flag, DollarText.flag)) {
      return DollarText(textStyle, onTap,
          start: index - (DollarText.flag.length - 1), type: type);
    return null;



show inline image by using ImageSpan.

    ImageProvider image, {
    Key key,
    @required double imageWidth,
    @required double imageHeight,
    EdgeInsets margin,
    int start: 0,
    ui.PlaceholderAlignment alignment = ui.PlaceholderAlignment.bottom,
    String actualText,
    TextBaseline baseline,
    TextStyle style,
    BoxFit fit: BoxFit.scaleDown,
    ImageLoadingBuilder loadingBuilder,
    ImageFrameBuilder frameBuilder,
    String semanticLabel,
    bool excludeFromSemantics = false,
    Color color,
    BlendMode colorBlendMode,
    AlignmentGeometry imageAlignment =,
    ImageRepeat repeat = ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection = false,
    bool gaplessPlayback = false,
    FilterQuality filterQuality = FilterQuality.low,

        imageWidth: size,
        imageHeight: size,
        margin: EdgeInsets.only(left: 2.0, bottom: 0.0, right: 2.0));
parameter description default
image The image to display(ImageProvider). -
imageWidth The width of image(not include margin) required
imageHeight The height of image(not include margin) required
margin The margin of image -
actualText Actual text, take care of it when enable selection,something likes "[love]" '\uFFFC'
start Start index of text,take care of it when enable selection. 0

Cache Image

if you want cache the network image, you can use ExtendedNetworkImageProvider and clear them with clearDiskCachedImages

import extended_image_library

  extended_image_library: ^0.1.4
  this.url, {
  this.scale = 1.0,
  this.cache: false,
  this.retries = 3,
  this.timeRetry = const Duration(milliseconds: 100),
  CancellationToken cancelToken,
})  : assert(url != null),
      assert(scale != null),
      cancelToken = cancelToken ?? CancellationToken();
parameter description default
url The URL from which the image will be fetched. required
scale The scale to place in the [ImageInfo] object of the image. 1.0
headers The HTTP headers that will be used with [HttpClient.get] to fetch image from network. -
cache whether cache image to local false
retries the time to retry to request 3
timeLimit time limit to request image -
timeRetry the time duration to retry to request milliseconds: 100
cancelToken token to cancel network request CancellationToken()
/// Clear the disk cache directory then return if it succeed.
///  <param name="duration">timespan to compute whether file has expired or not</param>
Future<bool> clearDiskCachedImages({Duration duration}) async


default value of textSelectionControls are MaterialExtendedTextSelectionControls/CupertinoExtendedTextSelectionControls

override buildToolbar or buildHandle to customize your toolbar widget or handle widget

class MyExtendedMaterialTextSelectionControls
    extends MaterialExtendedTextSelectionControls {
  Widget buildToolbar(
    BuildContext context,
    Rect globalEditableRegion,
    double textLineHeight,
    Offset position,
    List<TextSelectionPoint> endpoints,
    TextSelectionDelegate delegate,
  ) {

    // The toolbar should appear below the TextField
    // when there is not enough space above the TextField to show it.
    final TextSelectionPoint startTextSelectionPoint = endpoints[0];
    final TextSelectionPoint endTextSelectionPoint =
        (endpoints.length > 1) ? endpoints[1] : null;
    final double x = (endTextSelectionPoint == null)
        ? startTextSelectionPoint.point.dx
        : (startTextSelectionPoint.point.dx + endTextSelectionPoint.point.dx) /
    final double availableHeight = -
        MediaQuery.of(context) -
    final double y = (availableHeight < _kToolbarHeight)
        ? startTextSelectionPoint.point.dy +
            globalEditableRegion.height +
            _kToolbarHeight +
        : startTextSelectionPoint.point.dy - textLineHeight * 2.0;
    final Offset preciseMidpoint = Offset(x, y);

    return ConstrainedBox(
      constraints: BoxConstraints.tight(globalEditableRegion.size),
      child: CustomSingleChildLayout(
        delegate: MaterialExtendedTextSelectionToolbarLayout(
        child: _TextSelectionToolbar(
          handleCut: canCut(delegate) ? () => handleCut(delegate) : null,
          handleCopy: canCopy(delegate) ? () => handleCopy(delegate) : null,
          handlePaste: canPaste(delegate) ? () => handlePaste(delegate) : null,
              canSelectAll(delegate) ? () => handleSelectAll(delegate) : null,
          handleLike: () {
            //mailto:<email address>?subject=<subject>&body=<body>, e.g.
                "mailto:[email protected]?subject=extended_text_share&body=${delegate.textEditingValue.text}");
            //clear selecction
            delegate.textEditingValue = delegate.textEditingValue.copyWith(
                selection: TextSelection.collapsed(
                    offset: delegate.textEditingValue.selection.end));

  Widget buildHandle(
      BuildContext context, TextSelectionHandleType type, double textHeight) {
    final Widget handle = SizedBox(
      width: _kHandleSize,
      height: _kHandleSize,
      child: Image.asset("assets/love.png"),

    // [handle] is a circle, with a rectangle in the top left quadrant of that
    // circle (an onion pointing to 10:30). We rotate [handle] to point
    // straight up or up-right depending on the handle type.
    switch (type) {
      case TextSelectionHandleType.left: // points up-right
        return Transform.rotate(
          angle: math.pi / 4.0,
          child: handle,
      case TextSelectionHandleType.right: // points up-left
        return Transform.rotate(
          angle: -math.pi / 4.0,
          child: handle,
      case TextSelectionHandleType.collapsed: // points up
        return handle;
    assert(type != null);
    return null;

/// Manages a copy/paste text selection toolbar.
class _TextSelectionToolbar extends StatelessWidget {
  const _TextSelectionToolbar({
    Key key,
  }) : super(key: key);

  final VoidCallback handleCut;
  final VoidCallback handleCopy;
  final VoidCallback handlePaste;
  final VoidCallback handleSelectAll;
  final VoidCallback handleLike;

  Widget build(BuildContext context) {
    final List<Widget> items = <Widget>[];
    final MaterialLocalizations localizations =

    if (handleCut != null)
          child: Text(localizations.cutButtonLabel), onPressed: handleCut));
    if (handleCopy != null)
          child: Text(localizations.copyButtonLabel), onPressed: handleCopy));
    if (handlePaste != null)
        child: Text(localizations.pasteButtonLabel),
        onPressed: handlePaste,
    if (handleSelectAll != null)
          child: Text(localizations.selectAllButtonLabel),
          onPressed: handleSelectAll));

    if (handleLike != null)
      items.add(FlatButton(child: Icon(Icons.favorite), onPressed: handleLike));

    // If there is no option available, build an empty widget.
    if (items.isEmpty) {
      return Container(width: 0.0, height: 0.0);

    return Material(
      elevation: 1.0,
      child: Wrap(children: items),
      borderRadius: BorderRadius.all(Radius.circular(10.0)),


support to select and hitTest ExtendedWidgetSpan, you can create any widget in ExtendedTextField.

class EmailText extends SpecialText {
  final TextEditingController controller;
  final int start;
  final BuildContext context;
  EmailText(TextStyle textStyle, SpecialTextGestureTapCallback onTap,
      {this.start, this.controller, this.context, String startFlag})
      : super(startFlag, " ", textStyle, onTap: onTap);

  bool isEnd(String value) {
    var index = value.indexOf("@");
    var index1 = value.indexOf(".");

    return index >= 0 &&
        index1 >= 0 &&
        index1 > index + 1 &&

  InlineSpan finishText() {
    final String text = toString();

    return ExtendedWidgetSpan(
      actualText: text,
      start: start,
      alignment: ui.PlaceholderAlignment.middle,
      child: GestureDetector(
        child: Padding(
          padding: EdgeInsets.only(right: 5.0, top: 2.0, bottom: 2.0),
          child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              child: Container(
                padding: EdgeInsets.all(5.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                      //style: textStyle?.copyWith(color:,
                      width: 5.0,
                      child: Icon(
                        size: 15.0,
                      onTap: () {
                        controller.value = controller.value.copyWith(
                            text: controller.text
                                .replaceRange(start, start + text.length, ""),
                            selection: TextSelection.fromPosition(
                                TextPosition(offset: start)));
        onTap: () {
              context: context,
              barrierDismissible: true,
              builder: (c) {
                TextEditingController textEditingController =
                    TextEditingController()..text = text.trim();
                return Column(
                  children: <Widget>[
                      child: Container(),
                        child: Padding(
                      padding: EdgeInsets.all(10.0),
                      child: TextField(
                        controller: textEditingController,
                        decoration: InputDecoration(
                            suffixIcon: FlatButton(
                          child: Text("OK"),
                          onPressed: () {
                            controller.value = controller.value.copyWith(
                                text: controller.text.replaceRange(
                                    start + text.length,
                                    textEditingController.text + " "),
                                selection: TextSelection.fromPosition(
                                        offset: start +
                                            (textEditingController.text + " ")

                      child: Container(),
      deleteAll: true,
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]