Flutter 2.6 - Button widgets | RaisedButton, Flat Button, Outline Button, ...

 

1, RaisedButton vs ElevatedButton

Kể từ Flutter 2 (phát hành vào tháng 3 năm 2021), RaisedButton không dùng nữa (deprecated)

RaisedButton vẫn có thể sử dụng đc nhưng sẽ bị loại bỏ trong tương lai. RaisedButton sẽ đc thay thê bởi ElevatedButton.  ElevatedButton khác RaisedButton một chút về cách set style.

Ngoài ra

FlatButton đc thay thế bởi TextButton
OutlineButton đc thay thế bởi OutlinedButton

Code:

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      RaisedButton(
          child: Text('Raised Button'),
          color: Colors.blue,
          textColor: Colors.white,
          onPressed: () {
            print('Raised Button');
          }),
      FlatButton(
          child: Text('Flat Button'),
          textColor: Colors.blue,
          onPressed: () {
            print('Flat Button');
          }),
      OutlineButton(
          child: Text('Outline Button'),
          borderSide: BorderSide(color: Colors.blue),
          textColor: Colors.blue,
          onPressed: () {
            print('Outline Button');
          }),
      ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.deepPurpleAccent,
            onPrimary: Colors.white,
          ),
          onPressed: () {
            print('Elevated Button');
          }),
      TextButton(
          child: Text('Text Button'),
          style: TextButton.styleFrom(
            primary: Colors.red,
          ),
          onPressed: () {
            print('Text Button');
          }),
      OutlinedButton(
          child: Text('Outlined Button'),
          style: TextButton.styleFrom(
            primary: Colors.pink,
            side: BorderSide(color: Colors.pinkAccent)
          ),
          onPressed: () {
            print('Outlined Button');
          }),
    ],
  ),
),

Result:

• answerQuestion() và answerQuestion

answerQuestion(): function này sẽ đc chạy ngay khi build app, chứ k cần press button mới chạy -> error

answerQuestion: chạy khi ng dùng press button

Ngoài cách viết function xong gọi khi onPressed thì còn các cách khác như button 3 và 4. Tùy vào mục đích mà sử dụng các cách trên cho phù hợp.