Flutter Button Series: FloatingActionButton

Hi everyone, chào mừng các bạn đến với series về Button trong Flutter, bài viết hôm nay mình sẽ giới thiệu về FloatingActionButton

1. ButtonBar
2. DropdownButton
3. FlatButton
4. FloatingActionButton
5. IconButton
6. PopupMenuButton
7. RaisedButton

FloatingActionButton là 1 trong số button thuộc material disign. Nó là 1 icon button hình tròn, thường được thiết kế nằm phía trên 1 nội dung nào đó để làm nổi bật 1 tính năng nào đó trong ứng dụng. FloatingActionButton thường xuyên được sử dụng trong Scaffold với thuộc tính floatingActionButton

Mỗi màn hình nếu có sử dụng FloatingActionButton thì chỉ sử dụng 1 button duy nhất với các mục đích như "create", "share", "navigate"

Ví dụ như này:

Điểm qua các thuộc tính của FloatingActionbutton

Trên đây mình đã giới thiệu với các bạn những cái cơ bản nhất về FloatingActionButton. Đến đây chắc bạn cũng đã nắm được phần nào về nó rồi phải không nào. Và sau đây mình sẽ làm 1 số đoạn code nhỏ để minh họa nha.

// Flutter code sample for material.FloatingActionButton.1

// This example shows how to make a simple [FloatingActionButton] in a
// [Scaffold], with a pink [backgroundColor] and a thumbs up [Icon].

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Action Button Sample'),
      ),
      body: Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        child: Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
      ),
    );
  }
}

OK, vậy là bài giới thiệu của mình về FloatingActionButton đến đây là kết thúc. Hẹn gặp lại ở các bài viết khác nha. Happy coding