Hướng dẫn và ví dụ Flutter ElevatedButton

ElevatedButton
Examples
child
onPressed
onLongPress
style
focusNode
autofocus
clipBehavior

1. ElevatedButton

Trong Flutter, ElevatedButton được sử dụng để tạo ra một nút với độ nhô lên (elevation) lớn hơn 0 theo mặc định.

Lớp ElevatedButton được tạo ra để thay thế lớp RaisedButton (Đã bị đánh dấu là lỗi thời từ từ tháng 10 năm 2020). Đây là một trong các nỗ lực của nhóm phát triển Flutter làm đơn giản hoá và nhất quán Flutter API.

ElevatedButton Constructor:

ElevatedButton Constructor

const ElevatedButton(
    {Key key,
    @required Widget child,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus: false,
    Clip clipBehavior: Clip.none
    }
)

ElevatedButton.icon constructor:

ElevatedButton.icon Constructor

ElevatedButton.icon(
    {Key key,
    @required Widget icon,
    @required Widget label,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus,
    Clip clipBehavior
  }
)

Nếu cả hai hàm callback: onPressed và onLongPress không được chỉ định, thì ElevatedButton sẽ bị vô hiệu hóa (disabled) và không có phản ứng khi chạm vào.

2. Examples

Dưới đây là một ví dụ bao gồm 2 ElevatedButton, một ElevatedButton mặc định và một ElevatedButton với kiểu dáng tùy biến, ở trạng thái bị nhấn (pressed) hoặc vô hiệu hóa (disabled) nó có độ nhô lên (elevation) là 0, còn ở các trạng thái khác nó có độ nhô lên là 10.

main.dart (ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter ElevatedButton Example")
        ),
        body: Center (
            child: Column (
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton (
                  child: Text("Default ElevatedButton"),
                  onPressed: () {},
                ),
                ElevatedButton (
                    child: Text("Custom ElevatedButton"),
                    onPressed: () {},
                    style: ButtonStyle(
                        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
                        elevation: MaterialStateProperty.resolveWith<double>(
                              (Set<MaterialState> states) {
                            if (states.contains(MaterialState.pressed)
                                ||  states.contains(MaterialState.disabled)) {
                              return 0;
                            }
                            return 10;
                          },
                        )
                    )
                )
              ],
            )
        )
    );
  }
}

3. child

child là một property quan trọng nhất của ElevatedButton, trong hầu hết các trường hợp sử dụng nó là một đối tượng Text.

@required Widget child

Ví dụ đơn giản nhất với child là một đối tượng Text:

ElevatedButton (
  child: Text("Default ElevatedButton"),
  onPressed: () {},
)

Gán đối tượng Row cho property child bạn có thể tạo được một ElevatedButton phức tạp hơn, chẳng hạn bao gồm Icon và Text.

Hướng dẫn và ví dụ Flutter Row

child (ex2)

// 1 Icon and 1 Text
ElevatedButton (
  child: Row (
    children: [
      Icon(Icons.settings),
      SizedBox(width: 5),
      Text("Settings")
    ],
  ) ,
  onPressed: () {},
)

// 2 Icons and 1 Text
ElevatedButton (
  child: Row (
    children: [
      Icon(Icons.directions_bus),
      Icon(Icons.train),
      SizedBox(width: 5),
      Text("Transportation")
    ],
  ) ,
  onPressed: () {},
)

Tuy nhiên, cách tốt nhất để có một ElevatedButton với Text và Icon bạn nên sử dụng constructor ElevatedButton.icon:

main.dart (ex2)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(

        appBar: AppBar(
            title: Text("Flutter ElevatedButton Example")
        ),
        body: Center (
            child: ElevatedButton.icon (
              icon: Icon(Icons.settings),
              label: Text("Settings"),
              onPressed: () {},
            )
        )
    );
  }
}

4. onPressed

onPressed là một hàm callback, nó được gọi khi người dùng nhấp (click) vào Button. Cụ thể là sự kiện onPressed sẽ xẩy ra khi người dùng hoàn thành cả 2 thao tác bao gồm nhấn xuống (press down) và nhả ra (release) khỏi Button.

@required VoidCallback onPressed

Chú ý: Nếu cả hai property: onPressed và onLongPress không được chỉ định thì Button sẽ bị vô hiệu hóa, không có phản ứng khi chạm vào.

main.dart (onPressed ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int pressCount = 0;
  final List<Color> colors = [Colors.amberAccent, Colors.cyan, Colors.deepOrangeAccent];


  @override
  Widget build(BuildContext context) {
    return Scaffold (
        backgroundColor:  this.colors[ pressCount % this.colors.length],
        appBar: AppBar(
          title: Text("Flutter ElevatedButton Example"),
        ),
        body: Center (
          child:  ElevatedButton (
              child: Text("Click Me! " + this.pressCount.toString()),
              onPressed: ()  {
                this.setState(() {
                  this.pressCount++;
                });
              }
          ),
        )
    );
  }
}

5. onLongPress

onLongPress là một hàm callback, nó được gọi khi người dùng nhấn xuống (press down) button trong một khoảng thời gian lâu hơn LONG_PRESS_TIMEOUT mili giây. Sự kiện Long-Press sẽ xẩy ra tại mili giây thứ LONG_PRESS_TIMEOUT kể từ khi người dùng nhấn xuống nếu trong khoảng thời gian này (0 --> LONG_PRESS_TIMEOUT) người dùng không di chuyển con trỏ (Ngón tay).

