Metin ve Kenarlıklı Düğmeler

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 3 / 34.

Flutter'da onPressed: ve child: ile aynı şekilde çalışan üç düğme vardır. Görünüşlerinin ne kadar dikkat çekici olduğu farklıdır:

ElevatedButton: renk dolgulu. Kaydet gibi ana işlem için kullan.
OutlinedButton: kenarlıklı ve dolgusuz. Önizleme gibi ikinci bir seçenek.
TextButton: yalnızca metin. İptal gibi işlemler için en sade seçenek.

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

Etrafında daha sade düğmeler bulunan tek bir dikkat çekici düğmenin olduğu bir ekran, insanlara önce neye basmaları gerektiğini gösterir. Bir düğmenin türünü değiştirmek için yalnızca adını değiştir.

Görev

Kolay

Üç düğmenin üçü de ElevatedButton türündedir. Save değerini olduğu gibi bırak, Preview değerini bir OutlinedButton, Cancel değerini ise bir TextButton yap.

Kendin dene

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')),
            ],
          ),
        ),
      ),
    );
  }
}