Giter Club home page Giter Club logo

flutter_selectable_autolink_text's Introduction

Selectable Autolink Text

pub package

Generate inline links that can be selected and tapped in text for Flutter

Example

Install

https://pub.dev/packages/selectable_autolink_text#-installing-tab-

Usage

Basic

@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    'Basic https://flutter.dev',
    linkStyle: TextStyle(color: Colors.blueAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.blueAccent,
      backgroundColor: Colors.blueAccent.withAlpha(0x33),
    ),
    onTap: (url) => launchUrl(Uri.parse(url)),
    onLongPress: (url) => Share.share(url),
  );
}

Advanced

@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    '''
Advanced
You can shrink url like https://github.com/miyakeryo/flutter_selectable_autolink_text
tel: 012-3456-7890
email: [email protected]''',
    style: TextStyle(color: Colors.green[800]),
    linkStyle: TextStyle(color: Colors.purpleAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.purpleAccent,
      backgroundColor: Colors.purpleAccent.withAlpha(0x33),
    ),
    onTransformDisplayLink: AutoLinkUtils.shrinkUrl,
    onTap: (url) async {
      print('🌶Tap: $url');
      final uri = Uri.parse(url);
      if (await canLaunchUrl(uri)) {
        launchUrl(uri);
      }
    },
    onLongPress: (url) {
      print('🍔LongPress: $url');
      Share.share(url);
    },
  );
}

Customized

You can customize link pattern.

@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    'Custom links'
    '\nHi! @screen_name.'
    ' If you customize the regular expression, you can make them.'
    ' #hash_tag',
    linkStyle: TextStyle(color: Colors.deepOrangeAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.deepOrangeAccent,
      backgroundColor: Colors.deepOrangeAccent.withAlpha(0x33),
    ),
    linkRegExpPattern: '(@[\\w]+|#[\\w]+|${AutoLinkUtils.urlRegExpPattern})',
    onTransformDisplayLink: AutoLinkUtils.shrinkUrl,
    onTap: (url) => print('🍒Tap: $url'),
    onLongPress: (url) => print('🍩LongPress: $url'),
  );
}

More advanced usage

@override
Widget build(BuildContext context) {
  final blueStyle = TextStyle(color: Colors.blueAccent);
  final highlightedStyle = TextStyle(
    color: Colors.blueAccent, 
    backgroundColor: Colors.blueAccent.withAlpha(0x33),
  );
  final orangeStyle = TextStyle(color: Colors.orange);
  final boldStyle = TextStyle(fontWeight: FontWeight.bold);
  final italicStyle = TextStyle(fontStyle: FontStyle.italic);
  final bigStyle = TextStyle(fontSize: 24);
  final regExpPattern = r'\[([^\]]+)\]\(([^\s\)]+)\)';
  final regExp = RegExp(regExpPattern);

  return SelectableAutoLinkText(
    '''
More advanced usage

[This is a link text](https://google.com)
[This text is bold](bold)
This text is normal
[This text is italic](italic)
[This text is orange](orange)
[This text is big](big)''',
    linkRegExpPattern: regExpPattern,
    onTransformDisplayLink: (s) {
      final match = regExp.firstMatch(s);
      if (match != null && match.groupCount == 2) {
        final text1 = match.group(1)!;
        final text2 = match.group(2)!;
        switch (text2) {
          case 'bold':
            return LinkAttribute(text1, style: boldStyle);
          case 'italic':
            return LinkAttribute(text1, style: italicStyle);
          case 'orange':
            return LinkAttribute(text1, style: orangeStyle);
          case 'big':
            return LinkAttribute(text1, style: bigStyle);
          default:
            if (text2.startsWith('http')) {
              return LinkAttribute(
                text1,
                link: text2,
                style: blueStyle,
                highlightedStyle: highlightedStyle,
              );
            } else {
              return LinkAttribute(text1);
            }
        }
      }
      return LinkAttribute(s);
    },
    onTap: (url) => launchUrl(Uri.parse(url)),
    onLongPress: (url) => Share.share(url),
  );
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.