客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：stryder-dev/flutter_platform_widgets开源软件地址(OpenSource Url)：https://github.com/stryder-dev/flutter_platform_widgets开源编程语言(OpenSource Language)：Dart 99.2%开源软件介绍(OpenSource Introduction)：
Flutter Platform Widgets
This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render targeted Material or Cupertino device specific styles, you need to either conditionally check the platform or create a set of widgets to render differently depending on the running platform. This package supports the Stable release as a full released version. Beta or Dev channels might be supported when there is a pre-release version. Please check the CHANGELOG for version compatibility version. Due to Master being in rapid development this package is unable to support Master. If this support is required then it is best to fork the repo and locally reference the forked version where changes can be made appropriately. InstallationHow it worksThe flutter ConfigurationSee PlatformProvider for configuration options. WidgetsThese set of widgets allow for rendering based on the target platform using a single cross platform set of widget.
Each
PlatformWidgetA widget that will render either the material widget or cupertino widget based on the target platform. The widgets themselves do not need to be specifically Material or Cupertino. return PlatformWidget(
cupertino: (_, __) => Icon(CupertinoIcons.flag),
material: (_, __) => Icon(Icons.flag),
);PlatformTextA widget that will render uppercase for material. Cupertino will remain unchanged. return PlatformText('Cancel');PlatformSwitchA switch widget that will use a return PlatformSwitch(
onChanged: (bool value) {},
value: value,
);Enhancereturn PlatformSwitch(
onChanged: (bool value) {},
value: value,
material: (_, __) => MaterialSwitchData(...),
cupertino: (_, __) => CupertinoSwitchData(...)
);PlatformSliderA slider widget that will use a return PlatformSlider(
onChanged: (bool value) {},
value: value,
);Enhancereturn PlatformSlider(
onChanged: (bool value) {},
value: value,
material: (_, __) => MaterialSliderData(...),
cupertino: (_, __) => CupertinoSliderData(...)
);PlatformTextFieldA text field widget that will use a return PlatformTextField();Enhancereturn PlatformTextField(
material: (_, __) => MaterialTextFieldData(...),
cupertino: (_, __) => CupertinoTextFieldData(...)
);PlatformIconButtonA clickable (tappable) button with an icon. Uses return PlatformIconButton(
onPressed: () => print('info pressed'),
materialIcon: Icon(Icons.info),
cupertinoIcon: Icon(
CupertinoIcons.info,
size: 28.0,
),
);EnhanceExtend with Widget infoIconButton() {
return PlatformIconButton(
onPressed: () => print('info pressed'),
materialIcon: Icon(Icons.info),
cupertinoIcon: Icon(CupertinoIcons.info),
material: (_, __) => MaterialIconButtonData(...),
cupertino: (_, __) => CupertinoIconButtonData(...),
);
}PlatformAppA top level widget for the application that uses return PlatformApp(
title: 'Flutter Demo',
home: ...
);or return PlatformApp.router(
routeInformationParser: ...
routerDelegate: ...
)EnhanceExtend with return PlatformApp(
home: ...
material: (_, __) => MaterialAppData(...)
cupertino: (_, __) => CupertinoAppData(...)
);or return PlatformApp.router(
material: (_, __) => MaterialAppRouterData(...)
cupertino: (_, __) => CupertinoAppRouterData(...)
);PlatformScaffoldA Scaffold that provides the correctly hosted header (AppBar) and navigation bar (Bottom Bar) for each platform. Uses return PlatformScaffold(
appBar: PlatformAppBar()
body: _buildContent(),
bottomNavBar: PlatformNavBar(),
iosContentPadding: false,
iosContentBottomPadding: false
);
EnhanceExtend with return PlatformScaffold(
appBar: PlatformAppBar()
body: _buildContent(),
bottomNavBar: PlatformNavBar(),
material: (_, __) => MaterialScaffoldData(...)
cupertino: (_, __) => CupertinoPageScaffoldData(...);
);
PlatformTabScaffold
A Scaffold that provides the correctly hosted header (AppBar) and navigation bar (Bottom Bar) for each platform. Uses return PlatformTabScaffold(
tabController: tabController,
appBarBuilder: (_, index) => PlatformAppBar(),
bodyBuilder: (context, index) => _buildContent(index),
items: _items(context),
);More more detailed example look at:
EnhanceExtend with return PlatformTabScaffold(
tabController: tabController,
appBarBuilder: (_, index) => PlatformAppBar(),
bodyBuilder: (context, index) => _buildContent(index),
items: _items(context),
material: (_, __) => MaterialTabScaffoldData(...)
cupertino: (_, __) => CupertinoTabScaffoldData(...);
materialtabs: (_, __) => MaterialNavBarData(...)
cupertinoTabs: (_, __) => CupertinoTabBarData(...);
);
PlatformAppBarThe AppBar is the top Header bar with a title, left-side or right-side buttons. Uses return PlatformAppBar(
title: new Text('Platform Widgets'),
leading: PlatformIconButton(),
trailingActions: <Widget>[
PlatformIconButton(),
],
);
EnhanceExtend with return PlatformAppBar(
title: new Text('Platform Widgets'),
leading: PlatformIconButton(),
trailingActions: <Widget>[
PlatformIconButton(),
],
material: (_, __) => MaterialAppBarData(...),
cupertino: (_, __) => CupertinoNavigationBarData(...),
);PlatformNavBarThe NavBar is placed at the bottom of the page with a set of buttons that typically navigate between screens. Implementing this widget requires the parent widget to manage the return PlatformNavBar(
currentIndex: _selectedTabIndex,
itemChanged: (index) => setState(
() {
_selectedTabIndex = index;
},
),
items: [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
],
);EnhanceExtend with return PlatformNavBar(
currentIndex: _selectedTabIndex,
itemChanged: (index) => setState(
() {
_selectedTabIndex = index;
},
),
items: [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
],
material: (_, __) => MaterialNavBarData(...),
cupertino: (_, __) => CupertinoTabBarData(...),
);PlatformPopupMenuThe PlatformPopupMenu will render a using a return PlatformPopupMenu(
options: [
PopupMenuOption(label: 'One', onTap: _navToPageOne),
PopupMenuOption(label: 'Two', onTap: _navToPageTwo),
PopupMenuOption(label: 'Three', onTap: _navToPageThree)
],
icon: Icon(
context.platformIcon(
material: Icons.more_vert_rounded,
cupertino: CupertinoIcons.ellipsis,
),
),
);EnhanceExtend with return PlatformPopupMenu(
options: [
PopupMenuOption(label: 'One', onTap: _navToPageOne),
PopupMenuOption(label: 'Two', onTap: _navToPageTwo),
PopupMenuOption(label: 'Three', onTap: _navToPageThree)
],
icon: Icon(
context.platformIcon(
material: Icons.more_vert_rounded,
cupertino: CupertinoIcons.ellipsis,
),
),
material: (_, __) => MaterialPopupMenuData(...),
cupertino: (_, __) => CupertinoPopupMenuData(...),
);PlatformAlertDialogThe AlertDialog will render a caption/title, body/text and a set of action buttons specific for the platform. Uses
showPlatformDialog(
context: context,
builder: (_) => PlatformAlertDialog(
title: Text('Alert'),
content: Text('Some content'),
actions: <Widget>[
PlatformDialogAction(),
PlatformDialogAction(),
],
),
);EnhanceExtend with showDialog(
context: context,
builder: (_) => PlatformAlertDialog(...),
cupertino: (_, __) => CupertinoAlertDialogData(...),
material: (_, __) => MaterialAlertDialogData(...),
)PlatformDialogActionThe DialogAction widget is used to describe the set of buttons on the AlertDialog. Uses PlatformDialogAction(
child: PlatformText('Cancel'),
onPressed: () => Navigator.pop(context),
),EnhanceExtend with PlatformDialogAction(
child: PlatformText('Cancel'),
onPressed: () => Navigator.pop(context),
material: (_, __) => MaterialDialogActionData(...),
cupertino: (_, __) => CupertinoDialogActionData(...),
),PlatformCircularProgressIndicatorA circular looking progress indicator. Uses return PlatformCircularProgressIndicator();EnhanceExtend with return PlatformCircularProgressIndicator(
material: (_, __) => MaterialProgressIndicatorData(...),
cupertino: (_, __) => CupertinoProgressIndicatorData(...),
);PlatformPageRouteThis function can be used within the Navigator.push(
context,
platformPageRoute(
context: context,
builder: pageToDisplayBuilder,
),
);EnhanceExtend with return platformPageRoute(
context: context,
material: (_, __) => MaterialPageRouteData(...),
cupertino: (_, __) => CupertinoPageRouteData(...),
); |
