Flutter插件zerom的介绍与使用

Flutter插件zerom的介绍与使用

zerom 插件为 Flutter 应用提供了多种便捷的功能扩展，包括 Context Extension、Zerom Button、Zerom Input 和 Padding Extension 等。这些功能可以帮助开发者编写更简洁、高效的代码。

Context Extension

Context Extension 可以让你利用 context 的力量来更好地编写代码。通过扩展 BuildContext 类，你可以轻松地获取动态高度和宽度等信息。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      height: context.dynamicHeight(0.1),
      width: context.dynamicWidth(0.5),
      color: context.colorScheme.onBackground,
      child: Text("extension", style: context.theme.textTheme.titleLarge),
    ),
  );
}

Zerom Button

Zerom Button 允许你更方便地配置按钮的使用。它简化了按钮的创建过程，并可以设置点击事件。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: ZeromButton(
      title: "Zerom Button",
      onTap: () {
        print("object");
      },
    ),
  );
}

Zerom Input

Zerom Input 可以让你更方便地配置输入框的使用。例如，密码输入框可以通过简单的配置来实现。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: ZeromPasswordInput(
      width: context.dynamicWidth(0.6),
      height: context.dynamicHeight(0.06),
      iconColor: Colors.black,
      labelText: "Password",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      fillColor: Colors.lightGreenAccent,
    ),
  );
}

Padding Extension

Padding Extension 提供了各种预定义的内边距配置，使得布局更加灵活和方便。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      padding: context.paddingAlowHorizontalHrd,
      color: context.colorScheme.onBackground,
      child: Text("extension", style: context.theme.textTheme.titleLarge),
    ),
  );
}

Navigation Extension

Navigation Extension 可以让你通过 context 更方便地进行页面导航。next 方法用于跳转到新的页面，而 back 方法则用于返回上一个页面。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        TextButton(
          onPressed: () {
            context.next(const RouteExample());
          },
          child: const Text("Next Page"),
        ),
        TextButton(
          onPressed: () {
            context.back();
          },
          child: const Text("Zerom"),
        ),
      ],
    ),
  );
}

完整示例 Demo

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 zerom 插件。

import 'package:example/route.dart';
import 'package:flutter/material.dart';
import 'package:zerom/zerom.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Zerom',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Zerom'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                context.next(const RouteExample());
              },
              child: const Text("Zerom"),
            ),
            Container(
              padding: context.paddinglow,
              width: context.dynamicWidth(0.1),
              height: context.dynamicHeight(0.1),
              color: Colors.amber,
              child: Text(
                "Zerom",
                style: context.theme.textTheme.bodyLarge,
              ),
            ),
            const SizedBox(height: 20),
            ZeromButton(
              title: "Button",
              childApproval: false,
              onTap: () {
                print("object");
              },
              width: context.dynamicWidth(0.4),
              height: context.dynamicHeight(0.1),
            ),
            const SizedBox(height: 20),
            ZeromPasswordInput(
              width: context.dynamicWidth(0.6),
              height: context.dynamicHeight(0.06),
              iconColor: Colors.black,
              labelText: "Password",
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              fillColor: Colors.lightGreenAccent,
            ),
          ],
        ),
      ),
    );
  }
}