macos_ui
Version 2.1.0
現在のMacOSデザイン言語を実装するフラッターウィジェットとテーマ。
https://macosui.github.io/macos_ui/#/でインタラクティブウィジェットギャラリーをオンラインでチェックしてください
ガイド、コードラブ、その他のドキュメントは、https：//macosui.devにあります
macos_uiは、Flutterのstableチャネルに対して開発されています。 macos_uiでスムーズな開発エクスペリエンスを確保するには、Flutterのstableチャネルでアプリケーションを構築する必要があります。
pub.devは、 macos_ui macosのみをサポートしていることを示しています。これは、 macos_uiネイティブコードを呼び出すため、MacOSをpubspec.yamlファイルのプラグインプラットフォームとして指定しているためです。
macos_ui技術的には、 Flutterがサポートするあらゆるプラットフォームで動作しますが、MacOSで最良の結果が得られます。非Macosプラットフォームサポートは保証されていません。
ネイティブコードを呼び出すためにMacOS以外のプラットフォームでは機能しないmacos_uiの機能は次のとおりです。
macos_window_utilsに関連するものMacosColors.controlAccentColor()関数MacosColorWellウィジェットこの時点では、フラッターはUI要素がウィンドウの境界をオーバーフローすることを許可しないため、ポップアップは利用可能なスペースに制約されます。
したがって、 ToolBarPopupButtonのように、ツールバーにポップアップを作成するウィジェットを使用している場合は、アプリケーションウィンドウを最も高いポップアップの高さの下にサイズ変更することを避ける必要があります。
macos_ui貢献を歓迎します！詳細については、 CONTRIBUTING.md参照してください。
MacosWindow 、Macosスタイルのレイアウトの基本フレームです。
左側のSidebar 、上部のオプションのTitleBarをサポートし、ウィンドウの残りの部分は通常、 MacosScaffoldで記入されています。
MacosWindowの範囲はMacosWindowScopeによって提供されます。サイドバーはMacosWindowScope.of(context).toggleSidebar()で切り替えることができます。これを適切に動作させるには、 BuilderウィジェットにMacosScaffoldをラップする必要があることに注意してください。
サイドバーはアプリナビゲーションを可能にし、アプリ内のコンテンツのトップレベルのコレクションにすばやくアクセスできます。
サイドバーは、アプリの左右に配置できます。左側にサイドバーを配置するには、 MacosWindow.sidebarプロパティを使用します。右側にサイドバーを配置するには、 MacosWindow.endSidebarプロパティを使用します。
使用例：
int pageIndex = 0 ;
...
MacosWindow (
sidebar : Sidebar (
minWidth : 200 ,
builder : (context, scrollController) {
return SidebarItems (
currentIndex : pageIndex,
scrollController : scrollController,
itemSize : SidebarItemSize .large,
onChanged : (i) {
setState (() => pageIndex = i);
},
items : const [
SidebarItem (
label : Text ( 'Page One' ),
),
SidebarItem (
label : Text ( 'Page Two' ),
),
],
);
},
),
endSidebar : Sidebar (
startWidth : 200 ,
minWidth : 200 ,
maxWidth : 300 ,
shownByDefault : false ,
builder : (context, _) {
return const Center (
child : Text ( 'End Sidebar' ),
);
},
),
), MacosScaffoldは、「ページ」と呼ばれるものです。
足場にはtoolbarプロパティとchildren財産があります。 children ContentAreaウィジェットと複数のResizablePaneウィジェットを受け入れます。足場の下のナビゲーションまたはルートをキャッチするには、 CupertinoTabViewでMacosScaffoldをラッピングすることを検討してください。そうすることで、 MacosScaffold内のナビゲーションは、ウィンドウ全体を覆う代わりにMacosScaffold領域内に表示されます。 CupertinoTabViewに包まれたMacosScaffoldの外側のルートをプッシュするには、root Navigator Navigator.of(context, rootNavigator: true)を使用します。
カスタマイズとToolBar例については、ドキュメントを参照してください。
MacOSアプリの新しい外観がBig Sur（MacOS 11）で導入されました。 Flutterアプリでその外観に合わせて、Macos_uiはMacos_window_utilsに依存しています。したがって、Xcodeを使用してプロジェクトのmacos/Runner.xcworkspaceフォルダーを開き、 Runner.xcodeprojを検索してください。 Info > Deployment Targetに移動し、 macOS Deployment Targetを10.14.6以降に設定します。次に、プロジェクトのPodfileを開き（Xcodeに表示されない場合は、VSコードを介してプロジェクトのmacosディレクトリに表示できます）、最小展開バージョンを最初の行で10.14.6以上に設定します。
platform :osx , '10.14.6'また、xcodeでアプリのRunner.xcodeprojを開き、そこに最小展開バージョンを設定する必要がある場合があります。
次に、次のようにmain()内にウィンドウを構成します。
/// This method initializes macos_window_utils and styles the window.
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .unified,
);
await config. apply ();
}
void main () async {
await _configureMacosWindowUtils ();
runApp ( const YourAppHere ());
} MacosWindowでタイトルバー（ TitleBar ）を使用している場合は、窓のtoolbarStyleをNSWindowToolbarStyle.expandedに設定する必要があります。
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
}他のいずれの場合でも、 NSWindowToolbarStyle.unifiedとして保持する必要があります。
MacosScaffoldにツールバーを作成します。ツールバーは、MacOSアプリのタイトルバー（存在する場合）の下に表示されるか、 titleプロパティを使用して統合します。
ツールバーは、頻繁に使用されるコマンドと機能（ツールバーアイテム）への便利なアクセスを提供します。アプリの異なるルートには異なるツールバーがあります。
ツールバーのアイテムには、 ToolBarIconButton 、 ToolBarPulldownButton 、およびToolBarSpacerウィジェットが含まれており、 itemsプロパティを介して提供する必要があります。すべてのツールバーアイテムのアクションは、アプリのメニューバーコマンドとしても提供する必要があります。
ツールバーは最もよく見え、同じタイプの要素が含まれているときに理解するのが最も簡単です（したがって、すべてのツールバーアイテムにラベルを使用するかどうかにかかわらず）。
ToolBarSpacerウィジェットを使用して、さまざまなツールバーアクションのグループ化を設定できます。
ツールバーの例は次のとおりです。
ToolBar (
title : const Text ( 'Untitled Document' ),
titleWidth : 200.0 ,
leading : MacosBackButton (
onPressed : () => debugPrint ( 'click' ),
fillColor : Colors .transparent,
),
actions : [
ToolBarIconButton (
label : "Add" ,
icon : const MacosIcon (
CupertinoIcons .add_circled,
),
onPressed : () => debugPrint ( "Add..." ),
showLabel : true ,
),
const ToolBarSpacer (),
ToolBarIconButton (
label : "Delete" ,
icon : const MacosIcon (
CupertinoIcons .trash,
),
onPressed : () => debugPrint ( "Delete" ),
showLabel : false ,
),
ToolBarPullDownButton (
label : "Actions" ,
icon : CupertinoIcons .ellipsis_circle,
items : [
MacosPulldownMenuItem (
label : "New Folder" ,
title : const Text ( "New Folder" ),
onTap : () => debugPrint ( "Creating new folder..." ),
),
MacosPulldownMenuItem (
label : "Open" ,
title : const Text ( "Open" ),
onTap : () => debugPrint ( "Opening..." ),
),
],
),
]
),これにより、このシンプルなツールバーが構築されます。
その他のツールバーの例：
また、独自のCustomToolbarItemを作成して、ツールバーにあらゆるタイプのウィジェットを含めることもできます。
// Add a grey vertical line as a custom toolbar item:
CustomToolbarItem (
inToolbarBuilder : (context) => Padding (
padding : const EdgeInsets . all ( 8.0 ),
child : Container (color : Colors .grey, width : 1 , height : 30 ),
),
inOverflowedBuilder : (context) =>
Container (color : Colors .grey, width : 30 , height : 1 ),
),SliverToolBar SliverToolbar標準のToolBarのバリアントであり、重要な違いは（名前が示唆するように）、 CustomScrollViewやNestedScrollViewなどのスクロール可能なウィジェットと互換性があることです。 SliverToolBarには3つの追加プロパティがあります。
pinned 、スクロール中にツールバーが表示されたままであるかどうかを判断しますfloating 。これは、使用が上方にスクロールし始めるとすぐにツールバーが表示されるかどうかを判断するopacityこのウィジェットにより、開発者はAppleのApp Storeで見られるツールバーの動作を実現できます。
サンプルの使用法：
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); FlutterのマテリアルライブラリにあるListTileウィジェットを近似することを目的としたウィジェット。
サンプルの使用法：
MacosListTile (
leading : const Icon ( CupertinoIcons .lightbulb),
title : Text (
'A robust library of Flutter components for macOS' ,
style : MacosTheme . of (context).typography.headline,
),
subtitle : Text (
'Create native looking macOS applications using Flutter' ,
style : MacosTheme . of (context).typography.subheadline. copyWith (
color : MacosColors .systemGrayColor,
),
),
),一度に1ページを表示するマルチページインターフェイス。 StatefulWidgetで使用する必要があります。
positionプロパティを使用してタブの配置を制御できます。
使用法：
final _controller = MacosTabController (
initialIndex : 0 ,
length : 3 ,
);
...
MacosTabView (
controller : _controller,
tabs : const [
MacosTab (
label : 'Tab 1' ,
),
MacosTab (
label : 'Tab 2' ,
),
MacosTab (
label : 'Tab 3' ,
),
],
children : const [
Center (
child : Text ( 'Tab 1' ),
),
Center (
child : Text ( 'Tab 2' ),
),
Center (
child : Text ( 'Tab 3' ),
),
],
),
MacosIcon 、1つの例外を除いて、あらゆる方法で通常のIconと同一です - それはMacosThemeを尊重します。通常のアイコンと同じ方法で使用します。
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),チェックボックスは、ユーザーが2つの反対の状態、アクション、または値から選択できるボタンの一種です。選択したチェックボックスは、チェックマークが含まれているときと空のときにオフになったときにオンになっています。チェックボックスには、チェックリストに表示されない限り、ほとんどの場合タイトルが続きます。もっと詳しく知る
| チェックされていない | チェックしました | 混合 |
|---|---|---|
基本的なチェックボックスを作成する方法の例は次のとおりです。
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) mixed状態でチェックボックスを作成するには、 valueをnullに設定します。
ビュー内にヘルプボタンが表示され、クリックするとアプリ固有のヘルプドキュメントを開きます。すべてのヘルプボタンは円形で、疑問符のアイコンを含む一貫してサイズのボタンです。もっと詳しく知る
ヘルプボタンを作成する方法の例は次のとおりです。
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) HelpButtonThemeを使用してヘルプボタンの外観と動作をカスタマイズできますが、AppleがHelp Buttonの外観を変更することはお勧めしません。
ラジオボタンは、小さな円形のボタンに続いてタイトルが続きます。通常、2〜5個のラジオボタンのグループで提示され、ユーザーに関連するが相互に排他的な選択肢のセットを提供します。ラジオボタンの状態は、（満たされた円）またはオフ（空の円）のいずれかです。もっと詳しく知る
基本的なラジオボタンを作成する方法の例は次のとおりです。
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),プルダウンボタン（多くの場合、プルダウンメニューと呼ばれます）は、クリックすると、選択肢のリストを含むメニューを表示するポップアップボタンの一種です。メニューはボタンの下に表示されます。メニューが画面に表示されると、ユーザーがメニュー項目を選択したり、メニューの外側をクリックしたり、別のアプリに切り替えたり、アプリを終了したりするまで、開いたままです。または、システムがアラートを表示するまで。もっと詳しく知る
プルダウンボタンを使用して、コマンドのリストを表示します。プルダウンボタンは、 titleまたはiconを表示して、ボタンのメニューの内容を説明できます。アイコンを使用する場合は、ボタンの目的を明確に伝えていることを確認してください。
itemsがnullの場合、ボタンは無効になります（グレーアウト）。
titleまたはiconを提供する必要があります。プルダウンボタンのタイトルとして表示する必要がありますが、両方と同時には表示されません。
メニューは、アップ/ダウンキーとリターンキーで選択されたアクションでナビゲートすることもできます。
また、 ToolBarPulldownButtonウィジェットを介してツールバーに表示される可能性があります。
| 暗いテーマ | 軽いテーマ |
|---|---|
基本的なプルダウンボタンを作成する方法の例は次のとおりです。
MacosPulldownButton (
title : "Actions" ,
// Or provide an icon to use as title:
// icon: CupertinoIcons.ellipsis_circle,
items : [
MacosPulldownMenuItem (
title : const Text ( 'Save' ),
onTap : () => debugPrint ( "Saving..." ),
),
MacosPulldownMenuItem (
title : const Text ( 'Save as...' ),
onTap : () => debugPrint ( "Opening Save As dialog..." ),
),
const MacosPulldownMenuDivider (),
MacosPulldownMenuItem (
enabled : false ,
title : const Text ( 'Export' ),
onTap : () => debugPrint ( "Exporting" ),
),
],
),ポップアップボタン（多くの場合、ポップアップメニューと呼ばれます）は、クリックすると、相互に排他的な選択肢のリストを含むメニューを表示するボタンの一種です。メニューはボタンの上に表示されます。他のタイプのメニューと同様に、ポップアップボタンのメニューには、チェックマークなどのセパレーターやシンボルを含めることができます。メニューが公開された後、ユーザーがメニュー項目を選択したり、メニューの外側をクリックしたり、別のアプリに切り替えたり、アプリを終了したりするまで開いたままです。または、システムがアラートを表示するまで。もっと詳しく知る
MacosPopupButtonのタイプTは、各ポップアップメニュー項目が表す値のタイプです。特定のメニューのすべてのエントリは、一貫したタイプの値を表す必要があります。通常、 enumが使用されます。アイテムの各MacosPopupMenuItem 、同じタイプの引数で特化している必要があります。
onChangedコールバックは、ポップアップメニューの値を定義する状態変数を更新する必要があります。また、 State.setStateを呼び出して、新しい値でポップアップボタンを再構築する必要があります。
使用可能なメニューの制約内に表示できないメニュー項目がある場合、オープンメニューの上または下部には、現在表示されていないアイテムがあることを示すカレットが表示されます。
メニューは、アップ/ダウンキーとリターンキーで選択されたアイテムでナビゲートすることもできます。
| 暗いテーマ | 軽いテーマ |
|---|---|
基本的なポップアップボタンを作成する方法の例は次のとおりです。
String popupValue = 'One' ;
MacosPopupButton < String >(
value : popupValue,
onChanged : ( String ? newValue) {
setState (() {
popupValue = newValue ! ;
});
},
items : < String > [ 'One' , 'Two' , 'Three' , 'Four' ]
. map < MacosPopupMenuItem < String >>(( String value) {
return MacosPopupMenuItem < String >(
value : value,
child : Text (value),
);
}). toList (),
),プッシュボタンは、MacOSの標準ボタンタイプです。プッシュボタンには、アイコンではなくテキストが含まれており、多くの場合、ユーザーがタスクを完了できるように、別のウィンドウ、ダイアログ、またはアプリを開くことがよくあります。もっと詳しく知る
| 暗いテーマ | 軽いテーマ |
|---|---|
メモネイティブのプッシュボタンは、テキストのみ、アイコンを備えたテキスト、またはアイコンのみとしてスタイリングできます。現在、テキストのみのプッシュボタンがサポートされています。アイコンのみのボタンを作成するには、 MacosIconButtonウィジェットを使用します。
基本的なプッシュボタンを作成する方法の例は次のとおりです。
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),スイッチ（トグルとも呼ばれます）は、2つの相互に排他的な状態からバイナリ選択を提供するコントロールです。スイッチは、アクセントの色が表示されたときにオンになっていることを示しており、スイッチが無色に見えるときにオフになっています。
ContolSize enumをsizeプロパティに渡すことができ、スイッチのサイズを制御できます。 MacosSwitch 、次のコントロールサイズをサポートしています。
minismallregular| オフ | の上 |
|---|---|
基本的なトグルスイッチを作成する方法の例は次のとおりです。
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),スイッチの詳細については、こちらをご覧ください。
単一の水平グループに1つ以上のナビゲーションタブを表示します。 MacosTabViewがタブバーの異なるタブ間をナビゲートするために使用します。
このウィジェットの典型的な使用法は、子供のナビゲーションを制御するためのMacosTabViewによるものです。そのウィジェットによって構築されているため、 MacosTabViewを使用してMacosSegmentedControl指定する必要はありません。
使用法：
showMacosAlertDialog (
context : context,
builder : (_) => MacosAlertDialog (
appIcon : FlutterLogo (size : 64 ),
title : Text (
'Alert Dialog with Primary Action' ,
style : MacosTheme . of (context).typography.headline,
),
message : Text (
'This is an alert dialog with a primary action and no secondary action' ,
textAlign : TextAlign .center,
style : MacosTypography . of (context).headline,
),
primaryButton : PushButton (
controlSize : ControlSize .large,
child : Text ( 'Primary' ),
onPressed : () {},
),
),
);使用法：
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);テキストフィールドは、ユーザーが1つ以上のテキストを入力または編集する長方形の領域です。テキストフィールドには、プレーンまたはスタイルのテキストを含めることができます。
基本的なテキストフィールドを作成する方法の例は次のとおりです。
MacosTextField (
placeholder : 'Type some text here' ,
)検索フィールドは、値の大規模なコレクションでテキストベースの検索を実行するために最適化されたテキストフィールドのスタイルです。
ユーザーが検索フィールドへの入力を開始すると、選択可能な結果のリストが、フィールドの下（またはそれ以上）のオーバーレイに表示されます。
| 暗いテーマ | 軽いテーマ |
|---|---|
検索フィールドを作成する方法の例は次のとおりです。
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
)その他のexamples/fields_pageについては、例を確認してください。
ラベルは、画面上の要素が何をするかの簡単な説明です。
ツールチップは、プライマリインターフェイスから人々の焦点をシフトすることなく、コントロールを使用する方法を簡潔に説明しています。ユーザーが数秒間コントロール上にポインターを配置すると、タグが表示されます。ツールチップは、10秒間、またはポインターがコントロールから離れるまで表示されます。
| 暗いテーマ | 軽いテーマ |
|---|---|
ツールチップを作成するには、任意のウィジェットをMacosTooltipにラップします。
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
),テーマのTooltipThemeをカスタマイズすることで、ツールチップを希望どおりにカスタマイズできます。ツールチップは、タッチイベントやポインターイベントに対応して、環境に自動的に適応します。ツールバーアイテムを備えたツールチップを使用するには、 tooltipMessageプロパティを提供します。
アプリがコンテンツを読み込んだり、長いデータ処理操作を実行するのを待っている静的画面を見つめている人を座らせないでください。進行状況インジケーターを使用して、アプリが失速していないことを人々に知らせ、彼らがどれくらい待っているかについてのアイデアを与えます。
進捗指標には2つの異なるスタイルがあります。
人々は進捗指標と対話しません。ただし、対応する操作をキャンセルするためのボタンが付随することがよくあります。もっと詳しく知る
ProgressCircle 、決定または不確定のいずれかです。
| 進行状況の円を決定します | 不確定な進行状況サークル |
|---|---|
以下は、不確定な進行状況サークルを作成する方法の例です。
ProgressCircle (
value : null ,
), valueに非ヌル値を提供して、進行状況を決定することができます。
ProgressBar決定することしかできません。
決定的な進捗バーを作成する方法の例は次のとおりです。
ProgressBar (
value : 30 ,
)レベルインジケータは、数値の範囲内の特定の値をグラフィカルに表します。それは目的のスライダーに似ていますが、より視覚的であり、値を選択するための明確なコントロールが含まれていません。ただし、レベルインジケーター自体をクリックしてドラッグして値を選択することがサポートされています。レベルインジケーターにはティックマークを含めることもできます。これにより、ユーザーは範囲内の特定の値を簡単に特定できます。容量、評価、および関連性を伝えるために、それぞれ異なる外観の3つの異なるレベルインジケータースタイルがあります。
容量インジケーターは、有限容量に関連する現在のレベルを示しています。容量インジケーターは、ディスクやバッテリーの使用などの要因を通信するときによく使用されます。もっと詳しく知る
インタラクティブな連続容量インジケーターを作成する方法の例は次のとおりです。
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
),個別の容量インジケーターにするために、 discreteにtrue設定できます。
スライダーは、スライダーの親指を移動することにより、人々が連続的または離散的な値の範囲から値を選択できるコントロールです。
| 連続 | 離散 |
|---|---|
| 最小値と最大値の間の継続的な値を選択できる水平スライダー | 最小値と最大値の間の個別の値のみを選択できる水平スライダー。コンテキストを提供するために、多くの場合、ティックマークが表示されます。 |
インタラクティブな連続スライダーを作成する方法の例は次のとおりです。
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),評価インジケーターは、一連の水平に配置されたグラフィカルシンボルを使用して、ランキングレベルを通信します。デフォルトのシンボルは星です。
定格インジケーターは部分的なシンボルを表示しません。完全なシンボルのみを表示するために、項目値は丸みを帯びています。評価指標内では、シンボルは常に同じ距離であり、コントロールに適合するために拡張または縮小しないでください。もっと詳しく知る
インタラクティブな評価インジケーターを作成する方法の例は次のとおりです。
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)ユーザーが日付を選択します。
MacosDatePickersには3つのスタイルがあります。
textual ：ユーザーが1日、月、または年を選択し、CARET-CONTROLボタンを使用して値を変更する必要があるテキストのみの日付ピッカー。これは、アプリのスペースが制約されている場合に役立ちます。graphical ：ユーザーがカレンダーのようなインターフェイスをナビゲートして日付を選択できる視覚的な日付ピッカー。combined ： textualとgraphicalインターフェイスの両方を提供します。タイムピッカーのローカリゼーションは、Appleの仕様と一致するために、標準のローカリゼーションの代わりに、標準のlocalizations.narrowWeekdays()などの代わりに、 weekdayAbbreviationsとmonthAbbreviationsパラメーターによってサポートされています。
weekdayAbbreviations 、日曜日から始まる曜日ごとに1つの文字列のリストである必要がありますmonthAbbreviations 、1月から始まる年の各月に1つの文字列のリストである必要がありますまた、Textual Interfaceに日付の表示方法を変更するために、 dateFormatを定義することもできます。一連のトークン（ケース非感受性）が必要であり、それらを対応する値に置き換えます。次のトークンがサポートされています。
D ：月の日（1-31）DD ：月の日（01-31）M ：月の月（1-12）MM ：毎月（01-12）YYYY ：年（0000-9999）/ 、 - 、 . ）デフォルトの形式はM/D/YYYYです。
使用例：
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),ユーザーが時間を選択します。
MacosTimePickersには3つのスタイルがあります。
textual ：ユーザーが時間または分を選択し、CARET-CONTROLボタンを使用して値を変更する必要があるテキストのみのタイムピッカー。これは、アプリのスペースが制約されている場合に役立ちます。graphical ：ユーザーが時計のようなインターフェイスの手を動かして時間を選択できる視覚タイムピッカー。combined ： textualとgraphicalインターフェイスの両方を提供します。使用例：
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),ネイティブMacOSカラーピッカーを介してユーザーが色を選択します。
ColorPickerMode enumを使用してピッカーを起動するモードを選択できます。デフォルトはColorPickerMode.wheelです
このウィジェットは、MacOS以外のプラットフォームでは機能しません！
使用例：
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
