Flutter Trello集成插件trello_card的使用

Flutter Trello集成插件trello_card的使用

该插件用于创建带有附件的Trello卡片。

示例代码

example/lib/main.dart

import 'package:feedback/feedback.dart'; // 引入反馈库
import 'package:flutter/material.dart'; // 引入Flutter核心库
import 'package:trello_card/trello_card.dart'; // 引入Trello插件

void main() {
  runApp(const MyApp()); // 运行主应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 构造函数

  // 主应用构建方法
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BetterFeedback( // 使用BetterFeedback插件
      child: MaterialApp(
        title: 'Flutter Demo', // 应用标题
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 颜色方案
          useMaterial3: true, // 使用Material Design 3
        ),
        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() {
    BetterFeedback.of(context).show((UserFeedback feedback) { // 显示反馈对话框
      final trelloList = TrelloList(
        idList: '******', // Trello列表ID
        token: '****', // Trello访问令牌
        key: "*****", // Trello API密钥
      );
      trelloList
          .createNewCard( // 创建新卡片
            name: "Bug", // 卡片名称
            description: feedback.text, // 卡片描述
            file: feedback.screenshot, // 卡片截图
          )
          .then((value) { // 处理创建结果
            ScaffoldMessenger.of(context).showSnackBar( // 显示消息提示
              SnackBar(
                content: Text(value ? 'Card created' : 'Failed to create card'), // 消息内容
              ),
            );
          });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 设置AppBar背景颜色
        title: Text(widget.title), // 设置AppBar标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
          children: [
            const Text('你已经点击了按钮次数：'), // 文本组件
            Text('$_counter', style: Theme.of(context).textTheme.headlineMedium), // 数字显示组件
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 浮动按钮
        onPressed: _incrementCounter, // 按钮点击事件
        tooltip: 'Increment', // 悬停提示
        child: const Icon(Icons.add), // 图标
      ),
    );
  }
}

更多关于Flutter Trello集成插件trello_card的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Trello集成插件trello_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成Trello可以使用trello_card插件。这个插件允许你在Flutter应用中与Trello的API进行交互，比如获取卡片、列表、面板等信息，或者创建新的卡片等操作。

以下是如何在Flutter项目中使用trello_card插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  trello_card: ^1.0.0  # 请使用最新版本

然后运行flutter pub get来安装依赖。

2. 获取Trello API密钥和Token

要使用Trello API，你需要一个API密钥和一个Token。你可以通过以下步骤获取它们：

  1. 登录到你的Trello账户。
  2. 访问 Trello API Key 页面获取你的API密钥。
  3. 在同一个页面上，点击“Token”链接生成一个Token。

3. 初始化Trello客户端

在你的Flutter应用中，初始化Trello客户端：

import 'package:trello_card/trello_card.dart';

void main() {
  TrelloCard.init(
    apiKey: 'YOUR_TRELLO_API_KEY',
    token: 'YOUR_TRELLO_TOKEN',
  );
  runApp(MyApp());
}

4. 使用Trello API

现在你可以使用trello_card插件提供的各种方法来与Trello API进行交互。以下是一些常见的操作示例：

获取当前用户的信息

Future<void> fetchUserInfo() async {
  try {
    var user = await TrelloCard.getMemberInfo();
    print('User: ${user.fullName}');
  } catch (e) {
    print('Error: $e');
  }
}

获取所有面板

Future<void> fetchBoards() async {
  try {
    var boards = await TrelloCard.getBoards();
    for (var board in boards) {
      print('Board: ${board.name}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

获取面板中的列表

Future<void> fetchLists(String boardId) async {
  try {
    var lists = await TrelloCard.getLists(boardId);
    for (var list in lists) {
      print('List: ${list.name}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

创建新卡片

Future<void> createCard(String listId, String cardName) async {
  try {
    var card = await TrelloCard.createCard(
      listId: listId,
      name: cardName,
    );
    print('Card created: ${card.name}');
  } catch (e) {
    print('Error: $e');
  }
}

5. 处理错误

在使用Trello API时，可能会遇到各种错误，比如网络问题、权限问题等。确保在调用API时使用try-catch块来处理可能的异常。

6. 示例应用

以下是一个简单的Flutter应用示例，展示了如何使用trello_card插件获取并显示当前用户的Trello面板：

import 'package:flutter/material.dart';
import 'package:trello_card/trello_card.dart';

void main() {
  TrelloCard.init(
    apiKey: 'YOUR_TRELLO_API_KEY',
    token: 'YOUR_TRELLO_TOKEN',
  );
  runApp(TrelloApp());
}

class TrelloApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TrelloHomePage(),
    );
  }
}

class TrelloHomePage extends StatefulWidget {
  [@override](/user/override)
  _TrelloHomePageState createState() => _TrelloHomePageState();
}

class _TrelloHomePageState extends State<TrelloHomePage> {
  List<Board> boards = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    fetchBoards();
  }

  Future<void> fetchBoards() async {
    try {
      var fetchedBoards = await TrelloCard.getBoards();
      setState(() {
        boards = fetchedBoards;
      });
    } catch (e) {
      print('Error: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Trello Boards'),
      ),
      body: ListView.builder(
        itemCount: boards.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(boards[index].name),
          );
        },
      ),
    );
  }
}
回到顶部