Tombol Teks dan Garis Tepi

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 3 dari 34.

Flutter memiliki tiga tombol yang bekerja dengan cara yang sama, dengan onPressed: dan child:. Perbedaannya terletak pada seberapa mencolok tampilannya:

ElevatedButton: diisi warna. Gunakan untuk tindakan utama, seperti Simpan.
OutlinedButton: memiliki garis tepi dan tanpa isian. Pilihan kedua, seperti Pratinjau.
TextButton: hanya berupa teks. Tampilannya paling sederhana, untuk tindakan seperti Batal.

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

Layar dengan satu tombol mencolok dan tombol lain yang lebih sederhana di sekitarnya memberi tahu orang apa yang harus ditekan terlebih dahulu. Untuk mengubah jenis tombol, ubah namanya saja.

Tantangan

Mudah

Ketiga tombol tersebut adalah ElevatedButton. Biarkan Save seperti semula, jadikan Preview sebagai OutlinedButton dan Cancel sebagai TextButton.

Coba sendiri

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