Flutter通用功能插件horizech_flutter_common的使用
Flutter通用功能插件horizech_flutter_common的使用
简介
horizech_flutter_common
是一个为Horizech公司应用程序提供通用主题和其他元素的Flutter库。该库包含了一些预定义的主题和样式,可以方便地在多个项目中复用。
功能特性
- 包含了Horizech公司所有应用中常用的主题和其他元素。
- 提供了多种预定义的主题,如
theme2024Dark
,可以直接在应用程序中使用。
快速开始
该插件适用于使用 flutter_up
包构建的应用程序。因此,在设置项目时,请确保遵循 flutter_up
的文档说明。
使用示例
以下是一个完整的示例代码,展示了如何在Flutter项目中使用 horizech_flutter_common
插件。这个示例包括了一个主应用程序类 MyApp
和一个简单的主页 HomePage
。
import 'package:flutter/material.dart';
import 'package:flutter_up/config/up_config.dart';
import 'package:flutter_up/models/up_route.dart';
import 'package:flutter_up/models/up_router_state.dart';
import 'package:flutter_up/up_app.dart';
import 'package:flutter_up/widgets/up_text.dart';
import 'package:horizech_flutter_common/horizech_flutter_common.dart';
/// 主应用程序类,可以在 main.dart 中使用
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
/// MyApp 的状态类
class _MyAppState extends State<MyApp> {
[@override](/user/override)
Widget build(BuildContext context) {
return UpApp(
// 使用 horizech_flutter_common 提供的 dark 主题
theme: HorizechCommon().themes.theme2024Dark,
// 设置初始路由为 '/home'
initialRoute: '/home',
// 定义路由表
upRoutes: [
UpRoute(
path: '/home',
pageBuilder: (BuildContext context, UpRouterState state) =>
const HomePage(), // 路由到主页
)
],
title: 'ThemeApp', // 应用程序标题
);
}
}
/// 一个简单的主页
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
[@override](/user/override)
State<HomePage> createState() => _HomePageState();
}
/// HomePage 的状态类
class _HomePageState extends State<HomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// 使用 UpConfig 获取当前主题的基色
color: UpConfig.of(context).theme.baseColor,
child: const UpText("Horizech Dark Theme"), // 显示文本
),
);
}
}
更多关于Flutter通用功能插件horizech_flutter_common的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复