Flutter插件argo的介绍与使用方法

Flutter插件argo简介

Argo 是一个用于创建响应式应用的 Flutter 插件，支持手机、平板和网页。它通过处理可见性、方向和屏幕大小来实现不同布局。

特别感谢：

1. filledstacks
2. Codelessly
3. GskinnerTeam

Flutter插件argo快速开始

导入库

在你的项目中导入 Argo 库：

dependencies:
  argo: ^latest_version

使用 ResponsiveWrapper

在 MaterialApp 或 CupertinoApp 中添加 ResponsiveWrapper：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveWrapper(
        wrapConfig: WrapperConfig(
          globalBreakpoints: ScreenBreakpoints(
            mobile: 321,
            tablet: 650,
            desktop: 1100,
          ),
        ),
        child: Home(),
      ),
    );
  }
}

或者使用 ResponsiveWrapper.builder：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveWrapper.builder(
        wrapConfig: WrapperConfig(
          globalBreakpoints: ScreenBreakpoints(
            mobile: 321,
            tablet: 650,
            desktop: 1100,
          ),
        ),
        builder: (ctx, themeDataRule) => child!,
      ),
      home: Home(),
    );
  }
}

屏幕断点

ScreenBreakpoints 是告诉 ResponsiveWrapper 更改 DeviceScreen 的控制点。这些断点取决于宽度。

ScreenBreakpoints(
  mobile: 321,
  tablet: 650,
  desktop: 1100,
)

响应式小部件

ResponsiveVisibility

根据条件显示或隐藏子组件：

ResponsiveVisibility.screen(
  conditionScreen: ConditionScreen(
    mobile: true,
    tablet: true,
    desktop: false,
  ),
  child: Container(
    color: Colors.red,
    width: 50,
    height: 50
  ),
),

ResponsiveLayoutWidget

根据屏幕类型显示不同的小部件：

ResponsiveLayoutWidget(
  mobile: MobileChild(),
  tablet: TabletChild(),
  desktop: DesktopChild(),
)

ResponsiveBuilder

返回当前上下文和 ResponsiveInformation：

ResponsiveBuilder(
  builder: (ctx, info) { 
    if(info.localSize.width > 300 && info.deviceScreen.isTablet()){
      return Container(
                color: Colors.red,
                width: 50,
                height: 50
              );
    }else{
      return const SizedBox();
    }
  }
)

OrientationLayoutBuilder

根据方向构建视图：

OrientationLayoutBuilder(
  portrait: (ctx, info) => PortraitChild(),
  landscape: (ctx, info) => LandscapeChild(),
)

工具

valueFromConditionByBreakpoints

从 ConditionBreakpoint 列表获取单个值：

const List<ConditionBreakpoint<bool>> conditions = [
  ConditionBreakpoint<bool>.equals(
    screenType: DeviceScreen.mobile,
    value: true,
  ),
  ConditionBreakpoint<bool>.smallerThan(
    screenType: DeviceScreen.desktop,
    value: true,
  ),
  ConditionBreakpoint<bool>.equals(
    screenType: DeviceScreen.tablet,
    value: false,
  ),
  ConditionBreakpoint<bool>.largerThan(
    value: true,
    breakpoint: 950,
  ),
];

final value = valueFromConditionByBreakpoints<bool>(
  context: context,
  condition: conditions,
  localBreakpoints: screenBreakpoints,
  defaultValue: true,
);

valueFromConditionByScreen

从 ConditionScreen 获取单个值：

const condition = ConditionScreen(
  mobile: 'Apple',
  tablet: 'Orange',
  desktop: 'Watermelon',
);

final value = valueFromConditionByScreen<String>(
  context: context,
  condition: condition,
  localBreakpoints: screenBreakpoints,
  defaultValue: 'Lemon',
);

ResponsiveContext 扩展

从上下文中获取信息以简化响应式应用开发：

context.widthPx = 返回与 MediaQuery.of(context).size.width 相同的值
context.heightPx = 返回与 MediaQuery.of(context).size.height 相同的值
context.theme = 获取主题
context.widthPct(10) = 返回屏幕宽度的百分比（1-100）像素
...

响应式主题

处理响应式主题信息的数据类：

ResponsiveTheme.screen(
   conditionScreen: ConditionScreen(
     mobile: MyThemesApp(),
     tablet: MyThemesTablet(),
     desktop: MyThemesWeb(),
   ),
 )

示例配置：

class MyThemesApp with IThemeDataRule {
  @override
  ThemeData getThemeByRule({ThemeRule rule = ThemeRule.light}) {
    switch (rule) {
      case ThemeRule.light:
        return lightTheme;
      case ThemeRule.dark:
        return darkTheme;
      case ThemeRule.custom:
        return darkerTheme;
      default:
        return lightTheme;
    }
  }
}

// 这是一个正常的对象，表示 Light 主题
final ThemeData lightTheme = ThemeData(
    primaryColor: Colors.blueGrey,
    brightness: Brightness.light,
    textTheme: TextTheme(
      headline1: headline1.copyWith(fontSize: 26),
      headline2: headline2.copyWith(fontSize: 18),
    ),
  );

示例

1. ArgoExample: Argo 库的基本用法示例
2. ThemingExample: 基本的响应式主题示例
3. BaseLandingPage: 待完成

维护者

• James Cardona

欢迎贡献 :3

待办事项

• 改进测试
• 改进文档
• 添加全局日志（进行中）

许可证

MIT 许可证

MIT License
Copyright (c) 2021 James Cardona

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.