macos_ui 1.9.0 macos_ui: ^1.9.0 copied to clipboard
Flutter widgets and themes implementing the current macOS design language.
import 'package:example/pages/buttons_page.dart';
import 'package:example/pages/colors_page.dart';
import 'package:example/pages/dialogs_page.dart';
import 'package:example/pages/fields_page.dart';
import 'package:example/pages/indicators_page.dart';
import 'package:example/pages/selectors_page.dart';
import 'package:example/pages/tabview_page.dart';
import 'package:example/pages/toolbar_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:provider/provider.dart';
import 'theme.dart';
void main() {
runApp(const MacosUIGalleryApp());
}
class MacosUIGalleryApp extends StatelessWidget {
const MacosUIGalleryApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => AppTheme(),
builder: (context, _) {
final appTheme = context.watch<AppTheme>();
return MacosApp(
title: 'macos_ui Widget Gallery',
theme: MacosThemeData.light(),
darkTheme: MacosThemeData.dark(),
themeMode: appTheme.mode,
debugShowCheckedModeBanner: false,
home: const WidgetGallery(),
);
},
);
}
}
class WidgetGallery extends StatefulWidget {
const WidgetGallery({super.key});
@override
State<WidgetGallery> createState() => _WidgetGalleryState();
}
class _WidgetGalleryState extends State<WidgetGallery> {
double ratingValue = 0;
double sliderValue = 0;
bool value = false;
int pageIndex = 0;
late final searchFieldController = TextEditingController();
final List<Widget> pages = [
CupertinoTabView(
builder: (_) => const ButtonsPage(),
),
const IndicatorsPage(),
const FieldsPage(),
const ColorsPage(),
const Center(
child: MacosIcon(
CupertinoIcons.add,
),
),
const DialogsPage(),
const ToolbarPage(),
const SelectorsPage(),
const TabViewPage(),
];
@override
Widget build(BuildContext context) {
return PlatformMenuBar(
menus: const [
PlatformMenu(
label: 'macos_ui Widget Gallery',
menus: [
PlatformProvidedMenuItem(
type: PlatformProvidedMenuItemType.about,
),
PlatformProvidedMenuItem(
type: PlatformProvidedMenuItemType.quit,
),
],
),
PlatformMenu(
label: 'View',
menus: [
PlatformProvidedMenuItem(
type: PlatformProvidedMenuItemType.toggleFullScreen,
),
],
),
PlatformMenu(
label: 'Window',
menus: [
PlatformProvidedMenuItem(
type: PlatformProvidedMenuItemType.minimizeWindow,
),
PlatformProvidedMenuItem(
type: PlatformProvidedMenuItemType.zoomWindow,
),
],
),
],
child: MacosWindow(
sidebar: Sidebar(
top: MacosSearchField(
placeholder: 'Search',
controller: searchFieldController,
onResultSelected: (result) {
switch (result.searchKey) {
case 'Buttons':
setState(() {
pageIndex = 0;
searchFieldController.clear();
});
break;
case 'Indicators':
setState(() {
pageIndex = 1;
searchFieldController.clear();
});
break;
case 'Fields':
setState(() {
pageIndex = 2;
searchFieldController.clear();
});
break;
case 'Colors':
setState(() {
pageIndex = 3;
searchFieldController.clear();
});
break;
case 'Dialogs and Sheets':
setState(() {
pageIndex = 5;
searchFieldController.clear();
});
break;
case 'Toolbar':
setState(() {
pageIndex = 6;
searchFieldController.clear();
});
break;
case 'Selectors':
setState(() {
pageIndex = 7;
searchFieldController.clear();
});
break;
default:
searchFieldController.clear();
}
},
results: const [
SearchResultItem('Buttons'),
SearchResultItem('Indicators'),
SearchResultItem('Fields'),
SearchResultItem('Colors'),
SearchResultItem('Dialogs and Sheets'),
SearchResultItem('Toolbar'),
SearchResultItem('Selectors'),
],
),
minWidth: 200,
builder: (context, _) {
return SidebarItems(
currentIndex: pageIndex,
onChanged: (i) => setState(() => pageIndex = i),
scrollController: ScrollController(),
itemSize: SidebarItemSize.large,
items: [
const SidebarItem(
// leading: MacosIcon(CupertinoIcons.square_on_circle),
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/button_programmable_2x.png',
),
),
label: Text('Buttons'),
),
const SidebarItem(
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/lines_measurement_horizontal_2x.png',
),
),
label: Text('Indicators'),
),
const SidebarItem(
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/character_cursor_ibeam_2x.png',
),
),
label: Text('Fields'),
),
SidebarItem(
leading: const MacosIcon(CupertinoIcons.folder),
label: const Text('Disclosure'),
trailing: Text(
'2',
style: TextStyle(
color: MacosTheme.brightnessOf(context) == Brightness.dark
? MacosColors.tertiaryLabelColor.darkColor
: MacosColors.tertiaryLabelColor,
),
),
disclosureItems: [
const SidebarItem(
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/rectangle_3_group_2x.png',
),
),
label: Text('Colors'),
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.infinite),
label: Text('Item 3'),
),
],
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.square_on_square),
label: Text('Dialogs & Sheets'),
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.macwindow),
label: Text('Toolbar'),
),
const SidebarItem(
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/filemenu_and_selection_2x.png',
),
),
label: Text('Selectors'),
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
label: Text('TabView'),
),
],
);
},
bottom: const MacosListTile(
leading: MacosIcon(CupertinoIcons.profile_circled),
title: Text('Tim Apple'),
subtitle: Text('tim@apple.com'),
),
),
endSidebar: Sidebar(
startWidth: 200,
minWidth: 200,
maxWidth: 300,
shownByDefault: false,
builder: (context, _) {
return const Center(
child: Text('End Sidebar'),
);
},
),
child: IndexedStack(
index: pageIndex,
children: pages,
),
),
);
}
}