Widgets الأساسية — أساسيات Flutter

Widgets في Flutter

كل شيء في Flutter هو Widget!

1. Text Widget

Text(
  'مرحباً بك!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

2. Container Widget

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(horizontal: 20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(0, 4),
      ),
    ],
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
  ),
  child: Text('محتوى'),
)

3. Image Widget

// من الأصول
Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

// من الإنترنت
Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, progress) {
    if (progress == null) return child;
    return CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

// دائرية
ClipRRect(
  borderRadius: BorderRadius.circular(50),
  child: Image.network(url, width: 100, height: 100),
)

// أو
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage(url),
)

4. Buttons

// ElevatedButton (مرتفع)
ElevatedButton(
  onPressed: () => print('ضغط'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text('اضغط هنا'),
)

// TextButton (نصي)
TextButton(
  onPressed: () {},
  child: Text('زر نصي'),
)

// OutlinedButton (محدد)
OutlinedButton(
  onPressed: () {},
  child: Text('زر محدد'),
)

// IconButton
IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  onPressed: () {},
)

// FloatingActionButton
FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

5. TextField

TextField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'الاسم',
    hintText: 'أدخل اسمك',
    prefixIcon: Icon(Icons.person),
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () => _controller.clear(),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    filled: true,
    fillColor: Colors.grey[100],
  ),
  keyboardType: TextInputType.text,
  obscureText: false, // true لكلمة المرور
  onChanged: (value) => print(value),
  onSubmitted: (value) => print('Submitted: $value'),
)

6. ListView

// قائمة ثابتة
ListView(
  children: [
    ListTile(title: Text('عنصر 1')),
    ListTile(title: Text('عنصر 2')),
    ListTile(title: Text('عنصر 3')),
  ],
)

// قائمة ديناميكية (الأفضل)
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('$\{index + 1}')),
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      trailing: Icon(Icons.arrow_forward_ios),
      onTap: () {},
    );
  },
)

// مع فواصل
ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

7. Card

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        Text('عنوان', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('محتوى البطاقة'),
      ],
    ),
  ),
)