الأزرار النصية والمحددة بإطار

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 3 من 34.

في Flutter ثلاثة أزرار تعمل بالطريقة نفسها، باستخدام onPressed: وchild:. وتختلف في مدى بروز مظهرها:

ElevatedButton: ممتلئ باللون. استخدمه للإجراء الأساسي، مثل الحفظ.
OutlinedButton: له إطار دون تعبئة. خيار ثانٍ، مثل المعاينة.
TextButton: نص فقط. الأقل بروزًا، لإجراءات مثل الإلغاء.

OutlinedButton(onPressed: () {}, child: Text('Preview'))
TextButton(onPressed: () {}, child: Text('Cancel'))

إن وجود زر بارز واحد وأزرار أقل بروزًا حوله على الشاشة يوضح للناس ما ينبغي الضغط عليه أولًا. لتغيير نوع الزر، غيّر اسمه فقط.

التحدي

سهل

الأزرار الثلاثة كلها من نوع ElevatedButton. أبقِ Save كما هو، واجعل Preview من نوع OutlinedButton وCancel من نوع TextButton.

جرّب بنفسك

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: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Save')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Preview')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Cancel')),
            ],
          ),
        ),
      ),
    );
  }
}