Kolom Teks Pertamamu

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 22 dari 34.

TextField adalah kotak tempat orang bisa mengetik. Ketuk kotak itu di pratinjau, lalu ketik dengan keyboard.

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

decoration: mengatur tampilan field. labelText memberi nama pada field: teksnya berada di dalam kotak kosong, lalu berpindah ke tepi saat kamu mulai mengetik, sehingga namanya selalu terlihat. OutlineInputBorder() menggambar kotak di sekelilingnya. Tanpanya, hanya ada garis di bawah teks.

Kamu juga bisa menggunakan hintText, contoh berwarna abu-abu seperti you@example.com, tetapi teks itu menghilang begitu kamu mulai mengetik. Gunakan label untuk memberi nama pada field, dan gunakan hint hanya sebagai tambahan.

Field membentang selebar ruang yang diberikan. Di sini, Column berada di dalam Padding, yang menjaganya agar tidak menempel pada tepi layar.

Tantangan

Mudah

Di bawah judul, setelah SizedBox berukuran 16, tambahkan TextField berlabel Email, dengan border di semua sisi.

Coba sendiri

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(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}