openplanning

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

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Flutter IconButton

Trong Flutter, IconButton là một button với một biểu tượng (Icon), người dùng có thể click vào nó để thực hiện một hành động. IconButton sẽ không bao gồm nội dung văn bản, nếu bạn muốn có một button bao gồm biểu tượng và văn bản hãy sử dụng FlatButton hoặc RaisedButton.
IconButton Constructor:
IconButton Contructor

const IconButton (
    {Key key,
    double iconSize: 24.0,
    VisualDensity visualDensity,
    EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
    AlignmentGeometry alignment: Alignment.center,
    double splashRadius,
    @required Widget icon,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Color disabledColor,
    @required VoidCallback onPressed,
    MouseCursor mouseCursor: SystemMouseCursors.click,
    FocusNode focusNode,
    bool autofocus: false,
    String tooltip,
    bool enableFeedback: true,
    BoxConstraints constraints}
)
IconButton thường được sử dụng như một action trong property AppBar.actions, nó cũng được sử dụng trong nhiều tình huống khác.
Vùng tương tác (hit region) của IconButton là vùng có thể cảm nhận được sự tương tác của người dùng, nó có kích thước nhỏ nhất là kMinInteractiveDimension (48.0) bất kể kích thước thực sự của Icon là thế nào.

2- icon

Property icon được sử dụng để chỉ định một biểu tượng (icon) cho IconButton.

@required Widget icon
main.dart (icon ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      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("IconButton Example"),
      ),
      body: Center(
          child:  IconButton (
              icon: Icon(Icons.directions_bus),
              onPressed: () {
                print("Pressed");
              }
          )
      ),
    );
  }
}
Bạn có thể gán một đối tượng Widget bất kỳ cho property IconButton.icon, nhưng nó nên chứa một biểu tượng (icon) hoặc hình ảnh (image), các trường hợp khác là không phù hợp với mục tiêu thiết kế của IconButton.
ImageButton - icon (ex2)

IconButton (
    icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
    onPressed: () {
      print("Pressed");
    }
)
Hãy xem điều gì xẩy ra nếu IconButton.icon là một đối tượng Text?
ImageButton - icon (ex3)

IconButton (
    icon: Text("???????????"),
    onPressed: () {
      print("Pressed");
    }
)
  • TODO Link?

3- iconSize

Property iconSize được sử dụng để chỉ định kích thước của biểu tượng (icon), giá trị mặc định của nó là 24. Nếu kích thước thực sự của icon lớn hơn iconSize nó sẽ bị co lại bằng iconSize khi hiển thị, ngược lại kích thước hiển thị của icon sẽ không thay đổi.

double iconSize: 24.0
Ví dụ:

IconButton (
  icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
  onPressed: () {
    print("Pressed");
  },
  iconSize: 96
)
Vùng tương tác (Hit region) của IconButton là vùng cảm nhận được sự tương tác của người dùng, chẳng hạn click. Giá trị của iconSize càng lớn thì vùng tương tác cũng càng lớn, bất kể kích thước thực sự của icon là như thế nào. Tuy nhiên vùng tương tác sẽ có kích thước nhỏ nhất là kMinInteractiveDimension (48.0) để đảm bảo rằng nó không quá bé đối với người dùng để có thể tương tác.
Nếu kích thước thực sự của icon lớn hơn iconSize thì nó sẽ bị co lại bằng với iconSize khi hiển thị.
main.dart (iconSize ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      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("IconButton Example"),
      ),
      body: Center(
          child: getIconButtons()
      ),
    );
  }

  Widget getIconButtons()  {
    double MAX_SIZE = 96;
    double LEFT = 30;
    return  Center(

        child: Column (

            children: [
              Row (
                  children: [
                    SizedBox(width: LEFT),
                    IconButton (
                      icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_96.png"),
                      onPressed: () {
                        print("Pressed");
                      },
                      iconSize: MAX_SIZE,
                    ),
                    Text("Real Size: 96"),
                    Text(" --- "),
                    Text("Set iconSize: " + MAX_SIZE.toString()),
                  ]
              ),
              Row (
                  children: [
                    SizedBox(width: LEFT),
                    IconButton (
                      icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_72.png"),
                      onPressed: () {
                        print("Pressed");
                      },
                      iconSize: MAX_SIZE,
                    ),
                    Text("Real Size: 72"),
                    Text(" --- "),
                    Text("Set iconSize: " + MAX_SIZE.toString()),
                  ]
              ),
              Row (
                  children: [
                    SizedBox(width: LEFT),
                    IconButton (
                      icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
                      onPressed: () {
                        print("Pressed");
                      },
                      iconSize: MAX_SIZE,
                    ),
                    Text("Real Size: 24"),
                    Text(" --- "),
                    Text("Set iconSize: " + MAX_SIZE.toString()),
                  ]
              ),
            ])
    );
  }
}

