Text Widget

Flutter Text Widget – Class

Yazı yazmak için kullanılan widget’tır.

style: parametresine TextStyle( ) widget verilerek yazının tasarımı ile ilgili birçok değişiklik yapılabilir.

Text Widget Kullanımı

Önce en önemli özelliği olan style: parametresine bakalım. Bu parametre bizden TextStyle widget’ını istiyor.

Type: TextSytle

Örnek olarak yazının fontunu büyütmek için;

Text(
    "Merhaba Flutter",
  style: TextStyle(fontSize: 24)),

Yazı çok uzun olacağı için TextStyle Widget‘ını ayrı bir yazıda yazdım. Eğer yazının tasarımı ile ilgileniyorsanız TextStyle Widget yazıma gidebilirsiniz.

Text(“Merhaba Flutter”) basit sade bir yazı yazacaktır.

Text Widget textAlign

Yazılan metnin satırdaki konumunu belirtir.

Text Widget textAlign

textAlign.center

Yazıyı ortalar.

textAlign.center
textAlign.center
import 'package:flutter/material.dart';
void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Container(
            width: double.maxFinite,
            height: 100,
            color: Colors.grey,
            child: const Text(
              "Merhaba Flutter",
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );

textAlign.end – right

end ile right arasında bir fark görmedim.

textAlign: TextAlign.end - textAlign: TextAlign.right
textAlign: TextAlign.end – textAlign: TextAlign.right

textAlign.justify – start – left

start, left ve justify arasında bir fark görmedim. Hepsi soldan en başa hizalıyor.

textAlign: TextAlign.justify - textAlign: TextAlign.start - textAlign: TextAlign.left,
textAlign: TextAlign.justify – textAlign: TextAlign.start – textAlign: TextAlign.left,

Text Widget textDirection

Yazının yazılacağı yönü belirliyor. Soldan sağa mı yoksa sağdan sola mı şeklinde. Ancak bu ben bu özellikte biraz şaşırdım. Yukarıda yaptığımız TextAlign.right ile TextDirection.rtl arasında bir fark göremedim. Benim beklediğim olduğu gibi sağdan sola doğru başlamasıydı. Merhaba Flutter yazdıysam; M en sağda, sonra e ve sonra diğerleri,,, textDirection: TextDirection.ltr,

TextDirection.ltr

Metni soldan sağa doğru hizalıyor. left to right

textDirection: TextDirection.ltr,
textDirection: TextDirection.ltr,

TextDirection.rtl

Metni sağdan sola doğru hizalıyor. right to left

textDirection: TextDirection.rtl,
textDirection: TextDirection.rtl,

Text Widget maxLines

Satır sayısını belirtir.

Ben uzun bir cümle yazsam ve onu sınırlamazsam aşağıdaki gibi bir görüntü oluşur.

maxLines

Ancak biz maxLines özelliği ile satır sınırlaması yapabiliriz. Aşağıdaki örneğe bakalım.

maxLines: 2
maxLines: 2
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Container(
            width: double.maxFinite,
            height: 100,
            color: Colors.grey,
            child: const Text(
              "Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter Merhaba Flutter ",
              style: TextStyle(
                fontSize: 24,
              ),
              maxLines: 2,
            ),
          ),
        ),
      ),
    );

Text Widget softWrap

True yada false değeri alır. Varsayılan olarak true’dur. false verirsek, yazımız uzun ise sanki satır bitmiyormuş gibi tek bir satırda yazmaya devam eder. Ekrandan dışarı taşmış olur. Yukarıdaki örneği burada deneyelim.

softWrap: false
softWrap: false
softWrap: true
softWrap: true

Text Widget TextOverflow

Text’in taşması durumunda diğer satıra nasıl geçeceğinin ayarı yapılır.

Alabileceği değerler aşağıda verilmiştir.

TextOverflow.clip

TextOverflow.clip

Satır sonunda drekt olarak yazıyı kesip alt satıra geçer

overflow: TextOverflow.clip
overflow: TextOverflow.clip

TextOverflow.ellipsis

Yazıyı satır sonunda üç nokta ile bitirir.

overflow: TextOverflow.ellipsis
overflow: TextOverflow.ellipsis

TextOverflow.fade

En alt satırda gölgeli olarak sonlandırdı.

overflow: TextOverflow.ellipsis
overflow: TextOverflow.fade

TextOverflow.visible

Yazının taşmasına izin verilir.

overflow: TextOverflow.visible
overflow: TextOverflow.visible

Text Widget Constructors – Kurucuları

Text(
    String this.data, {
    super.key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
    this.selectionColor,
  }

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir