Nút có nền và nút viền

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 3 trên 34.

Flutter có ba nút (button) hoạt động giống nhau, với onPressed: và child:. Chúng khác nhau ở mức độ nổi bật:

ElevatedButton: có màu nền. Dùng nút này cho hành động chính, chẳng hạn như Lưu.
OutlinedButton: có viền và không có màu nền. Dùng cho lựa chọn thứ hai, chẳng hạn như Xem trước.
TextButton: chỉ có văn bản. Đây là nút ít nổi bật nhất, dùng cho những hành động như Hủy.

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

Một màn hình có một nút nổi bật và các nút ít nổi bật hơn xung quanh sẽ giúp mọi người biết nên nhấn nút nào trước. Để đổi loại nút, bạn chỉ cần đổi tên.

Thử thách

Dễ

Cả ba nút đều là ElevatedButton. Giữ nguyên Save, đổi Preview thành OutlinedButton và Cancel thành TextButton.

Tự làm thử

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