macos_ui
Version 2.1.0
Widgets et thèmes Flutter implémentant le langage de conception macOS actuel.
Consultez notre galerie de widgets interactifs en ligne à https://macosui.github.io/macos_ui/#/
Les guides, les colélab et autres documents peuvent être trouvés sur https://macosui.dev
macos_ui est développé contre le canal stable de Flutter. Pour assurer une expérience de développement fluide avec macos_ui , vous devez créer votre application sur le canal stable de Flutter.
Pub.dev montre que macos_ui prend uniquement le support MacOS. En effet, macos_ui appelle un code natif et spécifie donc MacOS en tant que plate-forme de plugin dans le fichier pubspec.yaml .
macos_ui fonctionnera techniquement sur n'importe quelle plate-forme qui prend en charge Flutter, mais vous obtiendrez les meilleurs résultats sur MacOS . La prise en charge de la plate-forme non-MACOS n'est pas garantie.
Les fonctionnalités de macos_ui qui ne fonctionneront pas sur des plates-formes autres que MacOS en raison de l'appel du code natif sont:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellÉtant donné qu'à ce moment, le flutter ne permet pas aux éléments de l'interface utilisateur de déborder les limites de la fenêtre, les fenêtres contextuelles sont limitées à l'espace disponible.
Par conséquent, si vous utilisez des widgets qui créent des fenêtres contextuelles dans votre barre d'outils, comme ToolBarPopupButton , vous devez éviter de permettre à votre fenêtre d'application d'être redimensionnée sous la hauteur de votre plus haute popup.
macos_ui accueille les contributions! Veuillez consulter CONTRIBUTING.md pour plus d'informations.
MacosWindow est le cadre de base pour une disposition de style macOS.
Il prend en charge une Sidebar à gauche, une TitleBar en option en haut, et le reste de la fenêtre est généralement rempli d'un MacosScaffold .
Une portée pour le MacosWindow est fournie par MacosWindowScope . La barre latérale peut être basculée avec MacosWindowScope.of(context).toggleSidebar() . Veuillez noter que vous devez envelopper votre MacosScaffold dans un widget Builder afin que cela fonctionne correctement.
Une barre latérale permet la navigation d'application et offre un accès rapide aux collections de contenu de niveau supérieur dans votre application.
Les barres latérales peuvent être placées à gauche ou à droite de votre application. Pour placer une barre latérale à gauche, utilisez la propriété MacosWindow.sidebar . Pour placer une barre latérale à droite, utilisez la propriété MacosWindow.endSidebar .
Exemple d'utilisation:
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' ),
);
},
),
), Le MacosScaffold est ce que vous pourriez appeler une "page".
L'échafaud a une propriété toolbar et une propriété children . children acceptent un widget ContentArea et plusieurs widgets ResizablePane . Pour attraper la navigation ou les itinéraires en dessous de l'échafaud, pensez à envelopper le MacosScaffold dans un CupertinoTabView . Ce faisant, la navigation à l'intérieur du MacosScaffold sera affichée à l'intérieur de la zone MacosScaffold au lieu de couvrir toute la fenêtre. Pour pousser un itinéraire à l'extérieur d'un MacosScaffold enveloppé dans un CupertinoTabView , utilisez le navigateur Root Navigator.of(context, rootNavigator: true)
Voir la documentation des personnalisations et des exemples ToolBar .
Un nouveau look pour les applications macOS a été introduit dans Big Sur (MacOS 11). Pour faire correspondre ce look dans votre application Flutter, MacOS_UI s'appuie sur MacOS_Window_Utils, qui nécessite un objectif de déploiement MacOS minimum de 10.14.6. Par conséquent, assurez-vous d'ouvrir le dossier macos/Runner.xcworkspace de votre projet à l'aide de Xcode et recherchez Runner.xcodeproj . Accédez à Info > Deployment Target et définissez l' macOS Deployment Target à 10.14.6 ou supérieur. Ensuite, ouvrez Podfile de votre projet (s'il n'apparaît pas dans XCode, vous pouvez le trouver dans le répertoire macos de votre projet via le code vs) et définir la version de déploiement minimum dans la première ligne à 10.14.6 ou plus:
platform :osx , '10.14.6' Vous devrez peut-être également ouvrir Runner.xcodeproj de votre application dans Xcode et y régler la version de déploiement minimum.
Maintenant, configurez votre fenêtre à l'intérieur de votre main() comme suit:
/// 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 ());
} Veuillez noter que si vous utilisez une barre de titres ( TitleBar ) dans votre MacosWindow , vous devez définir la toolbarStyle de votre fenêtre sur NSWindowToolbarStyle.expanded , afin d'aligner correctement les boutons de fenêtre fermés, minimiser, zoom:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} Dans tout autre cas, vous devez le garder comme NSWindowToolbarStyle.unified .
Crée une barre d'outils dans le MacosScaffold . La barre d'outils apparaît sous la barre de titre (si elle est présente) de l'application MacOS ou s'intègre à lui, en utilisant sa propriété title .
Une barre d'outils offre un accès pratique aux commandes et fonctionnalités fréquemment utilisées (éléments de la barre d'outils). Différentes voies de votre application pourraient avoir différentes barres d'outils.
Les éléments de la barre d'outils incluent ToolBarIconButton , ToolBarPulldownButton et les widgets d'outils et les widgets ToolBarSpacer , et doivent être fournis via la propriété items . L'action de chaque élément de la barre d'outils doit également être fournie comme commande de barre de menu de votre application.
Les barres d'outils semblent les meilleures et sont les plus faciles à comprendre lorsqu'ils contiennent des éléments du même type (alors utilisez des étiquettes pour chaque élément de la barre d'outils ou non).
Vous pouvez utiliser les widgets ToolBarSpacer pour définir le regroupement des différentes actions de la barre d'outils.
Un exemple de barre d'outils serait:
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..." ),
),
],
),
]
),Cela construit cette barre d'outils simple:
Autres exemples de la barre d'outils:
Vous pouvez également créer votre propre CustomToolbarItem pour inclure tout type de widget dans la barre d'outils:
// 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 est une variante de la ToolBar standard, la différence clé étant que (comme son nom l'indique), il est compatible avec des widgets de défilement comme CustomScrollView et NestedScrollView . Il y a trois propriétés supplémentaires sur SliverToolBar :
pinned , qui détermine si la barre d'outils doit rester visible lors du défilementfloating , qui détermine si la barre d'outils doit devenir visible dès que l'utilisation commence à faire défiler vers le hautopacity , qui gère l'effet de translucidité de la barre d'outilsCe widget permet aux développeurs d'atteindre les comportements de la barre d'outils observés dans l'App Store d'Apple.
Exemple d'utilisation:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Un widget qui vise à approximer le widget ListTile trouvé dans la bibliothèque de matériaux de Flutter.
Exemple d'utilisation:
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,
),
),
), Une interface multipage qui affiche une page à la fois. Doit être utilisé dans un StatefulWidget .
Vous pouvez contrôler le placement des onglets à l'aide de la propriété position .
Usage:
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' ),
),
],
),
Un MacosIcon est identique à une Icon régulière dans tous les sens avec une exception - il respecte un MacosTheme . Utilisez-le de la même manière que vous le feriez pour une icône régulière:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),Une case à cocher est un type de bouton qui permet à l'utilisateur de choisir entre deux états, actions ou valeurs opposés. Une case sélectionnée est prise en compte lorsqu'elle contient une coche et désactivée lorsqu'elle est vide. Une case à cocher est presque toujours suivie d'un titre à moins qu'il apparaisse dans une liste de contrôle. Apprendre encore plus
| Incontrôlé | À carreaux | Mixte |
|---|---|---|
Voici un exemple de la façon de créer une case de base:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) Pour faire une case à cocher à l'état mixed , définissez value null .
Un bouton d'aide apparaît dans une vue et ouvre la documentation d'aide spécifique à l'application lorsque vous cliquez sur. Tous les boutons d'aide sont des boutons circulaires de taille constante qui contiennent une icône de marque d'interrogation. Apprendre encore plus
Voici un exemple de la façon de créer un bouton d'aide:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) Vous pouvez personnaliser l'apparence et le comportement du bouton d'aide à l'aide de HelpButtonTheme , mais il n'est pas recommandé par Apple de modifier l'apparence du bouton d'aide.
Un bouton radio est un petit bouton circulaire suivi d'un titre. Généralement présentés en groupes de deux à cinq, les boutons radio fournissent à l'utilisateur un ensemble de choix connexes mais mutuellement exclusifs. L'état d'un bouton radio est soit sur (un cercle rempli) ou OFF (un cercle vide). Apprendre encore plus
Voici un exemple de la façon de créer un bouton radio de base:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Un bouton extrait (souvent appelé menu déroulant) est un type de bouton contextuel qui, lorsqu'il est cliqué, affiche un menu contenant une liste de choix. Le menu apparaît sous le bouton. Une fois le menu affiché à l'écran, il reste ouvert jusqu'à ce que l'utilisateur choisit un élément de menu, clique à l'extérieur du menu, passe à une autre application ou quitte l'application; ou jusqu'à ce que le système affiche une alerte. Apprendre encore plus
Utilisez un bouton déroulant pour présenter une liste de commandes. Un bouton d'attraction peut afficher un title ou une icon pour décrire le contenu du menu du bouton. Si vous utilisez une icône, assurez-vous qu'elle communique clairement l'objectif du bouton.
Si items sont nuls, le bouton sera désactivé (grisé).
Un title ou une icon doit être fourni, à afficher comme le titre du bouton déroulant, mais pas les deux en même temps.
Le menu peut également être navigué avec les touches haut / bas et une action sélectionnée avec la touche de retour.
Il peut également apparaître dans la barre d'outils, via le widget ToolBarPulldownButton .
| Thème sombre | Thème léger |
|---|---|
Voici un exemple de la façon de créer un bouton de base de base:
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" ),
),
],
),Un bouton contextuel (souvent appelé menu contextuel) est un type de bouton qui, lorsqu'il est cliqué, affiche un menu contenant une liste de choix mutuellement exclusifs. Le menu apparaît en haut du bouton. Comme les autres types de menus, le menu d'un bouton contextuel peut inclure des séparateurs et des symboles comme les marques de contrôle. Une fois le menu révélé, il reste ouvert jusqu'à ce que l'utilisateur choisit un élément de menu, clique à l'extérieur du menu, passe à une autre application ou quitte l'application; ou jusqu'à ce que le système affiche une alerte. Apprendre encore plus
Le type T du MacosPopupButton est le type de la valeur que représente chaque élément de menu contextuel. Toutes les entrées dans un menu donné doivent représenter des valeurs avec des types cohérents. En règle générale, une enum est utilisée. Chaque MacosPopupMenuItem dans les éléments doit être spécialisé avec ce même argument de type.
Le rappel onChanged doit mettre à jour une variable d'état qui définit la valeur du menu contextuel. Il doit également appeler State.setState pour reconstruire le bouton contextuel avec la nouvelle valeur.
Lorsqu'il existe des éléments de menu qui ne peuvent pas être affichés dans les contraintes de menu disponibles, un caret est affiché en haut ou en bas du menu ouvert pour signaler qu'il existe des éléments qui ne sont pas actuellement visibles.
Le menu peut également être navigué avec les touches haut / bas et un élément sélectionné avec la touche de retour.
| Thème sombre | Thème léger |
|---|---|
Voici un exemple de la façon de créer un bouton contextuel de base:
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 (),
),Les boutons appuyés sont le type de bouton standard en macOS. Les boutons poussants contiennent du texte - pas des icônes - et ouvrent souvent une fenêtre, une boîte de dialogue ou une application séparées afin que l'utilisateur puisse effectuer une tâche. Apprendre encore plus
| Thème sombre | Thème léger |
|---|---|
Remarque Les boutons poussants natifs peuvent être appelés en texte uniquement, en texte avec une icône ou en icône uniquement. Actuellement, les boutons de poussée en texte uniquement sont pris en charge. Pour créer un bouton d'icône uniquement, utilisez le widget MacosIconButton .
Voici un exemple de la façon de créer un bouton-poussoir de base:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),Un commutateur (également connu sous le nom de bascule) est un contrôle qui offre un choix binaire entre deux états mutuellement exclusifs - en activité. Un interrupteur montre qu'il est allumé lorsque la couleur de l'accent est visible et éteinte lorsque l'interrupteur apparaît incolore.
L'énumération ContolSize peut être transmise à la propriété size pour contrôler la taille de l'interrupteur. MacosSwitch prend en charge les tailles de contrôle suivantes:
minismallregular| Désactivé | Sur |
|---|---|
Voici un exemple de la façon de créer un commutateur à bascule de base:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),En savoir plus sur les commutateurs ici.
Affiche un ou plusieurs onglets de navigation dans un seul groupe horizontal. Utilisé par MacosTabView pour naviguer entre les différents onglets de la barre d'onglet.
L'utilisation typique de ce widget est de MacosTabView , pour contrôler la navigation de ses enfants. Vous n'avez pas besoin de spécifier un MacosSegmentedControl avec votre MacosTabView , car il est construit par ce widget.
Usage:
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 : () {},
),
),
);Usage:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);Un champ de texte est une zone rectangulaire dans laquelle l'utilisateur entre ou modifie une ou plusieurs lignes de texte. Un champ de texte peut contenir du texte simple ou stylé.
Voici un exemple de la façon de créer un champ de texte de base:
MacosTextField (
placeholder : 'Type some text here' ,
)Un champ de recherche est un style de champ de texte optimisé pour effectuer des recherches textuelles dans une grande collection de valeurs.
Lorsque l'utilisateur commence à taper dans le champ de recherche, une liste de résultats sélectionnables apparaît dans une superposition ci-dessous (ou au-dessus) le champ.
| Thème sombre | Thème léger |
|---|---|
Voici un exemple de la façon de créer un champ de recherche:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) Vérifiez les examples/fields_page pour plus d'exemples.
Les étiquettes sont une brève description de ce qu'un élément à l'écran fait.
Les infractions décrivent succinctement comment utiliser les contrôles sans déplacer l'attention des gens à l'écart de l'interface primaire. Les balises d'aide apparaissent lorsque l'utilisateur positionne le pointeur sur un contrôle pendant quelques secondes. Une info-bulle reste visible pendant 10 secondes, ou jusqu'à ce que le pointeur s'éloigne du contrôle.
| Thème sombre | Thème léger |
|---|---|
Pour créer une infraction, enveloppez n'importe quel widget sur un MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), Vous pouvez personnaliser l'info-bulle comme vous le souhaitez en personnalisant le TooltipTheme du thème. Une info-bulle s'adapte automatiquement à son environnement, répondant aux événements de contact et de pointeur. Pour utiliser une info-bulle avec un élément de barre d'outils, fournissez-lui une propriété tooltipMessage .
Ne faites pas que les gens s'asseoir à regarder un écran statique en attendant que votre application charge du contenu ou effectue de longues opérations de traitement des données. Utilisez des indicateurs de progrès pour informer les gens que votre application n'a pas calé et pour leur donner une idée du temps qu'ils attendront.
Les indicateurs de progrès ont deux styles distincts:
Les gens n'interagissent pas avec les indicateurs de progression; Cependant, ils sont souvent accompagnés d'un bouton pour annuler l'opération correspondante. Apprendre encore plus
Un ProgressCircle peut être déterminé ou indéterminé.
| Déterminer le cercle de progrès | Cercle de progrès indéterminé |
|---|---|
Voici un exemple de la façon de créer un cercle de progrès indéterminé:
ProgressCircle (
value : null ,
), Vous pouvez fournir une valeur non nul à value pour que le cercle de progrès soit déterminé.
Une ProgressBar ne peut être déterminée que.
Voici un exemple de la façon de créer une barre de progression déterminée:
ProgressBar (
value : 30 ,
)Un indicateur de niveau représente graphiquement une valeur spécifique dans une plage de valeurs numériques. Il est similaire à un curseur à usage, mais plus visuel et ne contient pas de contrôle distinct pour sélectionner une valeur - cliquer et traîner sur l'indicateur de niveau lui-même pour sélectionner une valeur est pris en charge. Un indicateur de niveau peut également inclure des marques de tiques, ce qui permet à l'utilisateur de déterminer facilement une valeur spécifique dans la plage. Il existe trois styles d'indicateurs de niveau différents, chacun avec une apparence différente, pour la capacité de communication, la notation et la pertinence.
Un indicateur de capacité illustre le niveau actuel par rapport à une capacité finie. Les indicateurs de capacité sont souvent utilisés lors de la communication de facteurs tels que l'utilisation du disque et de la batterie. Apprendre encore plus
Voici un exemple de la façon de créer un indicateur de capacité continue interactive:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), Vous pouvez définir discrete sur true pour en faire un indicateur de capacité discrète.
Un curseur est un contrôle qui permet aux gens de sélectionner une valeur dans une plage de valeurs continue ou discrète en déplaçant le pouce du curseur.
| Continu | Discret |
|---|---|
| Un curseur horizontal où toute valeur continue de valeur entre un min et max peut être sélectionnée | Un curseur horizontal où seules des valeurs discrètes entre un min et max peuvent être sélectionnées. Les marques de tiques sont souvent affichées pour fournir un contexte. |
Voici un exemple de la façon de créer un curseur continu interactif:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),Un indicateur de notation utilise une série de symboles graphiques disposés horizontalement pour communiquer un niveau de classement. Le symbole par défaut est une étoile.
Un indicateur de notation n'affiche pas les symboles partiels - sa valeur est arrondie afin d'afficher uniquement les symboles. Dans un indicateur de notation, les symboles sont toujours à la même distance et ne se développent pas ou ne rétrécissent pas pour s'adapter au contrôle. Apprendre encore plus
Voici un exemple de la façon de créer un indicateur de notation interactif:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)Permet à l'utilisateur de choisir une date.
Il existe trois styles de MacosDatePickers :
textual : un sélecteur de dattes en texte où l'utilisateur doit sélectionner le jour, le mois ou l'année et utiliser les boutons de contrôle de la caret pour modifier la valeur. Ceci est utile lorsque l'espace dans votre application est contraint.graphical : un sélecteur de date visuel où l'utilisateur peut naviguer dans une interface de type calendrier pour sélectionner une date.combined : fournit des interfaces textual et graphical . La localisation du sélecteur temporel est prise en charge par les paramètres weekdayAbbreviations et les paramètres monthAbbreviations (au lieu des localizations.narrowWeekdays() afin de correspondre aux spécifications d'Apple).
weekdayAbbreviations devraient être une liste de 7 cordes, une pour chaque jour de la semaine, à commencer par le dimanchemonthAbbreviations devrait être une liste de 12 chaînes, une pour chaque mois de l'année, à partir de janvier Vous pouvez également définir le dateFormat pour modifier la façon dont les dates sont affichées dans l'interface textuelle. Il prend une chaîne de jetons (insensible à la cas) et les remplace par leurs valeurs correspondantes. Les jetons suivants sont pris en charge:
D : jour du mois (1-31)DD : Jour du mois (01-31)M : mois de l'année (1-12)MM : mois de l'année (01-12)YYYY : année (0000-9999)/ , - . ) Le format par défaut est M/D/YYYY .
Exemple d'utilisation:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Permet à l'utilisateur de choisir un temps.
Il existe trois styles de MacosTimePickers :
textual : un sélecteur de temps en texte où l'utilisateur doit sélectionner l'heure ou la minute et utiliser les boutons de contrôle des carets pour modifier la valeur. Ceci est utile lorsque l'espace dans votre application est contraint.graphical : un sélecteur de temps visuel où l'utilisateur peut déplacer les mains d'une interface en forme d'horloge pour sélectionner un temps.combined : fournit des interfaces textual et graphical .Exemple d'utilisation:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Permet à l'utilisateur de choisir une couleur via le sélecteur de couleur macOS natif.
Vous pouvez choisir le mode pour lancer le sélecteur en utilisant l'énumération ColorPickerMode . La valeur par défaut est ColorPickerMode.wheel
Ce widget ne fonctionnera pas sur des plates-formes autres que MacOS!
Exemple d'utilisation:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
