Kami akan memulai untuk membahas tentang widget-widget yang tersedia di flutter. Hari ini kami akan memulainya dengan Mengenal Text Widget di Flutter. Mari kita mulai.

Seperti biasa hal pertama yang dilakukan adalah membuat proyek baru dengan flutter, jika anda menggunakan android studio anda dapat melihat gambar dibawah ini

Mengenal Text Widget di Flutter

Setelah itu pilih Flutter Application.

Mengenal Text Widget di Flutter

Setelah membuat proyek baru, kita akan langsung membuka file bernama main.dart. Ubah isi file tersebut menjadi seperti ini

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Mengenal Text Widget'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello World',
            ),
          ],
        ),
      ),
    );
  }
}

lalu jalankan, hasilnya akan seperti ini

SS 1 Mengenal Text Widget di Flutter



Lalu, agar kita lebih mudah melihat perbedaannya, mari kita membungkut Text Widget dengan Container ,

Container(
  width: 150,
  height: 100,
  color: Colors.red,
  child: Text(
    'Hello World',
  ),
),

Baik, kita akan mulai dari hal yang paling sering kita gunakan.

Text Align

Untuk penggunaan text align cukup sederhana, berikut contoh penggunaanya

Text(
  'Hello World',
  textAlign: TextAlign.center
),

Dari script diatas kita mengatur posisi text agar berada di tengah , dalam kasus ini script akan berada di tengah container. Ada beberapa pilihan untuk text align, seperti center,end,justify,start, left dan right.

Max Lines

Untuk Max Lines dituliskan maxLines, di gunakan untuk membatasi berapa baris yang dapat digunakan oleh text. Contoh penggunaan seperti ini

Text(
  'Hello World, ini hanya ada dua baris. Biarpun text yang kita masukan panjang',
  maxLines: 2
)

hasilnya seperti ini

SS 2 Mengenal Text Widget di FlutterOverflow

Jika anda melihat screenshot di atas anda pasti akan menyadari bahwa text nya terpotong, namun juka anda mengubah script seperti ini

Text(
  'Hello World, ini hanya ada dua baris. Biarpun text yang kita masukan panjang',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

anda akan melihat titik titik dibelakang, berikut screenshotnya

SS 3 Mengenal Text Widget di FlutterStyle

Untuk style, kita dapat mengubah gaya atau tampilan dari font seperti yang kita inginkan, contoh penggunaanya seperti ini

Text(
  'Hello World',
  style: TextStyle(color: Colors.white, fontSize: 20, fontStyle: FontStyle.italic),
)

ada banyak sekali property property lain untuk lebih lengkap silahkan kunjungi link ini https://flutter.dev/docs/development/ui/widgets/text. Sekian artikel tentang Mengenal Text Widget di Flutter, semoga bermanfaat

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!