Flutter智能应用集成插件smart_app的使用

Flutter智能应用集成插件smart_app的使用

在本教程中，我们将详细介绍如何使用 smart_app 插件来快速开发多平台应用。此插件提供了许多实用功能，如页面管理、响应式文本样式、自定义外观设置等。

功能

• 页面管理：方便地管理应用的不同页面。
• 响应式文本样式（针对移动设备）：避免重复编写文本样式。
• 自定义外观设置：调整应用的背景色、文字颜色等。
• 可调节的自定义设置：例如字体大小、图标大小等。
• 支持多语言：可以定义多种语言的文本和列表项。
• 运行函数以检测网络连接状态变化：当网络连接状态改变时，自动触发相应函数。

预定义的文本样式类型

"xS", "S", "M", "L", "xL", "mega", "giga"

外观包含的变量

// 背景颜色
// 文字颜色
// 提示颜色
// 按钮颜色
// 按钮文字颜色
// 辅助背景颜色
// 辅助文字颜色
// 辅助提示颜色
// 辅助按钮颜色
// 辅助按钮文字颜色
// 应用栏背景颜色
// 应用栏文字颜色
// 应用栏提示颜色
// 应用栏按钮颜色
// 应用栏按钮文字颜色
// 抽屉背景颜色
// 抽屉文字颜色
// 抽屉提示颜色
// 抽屉按钮颜色
// 抽屉按钮文字颜色
// 对话框背景颜色
// 对话框文字颜色
// 对话框提示颜色
// 对话框按钮颜色
// 对话框按钮文字颜色

预定义的设置

// 语言
// 设备类型（桌面/移动）
// 网络连接状态

开始使用

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  smart_app: ^latest

然后运行以下命令获取依赖：

flutter packages get

示例项目

在 example 文件夹中有一个详细的示例项目，可以直接运行并开始工作。以下是部分代码片段：

基础设置

在 main() 函数中调用 SmartApp.setup() 方法：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  AppPages appPages = AppPages(pages: {
    "page1": const Page1(),
    "page2": const Page2(),
    "settings": const Settings(),
    "login": const LoginPage(),
    "widgets": const Widgets(),
  }, initPage: "widgets");

  AppLanguages languages =
      AppLanguages(languages: ["English","Turkish"], initLanguge: "English");

  AppAppearances appearances = AppAppearances(appearances: [
    Appearance.dark(),
    Appearance.light(),
  ], initAppearance: Appearance.dark());

  SmartApp.setup(
      pages: appPages, languages: languages, appearances: appearances);

  runApp(const MyApp());
}

在每个 StatefulWidget 的 initState() 中设置监听器：

@override
void initState() {
  SmartApp.appSettings.listenState(this);
  super.initState();
}

设置应用大小：

bool setSizesAsStatic = true;

@override
Widget build(BuildContext context) {
  SmartApp.appFonts.init(context, staticSize: setSizesAsStatic);

  return Scaffold(
    backgroundColor: SmartApp.appColors.backGroundColor,
    body: SmartPage(),
  );
}

页面管理

定义你的页面：

AppPages appPages = AppPages(pages: {
  "page1": const Page1(),
  "page2": const Page2(),
  "settings": const Settings(),
  "login": const LoginPage(),
}, initPage: "page1");

将这些页面设置到 setup 函数中：

SmartApp.setup(pages: appPages);

或者通过 setAppPages 方法设置：

SmartApp.setAppPages(appPages);

设置应用字体

在构建 Scaffold 时初始化字体：

bool setSizesAsStatic = true;

@override
Widget build(BuildContext context) {
  SmartApp.appFonts.init(context, staticSize: setSizesAsStatic);

  return Scaffold(
    backgroundColor: SmartApp.appColors.backGroundColor,
    body: SmartPage(),
  );
}

改变页面

有两种方法切换页面：

• 通过 BuildContext：

context.go(name: "page1"); // 提供目标页面的名称

• 通过 PageState：

SmartApp.pageState.go(name: "page1"); // 提供目标页面的名称

自定义字体大小

// 如果你希望动态字体大小或图标大小，将此值设为 false
bool setSizesAsStatic = true;

@override
Widget build(BuildContext context) {
  SmartApp.appFonts.init(context, staticSize: setSizesAsStatic);

  return Scaffold();
}

获取预定义字体大小

Text(
  "Hello",
  style: SmartApp.appFonts.L(
    isBold: true,
    color: SmartApp.appColors.textColor,
    fontWeight: FontWeight.normal),
),

获取应用尺寸

double app_width = SmartApp.appFonts.appWidth;
double app_height = SmartApp.appFonts.appHeight;
double app_totalSize = SmartApp.appFonts.totalSize;

设置外观

定义外观：

AppAppearances appearances = AppAppearances(appearances: [
  Appearance.dark(),
  Appearance.light(),
], initAppearance: Appearance.dark());

将这些外观设置到 setup 函数中：

SmartApp.setup(appearances: appearances);

或者通过 setAppAppearances 方法设置：

SmartApp.setAppAppearances(appearances);

自定义语言

定义语言：

AppLanguages languages = AppLanguages(languages: ["English","Turkish"], initLanguge: "English");
SmartApp.setup(languages: languages);

检测网络连接状态

设置网络连接状态变化的回调函数：

SmartApp.appSettings.onConnectionChange = (status) {
  print("Connection status has changed");
};

获取当前网络连接状态：

bool connected = SmartApp.appSettings.connected!;

使用SmartText

管理多语言文本：

Text(
  SmartText(["Page", "Sayfa"]).text,
  style: appFonts.giga(),
)

自定义功能

自定义字体：

double size = 20;
String name = "middle";
SmartApp.appFonts.addSpecificSize(name: name, size: size);
// 然后获取特定字体和大小
double size = SmartApp.appFonts.specificSize("middle");
TextStyle specific = SmartApp.appFonts.specific(specificType: "middle");

自定义设置：

bool variable = false;
SmartApp.appSettings.addSpecificVariable(variable: variable, name: "leftMenuOpened");
SmartApp.appSettings.addSpecificSetting(
    function: () {
      SmartApp.appSettings.specificVariables["leftMenuOpened"] =
          !SmartApp.appSettings.specificVariables["leftMenuOpened"];
    },
    name: "changeLeftMenuStatus");