Flutter插件hello_dart_monady的介绍与使用

Flutter插件hello_dart_monady的介绍与使用

Flutter插件hello_dart_monady简介

这篇文章记录了我在pub.dev上发布的第一个包的部署过程。在这个过程中，我尝试使用了一个名为hello_dart_monady的插件，并展示了如何在Flutter应用中使用它。

完整示例Demo

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

// example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:hello_dart_monady/hello_dart.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试一下：运行你的应用（使用"flutter run"）。你会看到应用有一个紫色的工具栏。
        // 不要退出应用，尝试将颜色方案中的seedColor更改为Colors.green，
        // 然后触发热重载（保存更改或按下IDE中的"热重载"按钮，或者在命令行中输入"r"）。
        //
        // 注意计数器并没有重置回零；应用的状态在重载期间不会丢失。
        // 要重置状态，可以使用热重启。
        //
        // 对于代码也是一样的，不仅仅是值：大多数代码更改都可以通过简单的热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个包含影响外观字段的状态对象。
  //
  // 这个类是状态的配置。它持有由父组件（这里是App小部件）提供的值（在这个例子中是标题）
  // 并且被构建方法使用。小部件中的字段总是标记为"final"。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _counter = ""; // 计数器字符串

  Hello hello = Hello(); // 初始化Hello对象

  void _incrementCounter() {
    setState(() {
      // 调用setState告诉Flutter框架某些东西已经改变，
      // 从而导致重新运行构建方法以反映更新后的值。
      // 如果我们不调用setState而直接更改_counter，则构建方法不会再次被调用，
      // 因此什么也不会发生。
      _counter = hello.greet(); // 使用插件中的greet方法获取问候语
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，
    // 例如在上面的_incrementCounter方法中。
    //
    // Flutter框架已优化为使重新运行构建方法变得快速，
    // 所以你可以重建任何需要更新的小部件，而不是单独更改各个小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试一下：将此处的颜色更改为特定颜色（例如Colors.amber）并触发热重载，
        // 以查看工具栏颜色变化，同时其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 从MyHomePage对象中获取值，
        // 并将其用于设置appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其放置在父元素的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并垂直排列它们。
          // 默认情况下，它水平地调整自己的大小以适应其子元素，
          // 并尝试与父元素一样高。
          //
          // Column有许多属性来控制其自身的大小和子元素的位置。
          // 在这里我们使用mainAxisAlignment将子元素垂直居中；
          // 主轴在这里是垂直的，因为Columns是垂直的（交叉轴将是水平的）。
          //
          // 尝试一下：启用调试绘制（在IDE中选择"切换调试绘制"操作，或按控制台中的"p"键），
          // 以查看每个小部件的线框图。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮很多次：',
            ),
            Text(
              '$_counter', // 显示计数器结果
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 设置点击事件
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}