حقل النص الأول
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 22 من 34.
حقل TextField هو مربع يمكن للناس الكتابة فيه. اضغط عليه في المعاينة واكتب باستخدام لوحة المفاتيح.
TextField(
decoration: InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
)يحدّد decoration: مظهر الحقل. يسمّي labelText الحقل: يظهر داخل المربع الفارغ ويرتفع إلى الحد عند بدء الكتابة، لذا يبقى الاسم ظاهرًا دائمًا. يرسم OutlineInputBorder() مربعًا يحيط به من جميع الجهات؛ وبدونه لا يوجد سوى خط أسفل النص.
يتوفر أيضًا hintText، وهو مثال رمادي مثل you@example.com، لكنه يختفي بمجرد أن تبدأ الكتابة. استخدم تسميةً لتسمية الحقل، وتلميحًا كإضافة فقط.
يمتد الحقل عبر العرض المتاح له. هنا، يوجد Column داخل Padding، الذي يُبقيه بعيدًا عن حواف الشاشة.
التحدي
سهلأضف أسفل العنوان، بعد 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)),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمريرتدرّب بنفسك: مترجم Flutter عبر الإنترنت