Чтобы создать горизонтальную гистограмму с одной полосой во Flutter, вы можете использовать несколько методов. Вот несколько примеров:
Метод 1: использование пакета charts_flutter
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class SingleBarChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SingleBarChart(this.seriesList, {this.animate});
factory SingleBarChart.withSampleData() {
return SingleBarChart(
_createSampleData(),
animate: true,
);
}
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('Category 1', 5),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.category,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
),
];
}
@override
Widget build(BuildContext context) {
return charts.BarChart(
seriesList,
animate: animate,
);
}
}
class OrdinalSales {
final String category;
final int sales;
OrdinalSales(this.category, this.sales);
}
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Single Bar Chart'),
),
body: Center(
child: SingleBarChart.withSampleData(),
),
),
),
);
}
Метод 2: использование пакета flutter_charts
import 'package:flutter/material.dart';
import 'package:flutter_charts/flutter_charts.dart';
class SingleBarChart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Single Bar Chart'),
),
body: Center(
child: BarChart(
data: [
[5],
],
maxValue: 10,
barColors: [Colors.blue],
xLabels: ['Category 1'],
yLabels: [0, 5, 10],
chartTitle: 'Sales',
chartTitlePadding: 30,
showLegend: false,
barWidth: 40,
showChartValue: true,
),
),
);
}
}
void main() {
runApp(
MaterialApp(
home: SingleBarChart(),
),
);
}