Flutter textField隨著鍵盤彈出升高，點擊空白處收回鍵盤

1、Flutter中的textField要想實現隨著鍵盤彈出自動升高，必須要在Scaffold中，如下所示

創新互聯公司是一家集網站建設,方正企業網站建設,方正品牌網站建設,網站定制,方正網站建設報價,網絡營銷,網絡優化,方正網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

2、如果textfield位置比較下面或者小屏幕時，在鍵盤彈出的時候導致溢出bug

這時候可以嵌套一層SingleChildScrollView（具體嵌套位置可以根據需要調整），如下所示

效果如下：

3、點擊空白處收起鍵盤，直接嵌套一層GestureDetector即可，嵌套位置可以在Scaffold的body層，可以自己調整。

flutter 鍵盤彈出時list view 置底

1、點擊輸入flutter框彈出軟鍵盤時，遮擋本輸入框一部分。

2、點擊輸入框，輸入框跟隨軟鍵盤自動上移時其他不該移動的內容也跟隨上移導致的flutter鍵盤彈出時listview置底。

Flutter中showDialog()后關閉Dialog

在耗時操作的時候，一般都要彈出一個加載框，然后在完成的時候再把加載框關掉，在Flutter中可以直接用showDialog()來彈出一個對話框。

這是一個簡單的提示對話框，包含了關閉按鈕，點擊就能關閉。但一般的耗時操作完成，就需要我們自己把dialog關閉掉。

首先，開啟dialog的時機。由于我們需要獲取到BuildContext，所以就得等build()方法走完，這里可以用Future.delayed()來等創建好BuildContext再進行創建，或者用Timer來延遲操作，我選擇了前者。

其中delayed()在initState()結尾來做就行，這里參考網友封裝了一個LoadingDialog。

那么接下來要在什么時機關閉呢？

一開始，我理所當然的以為，是在異步方法結束后，去更新界面的時候關閉，也就是setState(() {})的時候，可是不管怎么嘗試，用Navigator.pop()不行，用Navigator.of(context, rootNavigator: true).pop(result)也不行，用FlutterBoost.singleton.close(id)也不行，用FlutterBoost.singleton.closeCurrent()也不行，都會直接把非Dialog的頁面也關閉掉，這讓我百思不得其解，因為showDialog()的本質也是新建了一個Route出來，也就是最頂層的頁面是彈出的Dialog，可是為什么關不掉呢。

一番思前想后，把showDialog的邏輯移到和異步邏輯同級，也就是setState(() {})外面，然后把showDialog()自身創建的BuildContext傳進去就能正常關閉了。也就是，在setState(() {})的時候，其實用的context還是非Dialog頁面的，所以關閉的當然就不是Dialog了。

持有Dialog自己的BuildContext，然后在異步以后調用就行了。

flutter中關于軟鍵盤彈起導致的問題

原因：在flutter中，鍵盤彈起時系統會縮小Scaffold的高度并重建

1）把Scaffold的resizeToAvoidBottomInset屬性設置為false，這樣在鍵盤彈出時將不會resize

2）把寫死的高度改為 原高度 - MediaQuery.of(context).viewInsets.bottom ，鍵盤彈出時布局將重建，而這個 MediaQuery.of(context).viewInsets.bottom 變量在鍵盤彈出前是0，鍵盤彈起后的就是鍵盤的高度

將輸入框放進可滾動的Widget中即可，當輸入框獲取焦點后，系統會自動將它滑動到可視區域

Flutter 自定義彈窗組件

封裝的彈窗必須要靈活，滿足實際開發中的大部分彈窗，比如有無標題、有無內容、有無關閉按鈕、有無操作按鈕以及按鈕的排列樣式等需要滿足多元化～

共有四個文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

彈窗主要調用類，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定義配置背景顏色、字體大小、顏色、統一回調、自定義按鈕、單獨回調、是否帶三角標志、任意位置、最大高度、超過可以滑動等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

中間、底部彈窗的彈窗widget

頂部彈窗的彈窗widget

頂部彈窗的數據源數據模型item

github傳送門：

Flutter 22: 圖解 PopupMenu 那些事兒

小菜需要處理標題欄彈出對話框 PopupMenu 樣式， Flutter 當然提供了一些處理方式，類似 PopupMenuEntry 等，小菜僅就最基礎的使用方式進行初步的學習和整理。

PopupMenuItem 為單個 item 的彈出樣式，默認為 48px 高，可根據需求自行定義。 item 中可以自定義需要的樣式，包括文字圖片等一系列樣式。

Tips: 若需要處理帶圖標的樣式時，官網提供的 Demo 是借助的 ListTile 來處理的，但是小菜測試發現圖標與文字距離偏大，原因在于 ListTile 默認左側圖標 leading 距離不可直接調整，建議用 Row 或其他方式調整。

CheckedPopupMenuItem 是一個帶有復選標記的彈出菜單項。默認高度同樣是 48px ，水平布局使用 ListTile 復選標記是 Icons.done 圖標，顯示在 leading 位置；同時只有在狀態為選中時才會顯示圖標。

PopupMenuDivider 是一條水平分割線，注意數組要使用父類 PopupMenuEntry ，配合其他 item 樣式共同使用。 PopupMenuDivider 可以調整高度，但無法調整顏色，有需要的話可以進行自定義。

PopupMenu 默認的彈框位置都是在右上角，且會擋住標題欄，如果有需要在其他位置彈框就需要借助 showMenu ，主要通過 position 屬性定位彈框位置。

menu 的寬高與內容相關，小菜的理解是在水平和豎直方向上會將設置的 position 位置加上 menu 寬高，再與屏幕匹配，超過屏幕寬高，根據 position 按照 LTRB 順序貼近屏幕邊框展示。

Tips: 如果 item 個數過多也無需擔心，Flutter 支持默認超過屏幕滑動效果。

小菜目前的學習還僅限于基本的使用，稍高級的自定義涉及較少，如果又不對的地方還希望多多指出。