Dòng nút rung: PopupMothyButton

Thứ Tư, 20/11/2019

Tram Ho

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ề PopupMenuButton

ButtonBar
DropdownButton
FlatButton
FloatingActionButton
IconButton
PopupMenuButton
RaisedButton

Popup menu dùng để hiển thị 1 danh sách các item dạng popup, khi 1 item được lựa chọn thì popup menu sẽ biến mất. Giá trị của item được chọn sẽ pass qua callback onSelected().

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

Thuộc tính	Ý nghĩa
child	Nếu thuộc tính này được cung cấp, thì widget sẽ được sử dụng cho button
elevation	xem thêm tại đây
enable	Thuộc tính này là non-null, có giá trị mặc định là true, lúc này nó có thể tương tác được. Nếu thuộc tính này được set giá trị là false, popup sẽ ở trạng thái không thể tương tác được, và được set style là disable từ Theme hiện tại đang sử dụng. onSelected, onCanceled, itemBuilder sẽ không được gọi nữa
icon	Nếu thuộc tính này được cung cấp, thì icon sẽ được sử dụng cho button
initalValue	Khởi tạo giá trị hiển thị mặc định cho popup menu, đồng thời nó sẽ được bôi đậm trong danh sách item khi được show
itemBuilder	callback này được gọi khi click vào button để tạo ra danh sách các item
offset	xem thêm tại đây
onCanceled	callback này được gọi khi popup biến mất mà không select vào item nào
onSelected	call back này được gọi khi popup biến mất đồng thời 1 item được select
padding	thiết lập padding cho icon của button
tooltip	Dùng để định nghĩa mô tả khi có action press vào button. Nó sẽ xuất hiên nếu người dùng long-pressed

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ề PopupMunuButton. Đế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.

<span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span>

<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">static</span> <span class="token keyword">const</span> String _title <span class="token operator">=</span> <span class="token string">'Flutter Code Sample'</span><span class="token punctuation">;</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span>
      title<span class="token punctuation">:</span> _title<span class="token punctuation">,</span>
      home<span class="token punctuation">:</span> <span class="token function">MyPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">MyPage</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  MyPageState <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">MyPageState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">MyPageState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token operator">&lt;</span>MyPage<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> _selection<span class="token punctuation">;</span>

  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span>
        title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Popup Button Sample'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token function">_buildBody</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  Widget <span class="token function">_buildBody</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Column</span><span class="token punctuation">(</span>
      children<span class="token punctuation">:</span> <span class="token operator">&lt;</span>Widget<span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token function">_buildContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">_buildPopupMenu</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  Widget <span class="token function">_buildPopupMenu</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> PopupMenuButton<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span>
      onSelected<span class="token punctuation">:</span> <span class="token punctuation">(</span>int result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          _selection <span class="token operator">=</span> result<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token operator">&lt;</span>PopupMenuEntry<span class="token operator">&lt;</span>int<span class="token operator">&gt;&gt;</span><span class="token punctuation">[</span>
            <span class="token keyword">const</span> PopupMenuItem<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span>
              value<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Number one'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token keyword">const</span> PopupMenuItem<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span>
              value<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Number two'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token keyword">const</span> PopupMenuItem<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span>
              value<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Number three'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token keyword">const</span> PopupMenuItem<span class="token operator">&lt;</span>int<span class="token operator">&gt;</span><span class="token punctuation">(</span>
              value<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Number four'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  Widget <span class="token function">_buildContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">Center</span><span class="token punctuation">(</span>
      child<span class="token punctuation">:</span> <span class="token function">Padding</span><span class="token punctuation">(</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">64.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>
          _selection<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">64.0</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>pinkAccent<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

static const String _title = 'Flutter Code Sample';

@override

Widget build(BuildContext context) {

return MaterialApp(

title: _title,

home: MyPage(),

);

}

class MyPage extends StatefulWidget {

@override

MyPageState createState() => MyPageState();

}

class MyPageState extends State<MyPage> {

var _selection;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Popup Button Sample'),

),

body: _buildBody(),

);

}

Widget _buildBody() {

return Column(

children: <Widget>[_buildContent(), _buildPopupMenu()],

);

}

Widget _buildPopupMenu() {

return PopupMenuButton<int>(

onSelected: (int result) {

setState(() {

_selection = result;

});

},

itemBuilder: (BuildContext context) => <PopupMenuEntry<int>>[

const PopupMenuItem<int>(

value: 1,

child: Text('Number one'),

),

const PopupMenuItem<int>(

value: 2,

child: Text('Number two'),

),

const PopupMenuItem<int>(

value: 3,

child: Text('Number three'),

),

const PopupMenuItem<int>(

value: 4,

child: Text('Number four'),

),

],

);

}

Widget _buildContent() {

return Center(

child: Padding(

padding: const EdgeInsets.all(64.0),

child: Text(

_selection.toString(),

style: TextStyle(fontSize: 64.0, color: Colors.pinkAccent),

),

);

}

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

Series:

ButtonBar
DropdownButton
FlatButton
FloatingActionButton
IconButton
PopupMenuButton
RaisedButton

Tài liệu tham khảo:
PopupMenuButton.class

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Dòng nút rung: PopupMothyButton

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript