Flutter实战 -- fl_chart(条形图)

1-引入依赖

fl_chart: ^0.35.0  # 折线图

2-条形图具体实现

条形图

代码:

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
            height: 200,
            width:230,
            margin: EdgeInsets.only(top: 20),
            padding: const EdgeInsets.all(30),
            child: BarChart(
              BarChartData(
                alignment: BarChartAlignment.spaceAround,// 柱状图的对齐方式
                maxY:10,//Y轴的最大值
                // 点击可出现提示框
                barTouchData: BarTouchData(
                  enabled: true,
                  // 修改提示框的样式和展示文字
                  touchTooltipData: BarTouchTooltipData(
                     tooltipBgColor:const Color.fromRGBO(255, 237, 142, 1),// 设置弹出框的背景色