4- onPressed

onPressed là một hàm callback sẽ được gọi khi người dùng nhấn xuống IconButton. Nếu onPressed không được chỉ định IconButton sẽ bị vô hiệu hóa (disabled), không có phản ứng gì khi người dùng nhấp vào nó.

@required VoidCallback onPressed;

IconButton (
    icon: Icon(Icons.directions_bus),
    onPressed: () {
      print("Pressed");
    }
)

// Or:

Function onPressedHandler = () {
    print("Pressed");
};

....

IconButton (
    icon: Icon(Icons.directions_bus),
    onPressed: onPressedHandler
)
Ví dụ:
main.dart (onPressed ex2)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      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 clickCount = 0;

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

        appBar: AppBar(
          title: Text("IconButton Example. Click count: " + this.clickCount.toString()),
        ),
        body: IconButton (
            icon: Icon(Icons.directions_bus),
            onPressed: ()  {
              setState(() {
                this.clickCount++;
              });
            }
        )
    );
  }
}


 

5- color

Property color chỉ định mầu sắc cho icon bên trong IconButton khi IconButton này đang trong trạng thái thông thường (Enabled).

Color color
color (ex1)

IconButton (
  icon: Icon(Icons.directions_boat),
  onPressed: () {
    print("Pressed");
  },
  iconSize: MAX_SIZE,
  color: Colors.blue,
),

6- disabledColor

Property disabledColor chỉ định mầu sắc cho icon bên trong IconButton khi IconButton này đang trong trạng thái bị vô hiệu hóa (disabled). Một IconButton sẽ ở trong trạng thái bị vô hiệu hóa nếu onPressednull hoặc không được chỉ định.

Color disabledColor
disabledColor (ex1)

IconButton (
  icon: Icon(Icons.directions_boat),
  iconSize: 64
  disabledColor: Colors.black45,
),

7- splashRadius

Property splashRadius chỉ định bán kính của chớp sáng bao quanh IconButton khi người dùng nhấn xuống IconButton. Giá trị mặc định của nó là defaultSplashRadius (35).

double splashRadius
splashRadius (ex1)

IconButton (
  icon: Icon(Icons.directions_bus),
  onPressed: () {
    print("Pressed");
  },
  splashRadius: 50,
)

8- splashColor

Property splashColor chỉ định mầu sắc chính (primary color) của chớp sáng bao quanh vị trí mà người dùng nhấn xuống (press down) IconButton.

Color splashColor
splashColor (ex1)

IconButton (
    icon: Icon(Icons.directions_bus),
    onPressed: () {
      print("Pressed");
    },
    splashRadius: 100,
    splashColor: Colors.lightGreenAccent
)

9- highlightColor

Property splashColor chỉ định mầu sắc phụ (secondary color) của chớp sáng bao quanh vị trí mà người dùng nhấn xuống (press down) IconButton.

Color highlightColor
highlightColor (ex1)

IconButton (
  icon: Icon(Icons.directions_bus),
  onPressed: () {
    print("Pressed");
  },
  splashRadius: 100,
  splashColor: Colors.blue,
  highlightColor: Colors.red,
),

10- hoverColor


Color hoverColor

11- focusColor


Color focusColor

12- tooltip

Property tooltip là một văn bản mô tả về IconButton, nó sẽ xuất hiện khi người dùng nhấp vào IconButton này.

String tooltip
tooltip (ex1)

IconButton (
  icon: Icon(Icons.directions_bus),
  onPressed: () {
    print("Pressed");
  },
  iconSize: 64,
  tooltip: "Bus Direction",
)

13- focusNode


FocusNode focusNode
  • TODO Link?

14- autofocus


bool autofocus: false

15- enableFeedback


bool enableFeedback: true

16- visualDensity


VisualDensity visualDensity;
  • TODO Link?

17- padding

Property padding được sử dụng để thiết lập khoảng không gian nằm trong viền và bao quanh nội dung của button.

EdgeInsetsGeometry padding: const EdgeInsets.all(8.0)
padding (ex1)

IconButton (
    icon: Icon(Icons.directions_bus),
    onPressed: () {},
    color: Colors.blue,
    padding: EdgeInsets.all(10)
)

IconButton (
    icon: Icon(Icons.directions_car),
    onPressed: () {},
    color: Colors.blue,
    padding: EdgeInsets.fromLTRB(50, 10, 30, 10)
)

18- alignment


AlignmentGeometry alignment: Alignment.center

19- constraints


BoxConstraints constraints

20- mouseCursor


MouseCursor mouseCursor: SystemMouseCursors.click
  • TODO Link?

Xem thêm các chuyên mục: