Menu
CoddyTech

שדה הטקסט הראשון שלך

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 22 מתוך 34.

TextField הוא תיבה שאפשר להקליד בה. הקישו עליה בתצוגה המקדימה והקלידו באמצעות המקלדת.

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

decoration: מגדיר איך השדה נראה. labelText נותן לשדה שם: הוא מופיע בתוך התיבה הריקה ועולה אל הגבול כשמתחילים להקליד, כך שהשם תמיד מופיע. OutlineInputBorder() מצייר מסגרת סביב כל התיבה; בלעדיו יש רק קו מתחת לטקסט.

יש גם hintText, דוגמה אפורה כמו you@example.com, אבל היא נעלמת ברגע שמתחילים להקליד. השתמשו בתווית כדי לתת לשדה שם, וברמז רק כתוספת.

שדה נמתח לרוחב שניתן לו. כאן Column נמצא בתוך Padding, שמרחיק אותו מקצוות המסך.

challenge icon

אתגר

קל

מתחת לכותרת, אחרי SizedBox בגודל 16, הוסף TextField עם התווית Email ועם מסגרת מסביב.

נסו בעצמכם

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)),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה הוספת אינטראקטיביות

תרגלו בעצמכם: קומפיילר Flutter אונליין