Kreatif dengan Text Field: 4 Ide Dekorasi yang Wajib Dicoba pada Flutter

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu 4 Ide Dekorasi yang Wajib Dicoba pada Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga.

Pada pembahasan artikel ini, kita akan membahas 4 Ide Dekorasi yang Wajib Dicoba pada Flutter. Daripada penasaran, yuk kita bedah!

Flutter merupakan sebuah framework open-source yang dibuat oleh Google yang bertujuan untuk dapat membuat aplikasi antarmuka yang responsif dan konsisten di berbagai platform, contohnya seperti IOS, Android, Web maupun Desktop. Satu kode yang digunakan sebagai sumber utama bagi developer agar aplikasi yang dikembangkan dapat berjalan dengan baik, yaitu dengan menggunakan bahasa pemrograman Dart. Dengan menggunakan Flutter dapat membantu developer dalam membuat aplikasi yang kaya akan fitur, kinerja dan tampilan yang baik.

Apa itu Text Field?

Text Field adalah sebuah widget pada Flutter yang digunakan untuk menerima inputan berupa teks dari pengguna. Widget ini dapat memungkinkan kita sebagai pengguna aplikasi untuk dapat memasukkan teks dengan menggunakan keyboard. Manfaat menggunakan Text Field ini sangat beragam, biasanya penggunaan Text Field ini digunakan pada formulir, kuesioner, dan input lainnya.

4 Ide Dekorasi yang Wajib Dicoba pada Flutter

1. showCursor merupakan properti pada widget Text Field yang memiliki fungsi untuk dapat mengontrol tanda penunjuk atau kursor pada tempat untuk memasukkan teks. Developer juga bisa memilih apakah kursor tersebut ingin ditampilkan atau tidak pada kolom Text Field dengan cara menambahkan “True” atau “False” pada Flutter. Tidak hanya itu, developer juga dapat menambahkan warna pada kursor sesuai dengan keinginan developer.
2. Text Align merupakan properti pada widget Text Field yang memiliki fungsi untuk dapat mengontrol posisi teks di dalam Text Field. Posisi ini dapat diatur untuk memulai tulisan dari kiri, tengah, atau kanan. Text Align juga dapat mengontrol tata letak penulisan dengan menambahkan “TextAlignVertical”. Kemudian Text Align juga dapat mengatur huruf kapital pada penulisan teks dengan cara menambahkan “TextAlignCapitalization”.
3. Style merupakan properti pada widget Text Field yang memiliki fungsi untuk dapat menyesuaikan berbagai aspek seperti warna, ukuran, ketebalan, dan jenis huruf. Sehingga dengan menggunakan Style, dapat berguna untuk menyesuaikan tampilan Text Field yang sesuai dengan desain UI aplikasi teman-teman.
4. Decoration merupakan properti pada widget Text Field yang memiliki fungsi untuk dapat menambahkan dekorasi visual ke dalam Text Field. Properti Decoration mampu menambahkan dan menyesuaikan berbagai aspek seperti border, ikon, dan properti tambahan lainnya untuk meningkatkan fungsionalitas pada aplikasi Flutter. Dengan properti Decoration, teman-teman juga dapat menambahkan Hint Text yang berfungsi sebagai placeholder dan teks yang tidak fokus.

Cara Penggunaan 4 Dekorasi pada Text Field:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Text Field BuildWithAngga"),
        ),
        body: const Center(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: TextField(
              autocorrect: false,
              showCursor: true,
              cursorColor: Colors.amber,
              textAlign: TextAlign.start,
              textAlignVertical: TextAlignVertical.center,
              textCapitalization: TextCapitalization.none,
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
              ),
              decoration: InputDecoration(
                icon: Icon(Icons.person),
                hintText: "Silakan masukkan nama",
                hintStyle: TextStyle(color: Colors.grey),
                border: OutlineInputBorder(),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.amber, width: 2.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black, width: 1.0),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output Penggunaan 4 Dekorasi diatas:

Kesimpulan

Dengan menggabungkan penggunaan properti showCursor, TextAlign, Style, dan Decoration. teman-teman dapat membuat halaman Text Field menjadi sesuai dengan keinginan desain UI masing-masing dan memudahkan pengguna dalam menggunakan aplikasi yang teman-teman kembangkan. Developer dapat menentukan dengan mudah posisi teks, tampilan kursor pada Text Field, gaya teks yang ditampilkan, dan dekorasi visual pada aplikasi yang dikembangkan.

Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.