macos_ui
Version 2.1.0
Widget dan tema flutter yang menerapkan bahasa desain macOS saat ini.
Lihat galeri widget interaktif kami secara online di https://macosui.github.io/macos_ui/#/
Panduan, codelab, dan dokumentasi lainnya dapat ditemukan di https://macosui.dev
macos_ui dikembangkan terhadap saluran stable Flutter. Untuk memastikan pengalaman pengembangan yang lancar dengan macos_ui , Anda harus membangun aplikasi Anda di saluran stable Flutter.
pub.dev menunjukkan bahwa macos_ui hanya mendukung macOS. Ini karena macos_ui memanggil beberapa kode asli, dan karenanya menentukan macOS sebagai platform plugin di file pubspec.yaml .
macos_ui secara teknis akan bekerja pada platform apa pun yang mendukung dukungan, tetapi Anda akan mendapatkan hasil terbaik pada macOS . Dukungan platform non-Macos tidak dijamin.
Fitur macos_ui yang tidak akan berfungsi pada platform selain macOS karena memanggil kode asli adalah:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellKarena pada saat ini Flutter tidak memungkinkan elemen UI untuk meluap batas jendela, popup dibatasi ke ruang yang tersedia.
Oleh karena itu, jika Anda menggunakan widget yang membuat popup di toolbar Anda, seperti ToolBarPopupButton , Anda harus menghindari membiarkan jendela aplikasi Anda diubah ukurannya di bawah ketinggian popup tertinggi Anda.
macos_ui menyambut kontribusi! Silakan lihat CONTRIBUTING.md untuk informasi lebih lanjut.
MacosWindow adalah bingkai dasar untuk tata letak gaya macOS.
Ini mendukung Sidebar di sebelah kiri, TitleBar opsional di bagian atas, dan sisa jendela biasanya diisi dengan MacosScaffold .
Lingkup untuk MacosWindow disediakan oleh MacosWindowScope . Sidebar dapat diaktifkan dengan MacosWindowScope.of(context).toggleSidebar() . Harap dicatat bahwa Anda harus membungkus MacosScaffold Anda dalam widget Builder agar ini berfungsi dengan baik.
Sidebar memungkinkan navigasi aplikasi dan menyediakan akses cepat ke koleksi konten tingkat atas di aplikasi Anda.
Sidebars dapat ditempatkan di kiri atau kanan aplikasi Anda. Untuk menempatkan bilah samping di sebelah kiri, gunakan properti MacosWindow.sidebar . Untuk menempatkan bilah samping di sebelah kanan, gunakan properti MacosWindow.endSidebar .
Contoh Penggunaan:
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 adalah apa yang Anda sebut "halaman".
Perancah memiliki properti toolbar dan properti children . children menerima widget ContentArea dan beberapa widget ResizablePane . Untuk menangkap navigasi atau rute di bawah perancah, pertimbangkan untuk membungkus MacosScaffold dalam CupertinoTabView . Dengan melakukan itu, navigasi di dalam MacosScaffold akan ditampilkan di dalam area MacosScaffold alih -alih menutupi seluruh jendela. Untuk mendorong rute di luar MacosScaffold yang dibungkus dengan CupertinoTabView , gunakan navigator root Navigator.of(context, rootNavigator: true)
Lihat dokumentasi untuk penyesuaian dan contoh ToolBar .
Tampilan baru untuk aplikasi macOS diperkenalkan di Big Sur (MacOS 11). Untuk mencocokkan tampilan itu di aplikasi Flutter Anda, MacOS_UI bergantung pada macos_window_utils, yang membutuhkan target penyebaran minimum MacOS sebesar 10.14.6. Oleh karena itu, pastikan untuk membuka folder macos/Runner.xcworkspace dari proyek Anda menggunakan Xcode dan cari Runner.xcodeproj . Pergi ke Info > Deployment Target dan atur macOS Deployment Target ke 10.14.6 atau lebih. Kemudian, buka Podfile proyek Anda (jika tidak muncul di Xcode, Anda dapat menemukannya di direktori macos proyek Anda melalui VS Code) dan mengatur versi penempatan minimum di baris pertama menjadi 10.14.6 atau lebih tinggi:
platform :osx , '10.14.6' Anda mungkin juga perlu membuka Runner.xcodeproj aplikasi Anda di Xcode dan mengatur versi penyebaran minimum di sana.
Sekarang, konfigurasikan jendela Anda di dalam main() sebagai berikut:
/// 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 ());
} Harap perhatikan bahwa jika Anda menggunakan bilah judul ( TitleBar ) di MacosWindow Anda, Anda harus mengatur toolbarStyle jendela Anda ke NSWindowToolbarStyle.expanded , untuk menyelaraskan dengan benar Tombol Tutup, Minimalkan, Zoom Window:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} Dalam kasus lain apa pun, Anda harus menyimpannya sebagai NSWindowToolbarStyle.unified . Unifikasi.
Membuat bilah alat di MacosScaffold . Toolbar muncul di bawah bilah judul (jika ada) dari aplikasi MacOS atau terintegrasi dengannya, dengan menggunakan properti title .
Toolbar menyediakan akses yang nyaman ke perintah dan fitur yang sering digunakan (item toolbar). Rute aplikasi Anda yang berbeda dapat memiliki toolbar yang berbeda.
Item toolbar termasuk ToolBarIconButton , ToolBarPulldownButton , dan widget ToolBarSpacer , dan harus disediakan melalui properti items . Tindakan setiap item toolbar juga harus disediakan sebagai perintah bilah menu dari aplikasi Anda.
Toolbar terlihat paling baik dan paling mudah dipahami ketika mengandung elemen dari jenis yang sama (jadi gunakan label untuk setiap item bilah alat atau tidak).
Anda dapat menggunakan widget ToolBarSpacer untuk mengatur pengelompokan tindakan toolbar yang berbeda.
Contoh toolbar adalah:
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..." ),
),
],
),
]
),Ini membangun bilah alat sederhana ini:
Contoh bilah alat lainnya:
Anda juga dapat membuat CustomToolbarItem Anda sendiri untuk memasukkan semua jenis widget di toolbar:
// 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 adalah varian dari ToolBar standar, dengan perbedaan utama adalah bahwa (sesuai namanya), kompatibel dengan widget yang dapat digulir seperti CustomScrollView dan NestedScrollView . Ada tiga properti tambahan di SliverToolBar :
pinned , yang menentukan apakah bilah alat harus tetap terlihat saat menggulirfloating , yang menentukan apakah bilah alat harus terlihat segera setelah penggunaan mulai menggulir ke atasopacity , yang mengelola efek transparansi dari toolbarWidget ini memungkinkan pengembang untuk mencapai perilaku bilah alat yang terlihat di App Store Apple.
Penggunaan Sampel:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Widget yang bertujuan untuk memperkirakan widget ListTile yang ditemukan di perpustakaan materi FLUTTER.
Penggunaan Sampel:
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,
),
),
), Antarmuka multipage yang menampilkan satu halaman pada satu waktu. Harus digunakan dalam StatefulWidget .
Anda dapat mengontrol penempatan tab menggunakan properti position .
Penggunaan:
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 identik dengan Icon reguler dalam segala hal dengan satu pengecualian - ia menghormati MacosTheme . Gunakan dengan cara yang sama seperti Anda akan menjadi ikon biasa:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),Kotak centang adalah jenis tombol yang memungkinkan pengguna memilih antara dua status, tindakan, atau nilai yang berlawanan. Kotak centang yang dipilih dipertimbangkan saat berisi tanda centang dan mati saat kosong. Kotak centang hampir selalu diikuti oleh judul kecuali jika muncul di daftar periksa. Pelajari lebih lanjut
| Tidak terkendali | Diperiksa | Campur aduk |
|---|---|---|
Berikut adalah contoh cara membuat kotak centang dasar:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) Untuk membuat kotak centang dalam keadaan mixed , atur value ke null .
Tombol Bantuan muncul dalam tampilan dan membuka dokumentasi bantuan khusus aplikasi saat diklik. Semua tombol bantuan adalah tombol bundar, berukuran konsisten yang berisi ikon tanda tanya. Pelajari lebih lanjut
Berikut adalah contoh cara membuat tombol bantuan:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) Anda dapat menyesuaikan penampilan dan perilaku tombol bantuan menggunakan HelpButtonTheme , tetapi tidak disarankan oleh Apple untuk mengubah penampilan Bantuan Tombol.
Tombol radio adalah tombol kecil dan melingkar diikuti dengan judul. Biasanya disajikan dalam kelompok dua hingga lima, tombol radio memberikan pengguna satu set pilihan terkait tetapi saling eksklusif. Keadaan tombol radio adalah pada (lingkaran penuh) atau di luar (lingkaran kosong). Pelajari lebih lanjut
Berikut adalah contoh cara membuat tombol radio dasar:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Tombol pull-down (sering disebut sebagai menu pull-down) adalah jenis tombol pop-up yang, ketika diklik, menampilkan menu yang berisi daftar pilihan. Menu muncul di bawah tombol. Setelah menu ditampilkan di layar, tetap terbuka sampai pengguna memilih item menu, klik di luar menu, beralih ke aplikasi lain, atau keluar dari aplikasi; atau sampai sistem menampilkan peringatan. Pelajari lebih lanjut
Gunakan tombol pull-down untuk menyajikan daftar perintah. Tombol pull-down dapat menampilkan title atau icon untuk menggambarkan isi menu tombol. Jika Anda menggunakan ikon, pastikan itu dengan jelas mengomunikasikan tujuan tombol.
Jika items nol, tombol akan dinonaktifkan (abu -abu).
title atau icon harus disediakan, untuk ditampilkan sebagai judul tombol pull-down, tetapi tidak keduanya pada saat yang sama.
Menu juga dapat dinavigasi dengan tombol atas/bawah dan tindakan yang dipilih dengan kunci pengembalian.
Ini juga dapat muncul di toolbar, melalui widget ToolBarPulldownButton .
| Tema Gelap | Tema ringan |
|---|---|
Berikut adalah contoh cara membuat tombol pull-down dasar:
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" ),
),
],
),Tombol pop-up (sering disebut sebagai menu pop-up) adalah jenis tombol yang, ketika diklik, menampilkan menu yang berisi daftar pilihan yang saling eksklusif. Menu muncul di atas tombol. Seperti jenis menu lainnya, menu tombol pop-up dapat mencakup pemisah dan simbol seperti tanda-tanda. Setelah menu terungkap, tetap terbuka sampai pengguna memilih item menu, klik di luar menu, beralih ke aplikasi lain, atau keluar dari aplikasi; atau sampai sistem menampilkan peringatan. Pelajari lebih lanjut
Tipe T dari MacosPopupButton adalah jenis nilai yang diwakili oleh setiap item menu pop-up. Semua entri dalam menu yang diberikan harus mewakili nilai dengan tipe yang konsisten. Biasanya, enum digunakan. Setiap MacosPopupMenuItem dalam item harus khusus dengan argumen tipe yang sama.
Panggilan balik onChanged harus memperbarui variabel negara yang mendefinisikan nilai menu pop-up. Ini juga harus memanggil State.setState untuk membangun kembali tombol pop-up dengan nilai baru.
Ketika ada item menu yang tidak dapat ditampilkan dalam kendala menu yang tersedia, sebuah caret ditampilkan di bagian atas atau bawah menu terbuka untuk memberi sinyal bahwa ada item yang saat ini tidak terlihat.
Menu juga dapat dinavigasi dengan tombol atas/bawah dan item yang dipilih dengan kunci pengembalian.
| Tema Gelap | Tema ringan |
|---|---|
Berikut adalah contoh cara membuat tombol pop-up dasar:
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 (),
),Tombol tekan adalah jenis tombol standar dalam macOS. Tombol tekan berisi teks - bukan ikon - dan sering membuka jendela, dialog, atau aplikasi yang terpisah sehingga pengguna dapat menyelesaikan tugas. Pelajari lebih lanjut
| Tema Gelap | Tema ringan |
|---|---|
Catatan tombol push asli dapat ditata sebagai teks saja, teks dengan ikon, atau hanya ikon. Saat ini, tombol tekan hanya teks didukung. Untuk membuat tombol khusus ikon, gunakan widget MacosIconButton .
Berikut adalah contoh cara membuat tombol tekan dasar:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),Sakelar (juga dikenal sebagai sakelar) adalah kontrol yang menawarkan pilihan biner antara dua negara bagian yang saling eksklusif - hidup dan mati. Sakelar menunjukkan bahwa itu menyala ketika warna aksen terlihat dan mati ketika sakelar tampak tidak berwarna.
Enum ContolSize dapat diteruskan ke properti size untuk mengontrol ukuran sakelar. MacosSwitch mendukung ukuran kontrol berikut:
minismallregular| Mati | Pada |
|---|---|
Berikut adalah contoh cara membuat sakelar sakelar dasar:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),Pelajari lebih lanjut tentang sakelar di sini.
Menampilkan satu atau lebih tab navigasi dalam satu grup horizontal. Digunakan oleh MacosTabView untuk menavigasi di antara berbagai tab bilah tab.
Penggunaan khas widget ini adalah oleh MacosTabView , untuk mengendalikan navigasi anak -anaknya. Anda tidak perlu menentukan MacosSegmentedControl dengan MacosTabView Anda, karena dibangun oleh widget itu.
Penggunaan:
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 : () {},
),
),
);Penggunaan:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);Bidang teks adalah area persegi panjang di mana pengguna masuk atau mengedit satu atau lebih baris teks. Bidang teks dapat berisi teks sederhana atau bergaya.
Berikut adalah contoh cara membuat bidang teks dasar:
MacosTextField (
placeholder : 'Type some text here' ,
)Bidang pencarian adalah gaya bidang teks yang dioptimalkan untuk melakukan pencarian berbasis teks dalam koleksi nilai yang besar.
Ketika pengguna mulai mengetik ke bidang pencarian, daftar hasil yang dapat dipilih muncul dalam overlay di bawah (atau di atas) bidang.
| Tema Gelap | Tema ringan |
|---|---|
Berikut adalah contoh cara membuat bidang pencarian:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) Periksa examples/fields_page untuk lebih banyak contoh.
Label adalah deskripsi singkat tentang apa yang dilakukan elemen di layar.
Tooltips secara ringkas menggambarkan cara menggunakan kontrol tanpa menggeser fokus orang dari antarmuka utama. Tag bantuan muncul ketika pengguna memposisikan pointer di atas kontrol selama beberapa detik. Sebuah tooltip tetap terlihat selama 10 detik, atau sampai pointer bergerak menjauh dari kontrol.
| Tema Gelap | Tema ringan |
|---|---|
Untuk membuat tooltip, bungkus widget apa pun di MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), Anda dapat menyesuaikan tooltip seperti yang Anda inginkan dengan menyesuaikan TooltipTheme tema. Sebuah tooltip secara otomatis beradaptasi dengan lingkungannya, menanggapi acara sentuh dan penunjuk. Untuk menggunakan tooltip dengan item toolbar, berikan dengan properti tooltipMessage .
Jangan membuat orang duduk -duduk menatap layar statis menunggu aplikasi Anda memuat konten atau melakukan operasi pemrosesan data yang panjang. Gunakan indikator kemajuan untuk membuat orang tahu aplikasi Anda tidak macet dan memberi mereka gambaran berapa lama mereka akan menunggu.
Indikator kemajuan memiliki dua gaya berbeda:
Orang tidak berinteraksi dengan indikator kemajuan; Namun, mereka sering disertai dengan tombol untuk membatalkan operasi yang sesuai. Pelajari lebih lanjut
ProgressCircle dapat ditentukan atau tidak ditentukan.
| Menentukan lingkaran kemajuan | Lingkaran Kemajuan Tidak Tetap |
|---|---|
Berikut adalah contoh cara membuat lingkaran kemajuan yang tidak ditentukan:
ProgressCircle (
value : null ,
), Anda dapat memberikan nilai non-nol untuk value untuk membuat lingkaran kemajuan menentukan.
ProgressBar hanya dapat ditentukan.
Berikut adalah contoh cara membuat bilah kemajuan yang menentukan:
ProgressBar (
value : 30 ,
)Indikator level secara grafis mewakili nilai spesifik dalam kisaran nilai numerik. Ini mirip dengan slider dengan sengaja, tetapi lebih visual dan tidak mengandung kontrol yang berbeda untuk memilih nilai - klik dan menyeret seluruh indikator level itu sendiri untuk memilih nilai didukung. Indikator level juga dapat menyertakan tanda centang, memudahkan pengguna untuk menunjukkan nilai tertentu dalam kisaran. Ada tiga gaya indikator level yang berbeda, masing -masing dengan penampilan yang berbeda, untuk berkomunikasi, peringkat, dan relevansi.
Indikator kapasitas menggambarkan tingkat saat ini dalam kaitannya dengan kapasitas yang terbatas. Indikator kapasitas sering digunakan ketika mengkomunikasikan faktor -faktor seperti disk dan penggunaan baterai. Pelajari lebih lanjut
Berikut adalah contoh cara membuat indikator kapasitas kontinu interaktif:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), Anda dapat mengatur discrete ke true untuk menjadikannya indikator kapasitas diskrit.
Slider adalah kontrol yang memungkinkan orang memilih nilai dari rentang nilai yang kontinu atau diskrit dengan memindahkan ibu jari slider.
| Kontinu | Diskrit |
|---|---|
| Slider horizontal di mana nilai apa pun nilai kontinu antara min dan maks dapat dipilih | Slider horizontal di mana hanya nilai diskrit antara min dan max yang dapat dipilih. Tanda centang sering ditampilkan untuk memberikan konteks. |
Berikut adalah contoh cara membuat slider kontinu interaktif:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),Indikator peringkat menggunakan serangkaian simbol grafis yang diatur secara horizontal untuk mengomunikasikan tingkat peringkat. Simbol default adalah bintang.
Indikator peringkat tidak menampilkan simbol parsial - nilai itu dibulatkan untuk menampilkan simbol lengkap saja. Dalam indikator peringkat, simbol selalu jarak yang sama dan tidak mengembang atau menyusut agar sesuai dengan kontrol. Pelajari lebih lanjut
Berikut adalah contoh cara membuat indikator peringkat interaktif:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)Memungkinkan pengguna memilih tanggal.
Ada tiga gaya MacosDatePickers :
textual : Pemilih tanggal khusus teks tempat pengguna harus memilih hari, bulan, atau tahun dan menggunakan tombol kontrol-karet untuk mengubah nilainya. Ini berguna ketika ruang dalam aplikasi Anda dibatasi.graphical : Pemilih tanggal visual tempat pengguna dapat menavigasi melalui antarmuka seperti kalender untuk memilih tanggal.combined : Menyediakan antarmuka textual dan graphical . Lokalisasi waktu pemetik didukung oleh parameter weekdayAbbreviations dan parameter monthAbbreviations (bukan misalnya localizations.narrowWeekdays() untuk mencocokkan spesifikasi Apple).
weekdayAbbreviations harus menjadi daftar 7 string, satu untuk setiap hari dalam seminggu, dimulai dengan hari MinggumonthAbbreviations harus menjadi daftar 12 string, satu untuk setiap bulan dalam setahun, dimulai dengan Januari Anda juga dapat mendefinisikan dateFormat untuk mengubah cara tanggal ditampilkan di antarmuka tekstual. Dibutuhkan serangkaian token (tidak peka case) dan menggantinya dengan nilai yang sesuai. Token berikut didukung:
D : Hari bulan ini (1-31)DD : Hari bulan ini (01-31)M : Bulan dalam setahun (1-12)MM : Bulan tahun ini (01-12)YYYY : Tahun (0000-9999)/ , - . ) Format default adalah M/D/YYYY .
Contoh Penggunaan:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Memungkinkan pengguna memilih waktu.
Ada tiga gaya MacosTimePickers :
textual : Pemilih waktu khusus teks tempat pengguna harus memilih jam atau menit dan menggunakan tombol kontrol caret untuk mengubah nilainya. Ini berguna ketika ruang dalam aplikasi Anda dibatasi.graphical : Pemilih waktu visual tempat pengguna dapat memindahkan tangan antarmuka seperti jam untuk memilih waktu.combined : Menyediakan antarmuka textual dan graphical .Contoh Penggunaan:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Memungkinkan pengguna memilih warna melalui pemetik warna macOS asli.
Anda dapat memilih mode mana yang akan meluncurkan pemetik dalam menggunakan enum ColorPickerMode . Defaultnya adalah ColorPickerMode.wheel
Widget ini tidak akan bekerja pada platform selain macOS!
Contoh Penggunaan:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
