İlk Metin Alanınız

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 22 / 34.

TextField, insanların yazı yazabileceği bir kutudur. Önizlemede kutuya dokun ve klavyenle yazı yaz.

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

decoration:, alanın nasıl görüneceğini belirler. labelText, alana ad verir: boş kutunun içinde yer alır ve yazmaya başladığında kenarlığa doğru yukarı çıkar; böylece adı her zaman görünür. OutlineInputBorder(), kutunun etrafını tamamen çizer; bu olmazsa metnin altında yalnızca bir çizgi bulunur.

hintText de vardır; you@example.com gibi gri bir örnektir, ancak yazmaya başlar başlamaz kaybolur. Bir alana ad vermek için etiket, yalnızca ek bilgi olarak ipucu kullan.

Bir alan, kendisine verilen genişlik boyunca uzanır. Burada Column, onu ekranın kenarlarından uzak tutan bir Padding öğesinin içindedir.

Görev

Kolay

Başlığın altına, 16 boyutunda bir SizedBox'ın ardından, çevresinde kenarlık bulunan ve Email etiketli bir TextField ekleyin.

Kendin dene

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)),
          ],
        ),
      ),
    );
  }
}