Cara Membuat Text Border/Outline Di Flutter Yang Simpel

Rabu, 18 September 2024 1 menit baca

Artikel ini berdasarkan kesulitan saya dengan flutter saat ingin membuat widget text yang memiliki outline, saat itu saya butuh untuk memperjelas teks agar tidak samar dengan gradasi background dan background yang transparan.

Penggunaan teks dengan outline umum digunakan bukan hanya untuk aplikasi, tapi lebih sering kita jumpai pada user interface game ponsel dengan background atau tombol yang dibuat interaktif.

Berikut adalah kode lengkapnya untuk menggunakannya sebagai reusable widget.

import 'package:flutter/material.dart';

Widget textOutline(text,
    {double fontSize = 16,
    Color color = Colors.white,
    Color outlineColor = Colors.black,
    double outlineWidth = 2}) {
  return Stack(
    children: [
      Text(
        text,
        style: TextStyle(
          fontSize: fontSize,
          foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = outlineWidth
            ..color = outlineColor,
        ),
      ),
      Text(
        text,
        style: TextStyle(
          fontSize: fontSize,
          color: color,
        ),
      ),
    ],
  );
}

Teknik yang digunakan adalah dengan menimpa teks yang disetel hanya memiliki border dengan teks biasa, lalu menjadikannya sebagai reusable widget dengan peletakan parameter yang dibuat mirip dengan widget Text(). Bagusnya jika ingin menambah parameter usahakan penempatan sesuai dengan widget Text() untuk menjaga kemudahan yang konsisten.