Polish 20201102 203530016
Kasım 2, 2020

Flutter Ders -2 | Text Widget Kullanımı

ile Zexon-dev

Bugün Flutter Text Widget konusuna değineceğiz.Daha önceki konulardada bahsettiğim gibi Flutter bize widgetlar sayesinde kolay bir kullanım sunuyor.Bizde bu ozelliklerden Text Widget‘ına ait olanları inceleyeceğiz.

Bknz: Flutter Ders 1 – Flutter Widgets Kavramı Nedir?


Flutter Text Widget Kullanımı:

Şimdi koyduğum örneklere başlamdan önce biraz mantığını anlamamız gerek.

Flutter ile bir mobil uygulama oluştururken  bazen belirli yerlerde metin veya kelime kullanma ihtiyacı doğar.Bu durumlarda Flutter’ın bize sunduğu Text Widget’ını kullanıyoruz.

Kullanmak için ilk önce yeni bir proje oluşturdum ve Flutter’da kullandiğim bir eklenti ile Main App ve gerekli yerlerli tamamladıktan sonra Scaffold içine Center Widget’ını koydum, onunda icine Text Widget’ını koydum. Evet biraz karışık durabilir ama diğer derslerde bunlarin ne olduguna deginince daha iyi anlasilacak.

Flutter Text Widget Örneği

Flutter Text Widget Örneği

Burda Widgetıa bazı özellikler atamdan direkt yazdırdım ve direk ekrnaın ortasına oluştu yazı. Tabi sadece bundan olusmuyor bazı özellikleri bulunmaktadır.

Kod örnegi assağidadır.

 


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material App',
        home: Scaffold(
            body: Center(
                child: Text(
          "insolitax.net",
        ))));
  }
}

Widget Özellikleri:

Tabi sadece yazı yazmak ile kalmıyor aynı xamanda bir kac özelligide icinde bulunduruyor.Şimdi bunlara örnek verip işlevlerini kısaca açıklayacağız.

Flutter Text Widget

Flutter Text Widget

Gördüğünüz gibi Text(Metine) renk ,boyut, harfler arası açıklık gibi bir çok ozellik belirledik şimdi asşağidaki koda bakalım ve mantıklarını açıklayayım.


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material App',
        home: Scaffold(
            body: Center(
          child: Text(
            "insolitax.net",
            style: TextStyle(
              color: Colors.amber,
              fontSize: 50,
              decoration: TextDecoration.overline,
              letterSpacing: 10,
            ),
          ),
        )));
  }
}

decoration:
TextDecoration.overline

Yazı üzeri çizgidir.

decoration: TextDecoration.lineThrough
Yazı icinden geçen çizgidir.

decoration:
TextDecoration.combine(decorations)

Bulunan özelliklerin toplu bir biçimde atandiği bölüm.List döndürür.

letterSpacing: 10
Harfler arası 10 pixel boşluk bırakır.

color: Colors.amber
Yazı rengini belirler .amber yerine istenilen renk özelligi atanır. Color’un farklı kullanimlarıda vardır.


Detaylı Bilgi: Flutter Google