logo

实现一套代码,2种模式,ios使用Cupertino风格组件,andriod、fuchsia使用Material风格组件

English

当前只针对Cupertino模式进行了测试,Material组件相对比较完善了,后期也会补上Material模式的测试。

基础类

  • BaseStatelessWidget

    继承于StatelessWidget,用于构建无状态组件

    子类必须实现 buildByCupertino、buildByMaterial 方法,分别用于构建2种模式

  • BaseStatefulWidget

    继承于StatefulWidget,用于构建状态组件

    子类的State类必须继承 BaseState 类并实现 buildByCupertino、buildByMaterial 方法,分别用于构建2种模式

  • BaseClass

    普通基础类,用于构建普通类

    子类必须实现 buildByCupertino、buildByMaterial 方法分别用于构建2种模式

  • basePlatform 参数

    当前构建的平台,默认为 defaultTargetPlatform

    使用 setPlatform(TargetPlatform targetPlatform) 方法修改平台

    推荐使用 BaseApp(targetPlatform: TargetPlatform...) 设置平台

    默认 TargetPlatform.iOS 使用 Cupertino 构建, TargetPlatform.androidTargetPlatform.fuchsia 使用 Material 构建

Features

  • useCupertino, useMaterial 使用这2个方法可以判断当前使用的模式,进行差异化构建。

  • 每个基础组件都含有 Map<String, dynamic> cupertino, Map<String, dynamic> material 2个参数,用于组件模式差异化设置,2种模式有公共参数的,会优先取当前模式下的值,再取公共值,如:

    BaseIcon(
      // materil模式下先取material参数里的icon参数,取不到再取该值
      icon: Icons.info,
      cupertino: <String, dynamic>{
        // cupertino模式下先取该值,因为取得到,所以不会取外层的icon
        'icon': CupertinoIcons.info,
      }
    );
    

    cupertino模式下使用的是CupertinoIcons.info,material模式下使用的是Icons.info

    features_demo
  • 可以使用 forceUseMaterial, forceUseCupertino 进行强制切换模式构建,使用 disabled 禁止构建(会用 Container() 代替)

    cupertino: {
      // 可使该组件强制使用Material构建
      forceUseMaterial: true,
      // 可使该组件不进行构建,但会使用Container()代替
      disabled: true,
    }
    material: {
      // 可使该组件强制使用Cupertino构建
      forceUseCupertino: true,
      // 可使该组件不进行构建,但会使用Container()代替
      disabled: true,
    }
    
  • 特别说明,非常重要

    forceUseMaterial, forceUseCupertino 参数未经严格测试,请慎用!慎用!慎用!

    很多material组件是需要有Material祖先的,在Cupertino模式下设置forceUseMaterial: true时,会默认套上一层Material,且默认会去除水波纹效果,此时BaseApp上的cupertinoTheme参数是不生效的,可能会出现样式混乱等不可预知的bug,所以请慎用,后续可能会删除这2个参数

    如果要切换模式,强烈建议直接设置BaseApp's targetPlatform参数

组件列表

组件Material组件Cupertino组件
BaseActionSheetcustom BottomSheetCupertinoActionSheet
BaseActionSheetActionFlatButtonCupertinoActionSheetAction
BaseAppMaterialAppCupertinoApp
BaseAppBarAppBarCupertinoNavigationBar
BaseButtonMaterialButton
FlatButton, FlatButton.icon
OutlineButton, OutlineButton.icon
RaisedButton, RaiseButton.icon
CupertinoButton, CupertinoButton.filled
BaseIconButtonIconButtonCupertinoButton
BaseAlertDialogAlertDialogCupertinoAlertDialog
BaseDialogActionFlatButtonCupertinoDialogAction
BaseIconIconIcon
BaseIndicatorCircularProgressIndicatorCupertinoActivityIndicator
BaseRefreshRefreshIndicatorCustomScrollView + CupertinoSliverRefreshControl
BaseScaffoldScaffoldCupertinoPageScaffold
BaseTabScaffoldScaffoldCupertinoTabScaffold
BaseScrollBarScrollBarCupertinoScrollBar
BaseSectioncustom Containercustom Container
BaseTileListTilecustom InkWell without splash
BaseSliderSliderCupertinoSlider
BaseSwitchSwitchCupertinoSwitch
BaseBarItemBottomNavigationBarItemBottomNavigationBarItem
BaseTabBarBottomNavigationBarCupertinoTabBar
BaseTextFieldTextFieldCupertinoTextField

简单示例

Libraries

app_bar
base
One code, two mode, use cupertino's widgets on ios, use material's widget on android or fuchsia.
base_action_sheet
base_action_sheet_action
base_alert_dialog
base_app
base_app_bar
base_bar_item
base_button
base_class
base_constants
base_dialog_action
base_general_dialog
base_icon
base_icon_button
base_indicator
base_mixin
base_refresh
base_route
base_scaffold
base_scroll_bar
base_section
base_slider
base_stateful_widget
base_stateless_widget
base_switch
base_tab_bar
base_tab_scaffold
base_text_field
base_tile
base_utils
bottom_navigation_bar
bottom_navigation_bar_item
bottom_tab_bar
color_utils
custom_material_widget
flutter_modify
modify from flutter
platform
tab_scaffold