Flutter数据可视化插件google_bard的使用

Flutter数据可视化插件google_bard的使用

在本教程中，我们将展示如何使用 google_bard 插件来实现 Flutter 应用中的数据可视化。首先，确保你已经在 pubspec.yaml 文件中添加了 google_bard 依赖。

dependencies:
  google_bard: ^版本号

接下来，我们创建一个简单的 Flutter 应用程序，该应用程序使用 google_bard 来绘制图表。

示例代码

首先，我们需要创建一个简单的数据模型类 TaskEntity，用于存储任务信息。

// lib/models/task_entity.dart
import 'package:json_annotation/json_annotation.dart';

part 'task_entity.g.dart';

@JsonSerializable()
class TaskEntity {
  TaskEntity({
    required this.sale,
    required this.title,
    required this.price,
    required this.rate,
    required this.image,
  });

  String sale;
  String title;
  String price;
  int rate;
  String image;

  factory TaskEntity.fromJson(Map<String, dynamic> json) => _$TaskEntityFromJson(json);
  Map<String, dynamic> toJson() => _$TaskEntityToJson(this);
}

然后，我们在主应用中使用 google_bard 绘制一个简单的柱状图。

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_bard/google_bard.dart'; // 导入google_bard包
import 'models/task_entity.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(
      title: 'Flutter Bard Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  late List<TaskEntity> tasks;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化任务列表
    tasks = [
      TaskEntity(
        sale: 'Sale',
        title: 'Cashmere Carpenter Beanie',
        price: '80.000',
        rate: 5,
        image: 'https://graphicriver.img.customer.envatousercontent.com/files/251467394/DOTO-1255-Product-Sale-Sliders-Design_Main-Preview.jpg?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=d307e5c2ec56602c9332aeb7d1a35882',
      ),
      TaskEntity(
        sale: 'Sale',
        title: 'Another Product',
        price: '100.000',
        rate: 4,
        image: 'https://example.com/image.jpg', // 替换为实际图像URL
      ),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bard Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BardChart(
          data: tasks.map((task) => [task.title, task.rate]).toList(),
          xTitle: '产品名称',
          yTitle: '评分',
          title: '产品评分统计',
          barWidth: 0.5,
        ),
      ),
    );
  }
}