macos_ui
Version 2.1.0
Widgets y temas de Flutter implementando el lenguaje de diseño de macOS actual.
Echa un vistazo a nuestra galería de widgets interactivos en línea en https://macosui.github.io/macos_ui/#/
Guías, Codelabs y otra documentación se pueden encontrar en https://macosui.dev
macos_ui se desarrolla contra el canal stable de Flutter. Para garantizar una experiencia de desarrollo sin problemas con macos_ui , debe construir su aplicación en el canal stable de Flutter.
Pub.dev muestra que macos_ui solo admite macOS. Esto se debe a que macos_ui llama a algún código nativo y, por lo tanto, especifica MACOS como una plataforma de complemento en el archivo pubspec.yaml .
macos_ui técnicamente funcionará en cualquier plataforma que Flutter admite, pero obtendrá los mejores resultados en MacOS . El soporte de la plataforma que no es de MACOS no está garantizado.
Las características de macos_ui que no funcionarán en plataformas distintas de MacOS debido a llamar a código nativo son:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellDado que en este momento Flutter no permite que los elementos de la interfaz de usuario desborzen los límites de la ventana, las ventanas emergentes están limitadas al espacio disponible.
Por lo tanto, si está utilizando widgets que crean ventanas emergentes en su barra de herramientas, como ToolBarPopupButton , debe evitar permitir que su ventana de aplicación se redeguilice por debajo de la altura de su ventana emergente más alta.
macos_ui da la bienvenida a las contribuciones! Consulte CONTRIBUTING.md para obtener más información.
MacosWindow es el marco básico para un diseño de estilo macOS.
Admite una Sidebar a la izquierda, una TitleBar opcional en la parte superior, y el resto de la ventana generalmente se llena con un MacosScaffold .
MacosWindowScope proporciona un alcance para la MacosWindow . La barra lateral se puede alternar con MacosWindowScope.of(context).toggleSidebar() . Tenga en cuenta que debe envolver su MacosScaffold en un widget Builder para que esto funcione correctamente.
Una barra lateral habilita la navegación de la aplicación y proporciona acceso rápido a las colecciones de contenido de alto nivel en su aplicación.
Las barras laterales se pueden colocar a la izquierda o derecha de su aplicación. Para colocar una barra lateral a la izquierda, use la propiedad MacosWindow.sidebar . Para colocar una barra lateral a la derecha, use la propiedad MacosWindow.endSidebar .
Ejemplo de uso:
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' ),
);
},
),
), El MacosScaffold es lo que podría llamar una "página".
El andamio tiene una propiedad toolbar y una propiedad children . children acepta un widget ContentArea y múltiples widgets ResizablePane . Para atrapar la navegación o las rutas debajo del andamio, considere envolver el MacosScaffold en una CupertinoTabView . Al hacerlo, la navegación dentro del MacosScaffold se mostrará dentro del área de MacosScaffold en lugar de cubrir toda la ventana. Para empujar una ruta fuera de un MacosScaffold envuelto en una CupertinoTabView , use el navegador raíz Navigator.of(context, rootNavigator: true)
Consulte la documentación para las personalizaciones y los ejemplos ToolBar .
Se introdujo un nuevo look para las aplicaciones de MacOS en Big Sur (MacOS 11). Para que coincida con esa apariencia en su aplicación Flutter, MacOS_UI se basa en MacOS_Window_utils, que requiere un objetivo mínimo de implementación de MacOS de 10.14.6. Por lo tanto, asegúrese de abrir la carpeta macos/Runner.xcworkspace de su proyecto usando XCode y busque Runner.xcodeproj . Vaya a Info > Deployment Target y establezca el macOS Deployment Target en 10.14.6 o superior. Luego, abra Podfile de su proyecto (si no aparece en Xcode, puede encontrarlo en el directorio macos de su proyecto a través de VS Code) y establecer la versión mínima de implementación en la primera línea en 10.14.6 o superior:
platform :osx , '10.14.6' También es posible que deba abrir Runner.xcodeproj de su aplicación en Xcode y establecer la versión mínima de implementación allí.
Ahora, configure su ventana dentro de su main() de la siguiente manera:
/// 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 ());
} Tenga en cuenta que si está utilizando una barra de título ( TitleBar ) en su MacosWindow , debe configurar la toolbarStyle de su ventana a NSWindowToolbarStyle.expanded , para alinear correctamente los botones de ventana Cerrar, minimizar y Zoom:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} En cualquier otro caso, debe mantenerlo como NSWindowToolbarStyle.unified .
Crea una barra de herramientas en el MacosScaffold . La barra de herramientas aparece debajo de la barra de título (si está presente) de la aplicación MacOS o se integra con ella, utilizando su propiedad title .
Una barra de herramientas proporciona un acceso conveniente a comandos y características de uso frecuente (elementos de la barra de herramientas). Las diferentes rutas de su aplicación podrían tener diferentes barras de herramientas.
Los elementos de la barra de herramientas incluyen ToolBarIconButton , ToolBarPulldownButton y widgets ToolBarSpacer , y deben proporcionarse a través de la propiedad items . La acción de cada elemento de la barra de herramientas también debe proporcionarse como un comando de barra de menú de su aplicación.
Las barras de herramientas se ven mejor y son más fáciles de entender cuando contienen elementos del mismo tipo (así que use etiquetas para cada elemento de la barra de herramientas o no).
Puede usar los widgets de ToolBarSpacer para establecer la agrupación de las diferentes acciones de la barra de herramientas.
Una barra de herramientas de ejemplo sería:
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..." ),
),
],
),
]
),Esto construye esta simple barra de herramientas:
Otros ejemplos de la barra de herramientas:
También puede crear su propio CustomToolbarItem para incluir cualquier tipo de widget en la barra de herramientas:
// 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 es una variante de la ToolBar estándar, con la diferencia clave que (como su nombre lo indica), es compatible con widgets desplazables como CustomScrollView y NestedScrollView . Hay tres propiedades adicionales en SliverToolBar :
pinned , que determina si la barra de herramientas debe permanecer visible mientras se desplazafloating , que determina si la barra de herramientas debe ser visible tan pronto como el uso comienza a desplazarse hacia arribaopacity , que administra el efecto de translucencia de la barra de herramientasEste widget permite a los desarrolladores lograr los comportamientos de la barra de herramientas observados en la App Store de Apple.
Uso de la muestra:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Un widget que tiene como objetivo aproximar el widget ListTile que se encuentra en la biblioteca de materiales de Flutter.
Uso de la muestra:
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,
),
),
), Una interfaz multipage que muestra una página a la vez. Debe usarse en un StatefulWidget .
Puede controlar la colocación de las pestañas utilizando la propiedad position .
Uso:
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 es idéntico a un Icon regular en todos los sentidos con una excepción: respeta un MacosTheme . Úselo de la misma manera que lo haría con un icono regular:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),Una casilla de verificación es un tipo de botón que permite al usuario elegir entre dos estados opuestos, acciones o valores. Se considera una casilla de verificación seleccionada cuando contiene una marca de verificación y apagado cuando está vacía. Una casilla de verificación casi siempre es seguida de un título a menos que aparezca en una lista de verificación. Obtenga más información
| Desenfrenado | Comprobado | Mezclado |
|---|---|---|
Aquí hay un ejemplo de cómo crear una casilla de verificación básica:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) Para hacer una casilla de verificación en el estado mixed , establezca value en null .
Un botón de ayuda aparece dentro de una vista y abre documentación de ayuda específica de la aplicación cuando se hace clic. Todos los botones de ayuda son botones circulares, de tamaño consistente que contienen un icono de marca de interrogación. Obtenga más información
Aquí hay un ejemplo de cómo crear un botón de ayuda:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) Puede personalizar la apariencia y el comportamiento del botón de ayuda utilizando HelpButtonTheme , pero Apple no lo recomienda cambiar la apariencia del botón de ayuda.
Un botón de radio es un pequeño botón circular seguido de un título. Por lo general, se presentan en grupos de dos a cinco, los botones de radio proporcionan al usuario un conjunto de opciones relacionadas pero mutuamente excluyentes. El estado de un botón de radio está encendido (un círculo lleno) o apagado (un círculo vacío). Obtenga más información
Aquí hay un ejemplo de cómo crear un botón de radio básico:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Un botón desplegable (a menudo denominado menú desplegable) es un tipo de botón emergente que, cuando se hace clic, muestra un menú que contiene una lista de opciones. El menú aparece debajo del botón. Una vez que se muestra el menú en la pantalla, permanece abierto hasta que el usuario elija un elemento de menú, haga clic fuera del menú, cambie a otra aplicación o abandone la aplicación; o hasta que el sistema muestre una alerta. Obtenga más información
Use un botón desplegable para presentar una lista de comandos. Un botón desplegable puede mostrar un title o un icon para describir el contenido del menú del botón. Si usa un icono, asegúrese de que comunique claramente el propósito del botón.
Si items son nulos, el botón se deshabilitará (atenuado).
Se debe proporcionar un title o un icon , que se mostrará como el título del botón desplegable, pero no ambos al mismo tiempo.
El menú también se puede navegar con las teclas Up/Down y una acción seleccionada con la tecla de retorno.
También puede aparecer en la barra de herramientas, a través del widget ToolBarPulldownButton .
| Tema oscuro | Tema de la luz |
|---|---|
Aquí hay un ejemplo de cómo crear un botón desplegable básico:
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 botón emergente (a menudo denominado menú emergente) es un tipo de botón que, cuando se hace clic, muestra un menú que contiene una lista de opciones mutuamente excluyentes. El menú aparece en la parte superior del botón. Al igual que otros tipos de menús, el menú de un botón emergente puede incluir separadores y símbolos como marcas de verificación. Una vez revelado el menú, permanece abierto hasta que el usuario elija un elemento de menú, haga clic fuera del menú, cambie a otra aplicación o abandone la aplicación; o hasta que el sistema muestre una alerta. Obtenga más información
El tipo T del MacosPopupButton es el tipo del valor que representa cada elemento de menú emergente. Todas las entradas en un menú dado deben representar valores con tipos consistentes. Típicamente, se usa un enum . Cada MacosPopupMenuItem en los elementos debe especializarse con ese mismo argumento de tipo.
La devolución de llamada onChanged debe actualizar una variable de estado que define el valor del menú emergente. También debe llamar a State.setState para reconstruir el botón emergente con el nuevo valor.
Cuando hay elementos de menú que no se pueden mostrar dentro de las limitaciones de menú disponibles, se muestra un careto en la parte superior o inferior del menú abierto para indicar que hay elementos que actualmente no son visibles.
El menú también se puede navegar con las teclas Up/Down y un elemento seleccionado con la tecla de retorno.
| Tema oscuro | Tema de la luz |
|---|---|
Aquí hay un ejemplo de cómo crear un botón emergente básico:
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 (),
),Los botones PUSH son el tipo de botón estándar en macOS. Los botones de presentación contienen texto, no iconos, y a menudo abren una ventana, diálogo o aplicación separadas para que el usuario pueda completar una tarea. Obtenga más información
| Tema oscuro | Tema de la luz |
|---|---|
Nota Los botones nativos de Push se pueden diseñar como solo texto, texto con un icono o solo iconos. Actualmente, se admiten los botones de presión de solo texto. Para crear un botón de solo icono, use el widget MacosIconButton .
Aquí hay un ejemplo de cómo crear un botón básico:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),Un interruptor (también conocido como alternativa) es un control que ofrece una elección binaria entre dos estados mutuamente excluyentes, y apagado. Un interruptor muestra que está encendido cuando el color de acento es visible y apagado cuando el interruptor parece incoloro.
El enum ContolSize se puede pasar a la propiedad size para controlar el tamaño del interruptor. MacosSwitch admite los siguientes tamaños de control:
minismallregular| Apagado | En |
|---|---|
Aquí hay un ejemplo de cómo crear un interruptor básico de palanca:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),Obtenga más información sobre los interruptores aquí.
Muestra una o más pestañas de navegación en un solo grupo horizontal. Utilizado por MacosTabView para navegar entre las diferentes pestañas de la barra de pestaña.
El uso típico de este widget es de MacosTabView , para controlar la navegación de sus hijos. No necesita especificar un MacosSegmentedControl con su MacosTabView , ya que es construido por ese widget.
Uso:
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 : () {},
),
),
);Uso:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);Un campo de texto es un área rectangular en la que el usuario entra o edita una o más líneas de texto. Un campo de texto puede contener texto simple o de estilo.
Aquí hay un ejemplo de cómo crear un campo de texto básico:
MacosTextField (
placeholder : 'Type some text here' ,
)Un campo de búsqueda es un estilo de campo de texto optimizado para realizar búsquedas basadas en texto en una gran colección de valores.
Cuando el usuario comienza a escribir en el campo de búsqueda, aparece una lista de resultados seleccionables en una superposición a continuación (o arriba) en el campo.
| Tema oscuro | Tema de la luz |
|---|---|
Aquí hay un ejemplo de cómo crear un campo de búsqueda:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) Verifique los examples/fields_page para obtener más ejemplos.
Las etiquetas son una breve descripción de lo que hace un elemento en la pantalla.
Las información sobre herramientas describen sucintamente cómo usar los controles sin cambiar el enfoque de las personas de la interfaz primaria. Las etiquetas de ayuda aparecen cuando el usuario coloca el puntero sobre un control durante unos segundos. Una información sobre herramientas permanece visible durante 10 segundos, o hasta que el puntero se aleje del control.
| Tema oscuro | Tema de la luz |
|---|---|
Para crear una información sobre herramientas, envuelva cualquier widget en un MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), Puede personalizar la información sobre herramientas de la manera que desee personalizando el TooltipTheme del tema. Una información sobre herramientas se adapta automáticamente a su entorno, respondiendo a los eventos de tacto y puntero. Para usar una información sobre herramientas con un elemento de la barra de herramientas, proporcione una propiedad de tooltipMessage .
No haga que las personas se sienten mirando una pantalla estática esperando que su aplicación cargue contenido o realice largas operaciones de procesamiento de datos. Use indicadores de progreso para que las personas sepan que su aplicación no se ha estancado y para darles una idea de cuánto tiempo estarán esperando.
Los indicadores de progreso tienen dos estilos distintos:
Las personas no interactúan con indicadores de progreso; Sin embargo, a menudo van acompañados de un botón para cancelar la operación correspondiente. Obtenga más información
Un ProgressCircle puede ser determinado o indeterminado.
| Círculo de progreso determinado | Círculo de progreso indeterminado |
|---|---|
Aquí hay un ejemplo de cómo crear un círculo de progreso indeterminado:
ProgressCircle (
value : null ,
), Puede proporcionar un valor no nulo al value para determinar el círculo de progreso.
Una ProgressBar solo se puede determinar.
Aquí hay un ejemplo de cómo crear una barra de progreso determinada:
ProgressBar (
value : 30 ,
)Un indicador de nivel representa gráficamente de un valor específico dentro de un rango de valores numéricos. Es similar a un control deslizante en un propósito, pero más visual y no contiene un control distinto para seleccionar un valor: hacer clic y arrastrar a través del indicador de nivel en sí para seleccionar un valor es compatible. Un indicador de nivel también puede incluir marcas de verificación, lo que facilita que el usuario identifique un valor específico en el rango. Hay tres estilos de indicadores de nivel diferentes, cada uno con una apariencia diferente, para la capacidad de comunicación, la calificación y la relevancia.
Un indicador de capacidad ilustra el nivel actual en relación con una capacidad finita. Los indicadores de capacidad a menudo se usan al comunicar factores como el disco y el uso de la batería. Obtenga más información
Aquí hay un ejemplo de cómo crear un indicador de capacidad continua interactiva:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), Puede establecer discrete en true para que sea un indicador de capacidad discreta.
Un control deslizante es un control que permite a las personas seleccionar un valor de un rango de valores continuo o discreto al mover el pulgar deslizante.
| Continuo | Discreto |
|---|---|
| Un control deslizante horizontal donde se puede seleccionar cualquier valor continuo entre un min y max | Se puede seleccionar un control deslizante horizontal donde solo se pueden seleccionar valores discretos entre un min y max. Las marcas de tick a menudo se muestran para proporcionar contexto. |
Aquí hay un ejemplo de cómo crear un control deslizante continuo interactivo:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),Un indicador de calificación utiliza una serie de símbolos gráficos dispuestos horizontalmente para comunicar un nivel de clasificación. El símbolo predeterminado es una estrella.
Un indicador de calificación no muestra símbolos parciales: su valor es redondeado para mostrar solo símbolos completos. Dentro de un indicador de calificación, los símbolos siempre están separados por la misma distancia y no se expanden ni se encogen para adaptarse al control. Obtenga más información
Aquí hay un ejemplo de cómo crear un indicador de calificación interactivo:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)Deja que el usuario elija una fecha.
Hay tres estilos de MacosDatePickers :
textual : un selector de fecha de solo texto donde el usuario debe seleccionar el día, el mes o el año y usar los botones de control de caretos para cambiar el valor. Esto es útil cuando el espacio en su aplicación está limitado.graphical : un selector de fecha visual donde el usuario puede navegar a través de una interfaz de calendario para seleccionar una fecha.combined : proporciona interfaces textual y graphical . La localización del selector de tiempo es compatible con los parámetros de weekdayAbbreviations y monthAbbreviations (en lugar de por ejemplo, localizations.narrowWeekdays() estándar.
weekdayAbbreviations deben ser una lista de 7 cuerdas, una para cada día de la semana, comenzando con el domingomonthAbbreviations deben ser una lista de 12 cuerdas, una para cada mes del año, comenzando con enero También puede definir el dateFormat para cambiar la forma en que se muestran las fechas en la interfaz textual. Se necesita una cadena de tokens (insensibles a la caja) y los reemplaza con sus valores correspondientes. Se admiten los siguientes tokens:
D : Día del mes (1-31)DD : Día del mes (01-31)M : Mes del año (1-12)MM : Mes del año (01-12)YYYY : año (0000-9999)/ , - . ) El formato predeterminado es M/D/YYYY .
Ejemplo de uso:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Deja que el usuario elija una hora.
Hay tres estilos de MacosTimePickers :
textual : un selector de tiempo de solo texto donde el usuario debe seleccionar la hora o el minuto y usar los botones de control de caretos para cambiar el valor. Esto es útil cuando el espacio en su aplicación está limitado.graphical : un selector de tiempo visual donde el usuario puede mover las manos de una interfaz similar al reloj para seleccionar una hora.combined : proporciona interfaces textual y graphical .Ejemplo de uso:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Permita que el usuario elija un color a través del selector de color MacOS nativo.
Puede elegir qué modo iniciar el selector en el ColorPickerMode Enum. El valor predeterminado es ColorPickerMode.wheel
¡Este widget no funcionará en plataformas que no sean macOS!
Ejemplo de uso:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
