macos_ui
Version 2.1.0
Flutter Widgets e temas implementando a linguagem de design do MacOS atual.
Confira nossa galeria de widgets interativos on -line em https://macosui.github.io/macos_ui/#/
Guias, codelabs e outra documentação podem ser encontrados em https://macosui.dev
macos_ui é desenvolvido contra o canal stable do Flutter. Para garantir uma experiência de desenvolvimento suave com macos_ui , você deve criar seu aplicativo no canal stable do Flutter.
O Pub.Dev mostra que macos_ui suporta apenas macOS. Isso ocorre porque macos_ui chama algum código nativo e, portanto, especifica o MacOS como uma plataforma de plug -in no arquivo pubspec.yaml .
Tecnicamente, macos_ui funcionará em qualquer plataforma que o Flutter suporta, mas você obterá melhores resultados no macOS . O suporte à plataforma não-MACOS não é garantido.
Os recursos de macos_ui que não funcionarão em plataformas que não sejam o macOS devido a chamadas de código nativo são:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellComo nesse momento o Flutter não permite que os elementos da interface do usuário transbordem os limites da janela, os pop -ups são restritos ao espaço disponível.
Portanto, se você estiver usando widgets que criam pop -ups na barra de ferramentas, como ToolBarPopupButton , deve evitar que a janela do aplicativo seja redimensionada abaixo da altura do seu pop -up mais alto.
macos_ui dá as boas -vindas às contribuições! Consulte CONTRIBUTING.md para obter mais informações.
MacosWindow é o quadro básico para um layout no estilo macOS.
Ele suporta uma Sidebar à esquerda, uma TitleBar opcional na parte superior, e o restante da janela é normalmente preenchido com um MacosScaffold .
Um escopo para o MacosWindow é fornecido pelo MacosWindowScope . A barra lateral pode ser alterada com MacosWindowScope.of(context).toggleSidebar() . Observe que você deve envolver seu MacosScaffold em um widget Builder para que isso funcione corretamente.
Uma barra lateral permite a navegação de aplicativos e fornece acesso rápido a coleções de conteúdo de nível superior em seu aplicativo.
As barras laterais podem ser colocadas à esquerda ou à direita do seu aplicativo. Para colocar uma barra lateral à esquerda, use a propriedade MacosWindow.sidebar . Para colocar uma barra lateral à direita, use a propriedade MacosWindow.endSidebar .
Exemplo 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' ),
);
},
),
), O MacosScaffold é o que você pode chamar de "página".
O andaime possui uma propriedade toolbar e uma propriedade children . children aceitam um widget ContentArea e múltiplos widgets ResizablePane . Para capturar navegação ou rotas abaixo do andaime, considere envolver o MacosScaffold em um CupertinoTabView . Ao fazer isso, a navegação dentro do MacosScaffold será exibida dentro da área de MacosScaffold , em vez de cobrir toda a janela. Para empurrar uma rota para fora de um MacosScaffold envolto em um CupertinoTabView , use o navegador ROOT Navigator.of(context, rootNavigator: true)
Consulte a documentação para personalizações e exemplos de ToolBar .
Um novo visual para aplicativos MacOS foi introduzido no Big Sur (MacOS 11). Para combinar com essa aparência no seu aplicativo Flutter, o MacOS_UI conta com MacOS_Window_Utils, que requer uma meta de implantação mínima do MACOS de 10.14.6. Portanto, abra a pasta macos/Runner.xcworkspace do seu projeto usando o xcode e pesquise Runner.xcodeproj . Vá para Info > Deployment Target e defina a macOS Deployment Target como 10.14.6 ou superior. Em seguida, abra Podfile do seu projeto (se ele não aparecer no Xcode, você poderá encontrá -lo no diretório macos do seu projeto via código VS) e definir a versão mínima de implantação na primeira linha para 10.14.6 ou acima:
platform :osx , '10.14.6' Você também pode precisar abrir Runner.xcodeproj do seu aplicativo no Xcode e definir a versão mínima de implantação lá.
Agora, configure sua janela dentro do seu main() da seguinte forma:
/// 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 ());
} Observe que, se você estiver usando uma barra de título ( TitleBar ) na sua MacosWindow , definirá o toolbarStyle da sua janela para NSWindowToolbarStyle.expanded , para alinhar adequadamente os botões de janela de zoom e minimizar adequadamente:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} Em qualquer outro caso, você deve mantê -lo como NSWindowToolbarStyle.unified .
Cria uma barra de ferramentas no MacosScaffold . A barra de ferramentas aparece abaixo da barra de título (se presente) do aplicativo MacOS ou se integra a ele, usando sua propriedade title .
Uma barra de ferramentas fornece acesso conveniente a comandos e recursos usados com frequência (itens da barra de ferramentas). Diferentes rotas do seu aplicativo podem ter barras de ferramentas diferentes.
Os itens da barra de ferramentas incluem ToolBarIconButton , ToolBarPulldownButton e widgets ToolBarSpacer e devem ser fornecidos através da propriedade items . A ação de todos os itens da barra de ferramentas também deve ser fornecida como um comando de barra de menu do seu aplicativo.
As barras de ferramentas parecem melhores e são mais fáceis de entender quando contêm elementos do mesmo tipo (portanto, use rótulos para cada item da barra de ferramentas ou não).
Você pode usar os widgets ToolBarSpacer para definir o agrupamento das diferentes ações da barra de ferramentas.
Um exemplo de barra de ferramentas seria:
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..." ),
),
],
),
]
),Isso constrói esta barra de ferramentas simples:
Outros exemplos da barra de ferramentas:
Você também pode criar seu próprio CustomToolbarItem para incluir qualquer tipo de widget na barra de ferramentas:
// 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 é uma variante da ToolBar padrão, com a principal diferença é que (como o nome implica), é compatível com widgets roláveis como CustomScrollView e NestedScrollView . Existem três propriedades adicionais no SliverToolBar :
pinned , o que determina se a barra de ferramentas deve permanecer visível durante a rolagemfloating , que determina se a barra de ferramentas deve se tornar visível assim que o uso começar a rolar para cimaopacity , que gerencia o efeito translucidez da barra de ferramentasEsse widget permite que os desenvolvedores atinjam os comportamentos da barra de ferramentas vistos na App Store da Apple.
Uso de amostra:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Um widget que visa aproximar o widget ListTile encontrado na biblioteca de materiais da Flutter.
Uso de amostra:
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,
),
),
), Uma interface multipage que exibe uma página de cada vez. Deve ser usado em um StatefulWidget .
Você pode controlar o posicionamento das guias usando a propriedade 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' ),
),
],
),
Um MacosIcon é idêntico a um Icon regular em todos os aspectos, com uma exceção - respeita um MacosTheme . Use -o da mesma maneira que você faria com um ícone regular:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),Uma caixa de seleção é um tipo de botão que permite que o usuário escolha entre dois estados, ações ou valores opostos. Uma caixa de seleção selecionada é considerada quando contém uma marca de seleção e desativada quando estiver vazia. Uma caixa de seleção é quase sempre seguida por um título, a menos que apareça em uma lista de verificação. Saber mais
| Sem controle | Verificado | Misturado |
|---|---|---|
Aqui está um exemplo de como criar uma caixa de seleção básica:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) Para fazer uma caixa de seleção no estado mixed , defina value como null .
Um botão Ajuda aparece em uma exibição e abre documentação de ajuda específica do aplicativo quando clicada. Todos os botões de ajuda são botões circulares de tamanho consistente que contêm um ícone do ponto de interrogação. Saber mais
Aqui está um exemplo de como criar um botão de ajuda:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) Você pode personalizar a aparência e o comportamento do botão Ajuda usando o HelpButtonTheme , mas não é recomendado pela Apple para alterar a aparência de Button.
Um botão de rádio é um pequeno botão circular, seguido de um título. Normalmente apresentados em grupos de dois a cinco, os botões de rádio fornecem ao usuário um conjunto de opções relacionadas, mas mutuamente exclusivas. O estado de um botão de rádio está ligado (um círculo preenchido) ou desligado (um círculo vazio). Saber mais
Aqui está um exemplo de como criar um botão básico de rádio:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Um botão de retirada (geralmente chamado de menu suspenso) é um tipo de botão pop-up que, quando clicado, exibe um menu que contém uma lista de opções. O menu aparece abaixo do botão. Depois que o menu é exibido na tela, ele permanece aberto até o usuário escolher um item de menu, clicar fora do menu, mudar para outro aplicativo ou sair do aplicativo; ou até que o sistema exiba um alerta. Saber mais
Use um botão pull-down para apresentar uma lista de comandos. Um botão suspenso pode mostrar um title ou um icon para descrever o conteúdo do menu do botão. Se você usar um ícone, verifique se ele comunica claramente o objetivo do botão.
Se items forem nulos, o botão será desativado (acinzentado).
Um title ou um icon deve ser fornecido, a ser exibido como o título do botão pull-down, mas não ambos ao mesmo tempo.
O menu também pode ser navegado com as teclas UP/Down e uma ação selecionada com a chave de retorno.
Ele também pode aparecer na barra de ferramentas, através do widget ToolBarPulldownButton .
| Tema sombrio | Tema leve |
|---|---|
Aqui está um exemplo de como criar um botão de suspensão 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" ),
),
],
),Um botão pop-up (geralmente chamado de menu pop-up) é um tipo de botão que, quando clicado, exibe um menu que contém uma lista de opções mutuamente exclusivas. O menu aparece na parte superior do botão. Como outros tipos de menus, o menu de um botão pop-up pode incluir separadores e símbolos, como marcas de seleção. Depois que o menu for revelado, ele permanece aberto até que o usuário escolha um item de menu, clique fora do menu, muda para outro aplicativo ou desiste do aplicativo; ou até que o sistema exiba um alerta. Saber mais
O tipo T do MacosPopupButton é o tipo do valor que cada item de menu pop-up representa. Todas as entradas em um determinado menu devem representar valores com tipos consistentes. Normalmente, uma enum é usada. Cada MacosPopupMenuItem nos itens deve ser especializado com o mesmo tipo de argumento.
O retorno de chamada onChanged deve atualizar uma variável de estado que define o valor do menu pop-up. Ele também deve ligar para State.setState para reconstruir o botão pop-up com o novo valor.
Quando existem itens de menu que não podem ser exibidos nas restrições de menu disponíveis, um cuidador é mostrado na parte superior ou inferior do menu aberto para sinalizar que existem itens que atualmente não são visíveis.
O menu também pode ser navegado com as teclas UP/Down e um item selecionado com a tecla de retorno.
| Tema sombrio | Tema leve |
|---|---|
Aqui está um exemplo de como criar um botão pop-up 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 (),
),Os botões de pressão são o tipo de botão padrão no macOS. Os botões de pressão contêm texto - não os ícones - e geralmente abrem uma janela, diálogo ou aplicativo separados para que o usuário possa concluir uma tarefa. Saber mais
| Tema sombrio | Tema leve |
|---|---|
Nota Os botões de pressão nativos podem ser estilizados apenas como texto, texto com um ícone ou somente ícone. Atualmente, os botões de pressão somente de texto são suportados. Para criar um botão somente de ícone, use o widget MacosIconButton .
Aqui está um exemplo de como criar um botão básico:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),Um interruptor (também conhecido como alternância) é um controle que oferece uma escolha binária entre dois estados mutuamente exclusivos - ligados e desativados. Um interruptor mostra que está ativado quando a cor do destaque é visível e desligada quando o interruptor parece incolor.
A enum ContolSize pode ser passada para a propriedade size para controlar o tamanho do comutador. MacosSwitch suporta os seguintes tamanhos de controle:
minismallregular| Desligado | Sobre |
|---|---|
Aqui está um exemplo de como criar um interruptor básico de alternância:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),Saiba mais sobre os switches aqui.
Exibe uma ou mais guias de navegação em um único grupo horizontal. Usado pelo MacosTabView para navegar entre as diferentes guias da barra de guias.
O uso típico desse widget é da MacosTabView , para controlar a navegação de seus filhos. Você não precisa especificar um MacosSegmentedControl com o seu MacosTabView , pois ele é criado por esse 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 (),
);Um campo de texto é uma área retangular na qual o usuário entra ou edita uma ou mais linhas de texto. Um campo de texto pode conter texto simples ou com estilo.
Aqui está um exemplo de como criar um campo de texto básico:
MacosTextField (
placeholder : 'Type some text here' ,
)Um campo de pesquisa é um estilo de texto otimizado para executar pesquisas baseadas em texto em uma grande coleção de valores.
Quando o usuário começa a digitar no campo de pesquisa, uma lista de resultados selecionáveis aparece em uma sobreposição abaixo (ou acima) do campo.
| Tema sombrio | Tema leve |
|---|---|
Aqui está um exemplo de como criar um campo de pesquisa:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) Verifique os examples/fields_page para obter mais exemplos.
Os rótulos são uma breve descrição do que um elemento na tela faz.
As dicas de ferramentas descrevem sucintamente como usar os controles sem afastar o foco das pessoas da interface primária. As tags de ajuda aparecem quando o usuário posiciona o ponteiro em um controle por alguns segundos. Uma dica de ferramenta permanece visível por 10 segundos, ou até que o ponteiro se afaste do controle.
| Tema sombrio | Tema leve |
|---|---|
Para criar uma dica de ferramenta, envolva qualquer widget em um MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), Você pode personalizar a dica de ferramenta da maneira que deseja, personalizando o TooltipTheme do tema. Uma dica de ferramenta se adapta automaticamente ao seu ambiente, respondendo aos eventos de toque e ponteiro. Para usar uma dica de ferramenta com um item da barra de ferramentas, forneça uma propriedade tooltipMessage .
Não faça as pessoas ficarem olhando para uma tela estática aguardando o seu aplicativo para carregar conteúdo ou executar longas operações de processamento de dados. Use indicadores de progresso para que as pessoas saibam que seu aplicativo não parou e para dar uma idéia de quanto tempo elas estarão esperando.
Os indicadores de progresso têm dois estilos distintos:
As pessoas não interagem com os indicadores de progresso; No entanto, eles geralmente são acompanhados por um botão para cancelar a operação correspondente. Saber mais
Um ProgressCircle pode ser determinado ou indeterminado.
| Círculo de progresso determinado | Círculo de progresso indeterminado |
|---|---|
Aqui está um exemplo de como criar um círculo de progresso indeterminado:
ProgressCircle (
value : null ,
), Você pode fornecer um valor não nulo para value para determinar o círculo de progresso.
Uma ProgressBar só pode ser determinada.
Aqui está um exemplo de como criar uma barra de progresso determinada:
ProgressBar (
value : 30 ,
)Um indicador de nível representa graficamente um valor específico dentro de um intervalo de valores numéricos. É semelhante a um slider em propósito, mas mais visual e não contém um controle distinto para selecionar um valor - clicar e arrastar o próprio indicador de nível para selecionar um valor é suportado, no entanto. Um indicador de nível também pode incluir marcas de escala, facilitando para o usuário identificar um valor específico no intervalo. Existem três estilos de indicadores de nível diferentes, cada um com uma aparência diferente, para comunicar capacidade, classificação e relevância.
Um indicador de capacidade ilustra o nível atual em relação a uma capacidade finita. Os indicadores de capacidade são frequentemente usados ao comunicar fatores como uso de disco e bateria. Saber mais
Aqui está um exemplo de como criar um indicador de capacidade contínua interativa:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), Você pode definir discrete como true para torná -lo um indicador de capacidade discreto.
Um controle deslizante é um controle que permite que as pessoas selecionem um valor de uma gama contínua ou discreta de valores movendo o polegar deslizante.
| Contínuo | Discreto |
|---|---|
| Um controle deslizante horizontal onde qualquer valor contínuo entre um min e max pode ser selecionado | Um controle deslizante horizontal onde apenas valores discretos entre um min e o máximo podem ser selecionados. As marcas são frequentemente exibidas para fornecer contexto. |
Aqui está um exemplo de como criar um controle deslizante contínuo interativo:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),Um indicador de classificação usa uma série de símbolos gráficos organizados horizontalmente para comunicar um nível de classificação. O símbolo padrão é uma estrela.
Um indicador de classificação não exibe símbolos parciais - seu valor é arredondado para exibir apenas símbolos completos. Dentro de um indicador de classificação, os símbolos estão sempre a mesma distância e não se expandem ou encolhem para se ajustarem ao controle. Saber mais
Aqui está um exemplo de como criar um indicador de classificação interativa:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)Permite o usuário escolher uma data.
Existem três estilos de MacosDatePickers :
textual : um seletor de data somente de texto em que o usuário deve selecionar o dia, mês ou ano e usar os botões de controle de cuidados para alterar o valor. Isso é útil quando o espaço em seu aplicativo é restrito.graphical : um seletor de data visual em que o usuário pode navegar por uma interface do tipo calendário para selecionar uma data.combined : fornece interfaces textual e graphical . A localização do seletor de tempo é suportada pelos parâmetros da weekdayAbbreviations e monthAbbreviations (em vez de localizations.narrowWeekdays() para corresponder à especificação da Apple).
weekdayAbbreviations deve ser uma lista de 7 cordas, uma para cada dia da semana, começando com domingomonthAbbreviations deve ser uma lista de 12 strings, uma para cada mês do ano, começando com janeiro Você também pode definir o dateFormat para alterar a maneira como as datas são exibidas na interface textual. É preciso uma série de tokens (insensível com o caso) e os substitui por seus valores correspondentes. Os seguintes tokens são suportados:
D : Dia do mês (1-31)DD : Dia do mês (01-31)M : mês do ano (1-12)MM : mês do ano (01-12)YYYY : Ano (0000-9999)/ - . ) O formato padrão é M/D/YYYY .
Exemplo de uso:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Permite que o usuário escolha uma hora.
Existem três estilos de MacosTimePickers :
textual : um seletor de horário somente para texto, onde o usuário deve selecionar a hora ou minuto e usar os botões de controle de cuidados para alterar o valor. Isso é útil quando o espaço em seu aplicativo é restrito.graphical : um seletor de tempo visual, onde o usuário pode mover as mãos de uma interface semelhante ao relógio para selecionar um tempo.combined : fornece interfaces textual e graphical .Exemplo de uso:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Permite que o usuário escolha uma cor através do seletor de cores do MacOS nativo.
Você pode escolher em qual modo iniciar o seletor usando o enum ColorPickerMode . O padrão é ColorPickerMode.wheel
Este widget não funcionará em outras plataformas que não o MacOS!
Exemplo de uso:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
