소개

안녕하세요. Android와 iOS의 두 앱을 같은 코드로 만들 수 있는 Flutter에 매료되어, 지난 1개월 정도 여러가지 만져 보았습니다.
레이아웃도 Dart 파일 내에 작성할 수 있어 엄청 쓰기 쉽지만, 신경이 쓰이는 점도 몇가지 있었습니다. 특히 불편하게 느낀 것은 다음과 같은 텍스트의 일부를 장식하는 것입니다.

텍스트의 URL이나 메일을 링크로 한다

텍스트의 일부를 탭했을 때에 무엇인가 동작시킨다 (화면 천이 시키거나)

텍스트의 일부 스타일을 바꾸기 (색상 등)

Flutter에서는, 이러한와 같은 텍스트의 일부에 변화를 갖게 하고 싶은 경우는, 이하와 같은 느낌으로 RichText 와 InlineSpan 로 써 갈 필요가 있습니다.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

간단한 텍스트라면 좋지만 복잡해지면 상당히 어렵습니다.

그래서, 텍스트의 일부의 장식을 간단하게 할 수 있는 패키지를 작성해, 공개했으므로 그 소개입니다.

만든 것

decoratable_text
텍스트에서 임의의 패턴과 일치하는 부분을 장식 (탭 액션을 추가하거나 스타일을 바꾸거나)합니다.

사용법

URL 부분의 스타일을 바꾸어 링크 가능하게 한다

const DecoratableText(
  text: "url: https://flutter.dev/",
  decorations: [
    DecorationOption(
      pattern: TextPattern.url,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchUrl,
      showRipple: true,
    ),
  ],
),

DecorationOption의 displayText를 지정하여 URL 부분의 표시를 변경할 수도 있습니다.

DecorationOption(
  pattern: TextPattern.url,
  displayText: "Tap hare",
  style: TextStyle(color: Colors.blue),
  tapAction: TapAction.launchUrl,
  showRipple: true,
),

displayText 지정 없음
displayText 지정 있음

메일 부분의 스타일을 바꾸어 링크 가능하게 한다

const DecoratableText(
  text: "mail: [email protected]",
  decorations: [
    DecorationOption(
      pattern: TextPattern.mail,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchMail,
      showRipple: true,
    ),
  ],
),

모든 탭 동작 추가

DecoratableText(
  text: "You can set custom tap actions. #SnackBar",
  decorations: [
    DecorationOption(
      pattern: r"#[a-zA-Z0-9_]+",
      style: TextStyle(color: Colors.teal),
      onTap: () => Scaffold.of(context).showSnackBar(
        const SnackBar(
          content: Text("Tapped #SnackBar"),
        ),
      ),
      showRipple: true,
    ),
  ],
),

여러 장소 장식

const DecoratableText(
  text:
      "You can set multiple decoration options. \nFlutter: https://flutter.dev/ #flutter \nDart: https://dart.dev/ #dart",
  decorations: [
    DecorationOption(
      pattern: r"#[a-zA-Z0-9_]+",
      style: TextStyle(color: Colors.teal),
    ),
    DecorationOption(
      pattern: TextPattern.url,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchUrl,
      showRipple: true,
    ),
  ],
),

기타 자세한 사용법은 example/lib/main.dart을 참조하십시오.

사이고에게

정규 표현과 루프로 처리하고 있기 때문에, 합니다.
PR 등 환영합니다.

패키지 : htps // 푸 b. v / pac 가게 s /
리포지토리 : htps : // 기주 b. 코 m / 삿쵸 / 데코라타 ぇ_ 테 xt