Flutter看板组件插件kanbancast_components的使用

Kanbancast Components 是一个嵌入式的路线图小部件，带有投票功能，适用于Flutter应用程序。它允许用户建议功能、为功能投票并评论潜在的功能，从而创建一种互动且协作的产品开发体验。

开始使用

以下是将 Kanbancast 组件 集成到您的 Flutter 项目中的步骤：

1. 获取 API 密钥：

   • 在 Kanbancast.com 上创建一个项目。
   • 在项目设置中获取项目的 API 密钥。

2. 在项目中添加 kanbancast_components 包：

   使用以下命令将包添加到您的项目中：

   $ flutter pub add kanbancast_components
   

   这将在您的 pubspec.yaml 文件中添加如下依赖项，并运行隐式的 flutter pub get：

   dependencies:
     kanbancast_components: ^0.0.4
   

   或者，您可以手动编辑 pubspec.yaml 文件，然后运行 flutter pub get。

3. 在 Dart 代码中导入包：

   import 'package:kanbancast_components/kanbancast_components.dart';
   

4. 在 widget 树中使用 BoardView 组件：

   BoardView(
     projectId: 1, // 替换为您自己的项目 ID
     apiKey: 'your_api_key_here', // 替换为您自己的 API 密钥
     containerColor: Colors.black, // 可选：自定义容器颜色
   )
   

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 kanbancast_components 包。

import 'package:flutter/material.dart';
import 'package:kanbancast_components/board_view.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(
        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});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 调用 setState 告诉 Flutter 框架某些内容发生了变化，
      // 这会触发重新构建方法以更新 UI。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行此方法。
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 BoardView 组件
            BoardView(
              apiKey: 'etyFey1KzEfw', // 替换为您自己的 API 密钥
              containerColor: Colors.black, // 自定义容器颜色
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 浮动按钮
    );
  }
}