В этой статье блога мы погрузимся в мир горизонтальных гистограмм во Flutter. Мы рассмотрим различные методы и предоставим примеры кода, которые помогут вам создавать потрясающие однополосные горизонтальные гистограммы. Независимо от того, являетесь ли вы новичком или опытным разработчиком Flutter, это руководство предоставит вам знания и инструменты для реализации горизонтальных гистограмм в ваших приложениях Flutter.

Методы:

Метод 1: использование пакета fl_chart
Пакет fl_chart — это мощный инструмент для создания различных типов диаграмм во Flutter. Вот пример того, как создать горизонтальную гистограмму с одним столбцом с помощью этого пакета:

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class SingleBarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: BarChart(
        BarChartData(
          alignment: BarChartAlignment.spaceAround,
          maxY: 20,
          barTouchData: BarTouchData(enabled: false),
          titlesData: FlTitlesData(
            show: true,
            bottomTitles: SideTitles(
              showTitles: false,
            ),
            leftTitles: SideTitles(
              showTitles: true,
              interval: 5,
              margin: 10,
            ),
          ),
          borderData: FlBorderData(
            show: false,
          ),
          barGroups: [
            BarChartGroupData(
              x: 0,
              barRods: [
                BarChartRodData(
                  y: 15,
                  color: Colors.blue,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Метод 2: пользовательское рисование
Другой подход — использовать возможности пользовательского рисования Flutter для рисования горизонтальной гистограммы. Вот пример:

import 'package:flutter/material.dart';
class SingleBarChart extends StatelessWidget {
  final double barHeight;
  final double barWidth;
  final Color barColor;
  SingleBarChart({
    required this.barHeight,
    required this.barWidth,
    required this.barColor,
  });
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: barHeight,
      width: barWidth,
      child: CustomPaint(
        painter: BarChartPainter(barColor),
      ),
    );
  }
}
class BarChartPainter extends CustomPainter {
  final Color barColor;
  BarChartPainter(this.barColor);
  @override
  void paint(Canvas canvas, Size size) {
    final barRect = Rect.fromLTRB(0, 0, size.width, size.height);
    final paint = Paint()..color = barColor;
    canvas.drawRect(barRect, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Метод 3: использование других библиотек диаграмм
Помимо пакета fl_chart, во Flutter доступны другие библиотеки диаграмм, такие какcharts_flutter и syncfusion_flutter_charts. Эти библиотеки предлагают широкий спектр типов диаграмм, включая горизонтальные гистограммы. Вы можете изучить их документацию и примеры для реализации однополосных горизонтальных гистограмм во Flutter.