כפתורי טקסט וכפתורים עם מסגרת

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-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')),
            ],
          ),
        ),
      ),
    );
  }
}