VoidCallback onLongPress

Nếu bạn chỉ định 2 hàm callback: onPressed và onLongPress cho một button thì trong bất kỳ một tình huống nào cũng chỉ có nhiều nhất một hàm được gọi.

LONG_PRESS_TIMEOUT

500 milliseconds

Nếu người dùng nhấn xuống (press down) và nhả ra (release) trước thời điểm LONG_PRESS_TIMEOUT sẽ chỉ có sự kiện onPressed xẩy ra.

Nếu người dùng nhấn xuống lâu hơn LONG_PRESS_TIMEOUT mili giây, sự kiện onLongPress sẽ xẩy ra và Flutter sẽ bỏ qua sự kiện onPressed xẩy ra sau đó.

main.dart (onLongPress ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int pressedCount = 0;
  int longPressCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Pressed: " + this.pressedCount.toString()
              +" --- Long Press: " + this.longPressCount.toString()),
        ),
        body: Center (
          child:  ElevatedButton (
              child: Text("Test Me"),
              onPressed: onPressHander,
              onLongPress: onLongPressHandler
          ),
        )
    );
  }

  onPressHander()  {
    this.setState(() {
      this.pressedCount++;
    });

    showDialog (
        context: context,
        builder: (_) => new AlertDialog(
          title: new Text("Message"),
          content: new Text("OK, You just Pressed!"),
          actions: <Widget>[
            FlatButton(
              child: Text('Close me!'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        ));
  }

  onLongPressHandler()  {
    this.setState(() {
      this.longPressCount++;
    });
    showDialog (
        context: context,
        builder: (_) => new AlertDialog(
          title: new Text("Message"),
          content: new Text("Hey, I show up for long press"),
          actions: <Widget>[
            FlatButton(
              child: Text('Close me!'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        ));
  }

}

6. style

Property style được sử dụng để tùy biến kiểu dáng của button.

ButtonStyle style

ButtonStyle constructor

const ButtonStyle(
    {MaterialStateProperty<TextStyle> textStyle,
    MaterialStateProperty<Color> backgroundColor,
    MaterialStateProperty<Color> foregroundColor,
    MaterialStateProperty<Color> overlayColor,
    MaterialStateProperty<Color> shadowColor,
    MaterialStateProperty<double> elevation,
    MaterialStateProperty<EdgeInsetsGeometry> padding,
    MaterialStateProperty<Size> minimumSize,
    MaterialStateProperty<BorderSide> side,
    MaterialStateProperty<OutlinedBorder> shape,
    MaterialStateProperty<MouseCursor> mouseCursor,
    VisualDensity visualDensity,
    MaterialTapTargetSize tapTargetSize,
    Duration animationDuration,
    bool enableFeedback}
)

Kiểu dáng mặc định của ElevatedButton được định nghĩa bởi phương thức defaultStyleOf.

@override
ButtonStyle defaultStyleOf (
     BuildContext context
)

Ví dụ: Một ElevatedButton với mầu nền (background color) và mầu chữ (foreground color) thay đổi dựa trên trạng thái của nó.

style (ex1)

ElevatedButton (
    child: Text("ElevatedButton 1"),
    onPressed: () {},
    style: ButtonStyle (
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.pressed)) {
                return Colors.black45;
              }
              return null; // Use the component's default.
            }
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.yellow;
            }
            return null; // Use the component's default.
          },
        )
    )
)

Ví dụ: Một ElevatedButton với độ nhô lên (elevation) là 10, trong trạng thái bị nhấn (pressed) hoặc vô hiệu hóa (disabled) nó có độ nhô lên là 0.

style (ex2)

ElevatedButton (
    child: Text("ElevatedButton 2"),
    onPressed: () {},
    style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.disabled)) {
                return Colors.black26;
              }
              return Colors.cyan;
            }
        ),
        // foregroundColor is red for all states.
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        elevation: MaterialStateProperty.resolveWith<double>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)
                ||  states.contains(MaterialState.disabled)) {
              return 0;
            }
            return 10;
          },
        )
    )
)

ElevatedButton.styleFrom()

Phương thức tĩnh ElevatedButton.styleFrom() là cách thuận tiện để tạo một kiểu dáng cho ElevatedButton từ các giá trị đơn giản.

ElevatedButton.styleFrom static method

ButtonStyle styleFrom (
    {Color primary,
    Color onPrimary,
    Color onSurface,
    Color shadowColor,
    double elevation,
    TextStyle textStyle,
    EdgeInsetsGeometry padding,
    Size minimumSize,
    BorderSide side,
    OutlinedBorder shape,
    MouseCursor enabledMouseCursor,
    MouseCursor disabledMouseCursor,
    VisualDensity visualDensity,
    MaterialTapTargetSize tapTargetSize,
    Duration animationDuration,
    bool enableFeedback}
)

Ví dụ:

style (ex3)

ElevatedButton.icon (
  icon: Icon(Icons.settings),
  label: Text("Settings"),
  onPressed: () {},
  // Use ElevatedButton.styleFrom static method
  style: ElevatedButton.styleFrom(
      shadowColor : Colors.redAccent,
      elevation: 10,
      minimumSize: Size( 100,   80 )
  )
)

ButtonStyle
MaterialStateProperty

7. focusNode

FocusNode focusNode

Hướng dẫn và ví dụ Flutter FocusNode

8. autofocus

bool autofocus: false

Flutter change Focus

9. clipBehavior

Clip clipBehavior: Clip.none

Flutter Clip clipBehavior