Flutter’da Metin İçine Link Ekleme

FLUTTER 0 Yorum

Bu yazımda, flutter’da metin içine nasıl köprü eklenir onu göstereceğim. Mobil uygulamaların çoğunda, belirli bir bölüm veya bir makale hakkında daha fazla bilgi almak için kullanıcıları bazı harici web sitelerine yönlendiren bağlantılar vardır. Bunu Flutter uygulamamızda nasıl yapacağımızı öğrenelim…

Flutter’da metne bağlantı eklemek için yerleşik bir widget yoktur. Ancak link eklemek için kullanabileceğimiz bazı eklentiler vardır.

Kullanıcıyı harici web sitesine yönlendirmemiz gerekirse bunu yapmak için url_launcher eklentisini kullanacağız. Eklentiyi Pubspec.yaml dosyasına ekleyin.

dependencies:
  url_launcher: ^6.0.2
Ekledikten sonra aşağıdaki kodu çalıştırın.
flutter pub get

Ardından, eklentiyi kullanmak istediğiniz yerde içe aktarın.

import 'package:flutter/gestures.dart';
import 'package:url_launcher/url_launcher.dart';

Genellikle “daha fazla oku” gibi bir bağlantı eklediğimizde, onu mevcut bir paragrafın parçası olarak ekleriz. Benzersiz stil eklemek için bazı ifadeleri ayırmamız gerekir bunun için TextSpan widget’ını kullanmaya izin veren RichText widget’ını kullanmalıyız.

RichText; metin içinde farklı stiller kullanmaya yarar.  TextSpan için, mavi rengi ekleyerek metin stilinin bağlantı gibi görünmesini sağlayacaktır.

 KOD:
RichText(
            text: new TextSpan(
              children: [
                new TextSpan(
                  text: 'Blogumu ziyaret etmek için ',
                  style: new TextStyle(color: Colors.black),
                ),
                new TextSpan(
                  text: ' Buraya Tıkla',
                  style: new TextStyle(color: Colors.blue),
                  recognizer: new TapGestureRecognizer()
                    ..onTap = () {
                      launch('https://onursahin.net');
                    },
                ),
              ],
            ),
          ),

Tam Kod:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter Köprü'),
        ),
        body: new Center(
          child: new RichText(
            text: new TextSpan(
              children: [
                new TextSpan(
                  text: 'Blogumu ziyaret etmek için ',
                  style: new TextStyle(color: Colors.black),
                ),
                new TextSpan(
                  text: ' Buraya Tıkla',
                  style: new TextStyle(color: Colors.blue),
                  recognizer: new TapGestureRecognizer()
                    ..onTap = () {
                      launch('https://onursahin.net');
                    },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Çıktı:

flutter hyberlink

Linkify kullanarak Metin URL’sini Tıklanabilir Bağlantıya Çevirme

linkify Flutter eklentisi, metin URL’sini veya e-postayı tıklanabilir satır içi metne dönüştürebilir.

Öncelikle projenize flutter_linkify eklentisi ekleyin .

dependencies:
  flutter_linkify: ^4.1.0

Ardından eklentiyi içeri aktarın.

import 'package:flutter_linkify/flutter_linkify.dart';

linkify aşağıdaki gibi kullanabilirsiniz.

Linkify(
    onOpen: (link) {
      print("Linkify link = ${link.url}");
    },
    text: "Linkify eklentisi -  https://onursahin.net",
    style: TextStyle(color: Colors.black),
    linkStyle: TextStyle(color: Colors.green),
  ),

Tam Kod:

import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter Linkify'),
        ),
        body: new Center(
          child: Linkify(
            onOpen: (link) {
              print("Linkify link = ${link.url}");
            },
            text: "Linkify eklentisi -  https://onursahin.net",
            style: TextStyle(color: Colors.black),
            linkStyle: TextStyle(color: Colors.green),
          ),
        ),
      ),
    );
  }
}

Çıktı:

linkify

Bağlantı metninde http: // veya https: // nasıl gösterilir?

Bunun gerçekleşmesi için humanize seçeneğinin değerini false olarak belirleyin.

options: LinkifyOptions(humanize: false),

link

Bağlantıdan www kaldırma

options: LinkifyOptions(removeWww: true)

Eklemek için: false

Yorum Yap