Scribd
Upload
31 views3 pages

FL Bar Chart Screen - Dart

This document defines a BarChartWidget class that displays a bar chart. It initializes a list of DataModel objects with key-value pairs for the chart data. In the build method, it renders the bar chart using the Flutter FLChart package, setting properties like the chart data, colors, grid, and titles. It includes methods to generate the bar chart groups from the data list and customize the bottom titles.

Uploaded by

Belayali Belayali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views3 pages

FL Bar Chart Screen - Dart

This document defines a BarChartWidget class that displays a bar chart. It initializes a list of DataModel objects with key-value pairs for the chart data. In the build method, it renders the bar chart using the Flutter FLChart package, setting properties like the chart data, colors, grid, and titles. It includes methods to generate the bar chart groups from the data list and customize the bottom titles.

Uploaded by

Belayali Belayali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import 'package:flutter/material.

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

import 'data_model.dart';

class BarChartWidget extends StatefulWidget {


@override
State<BarChartWidget> createState() => _BarChartWidgetState();
}

class _BarChartWidgetState extends State<BarChartWidget> {


List<DataModel> _list = List<DataModel>.empty(growable: true);

@override
void initState() {
super.initState();
_list.add(DataModel(key: "0", value: "2"));
_list.add(DataModel(key: "1", value: "4"));
_list.add(DataModel(key: "2", value: "6"));
_list.add(DataModel(key: "3", value: "8"));
_list.add(DataModel(key: "4", value: "10"));
_list.add(DataModel(key: "5", value: "8"));
_list.add(DataModel(key: "6", value: "4"));
}

@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: Container(
color: Colors.white,
height: 100,
width: 200,
),
flex: 2),
Expanded(child: Container(
color: Colors.white,
height: 100,
width: 200,
child: BarChart(
BarChartData(
backgroundColor: Colors.white,
barGroups: _chartGroups(),
borderData: FlBorderData(
border: const Border(bottom: BorderSide(), left:
BorderSide())),
gridData: FlGridData(show: false),
titlesData: FlTitlesData(
bottomTitles: AxisTitles(sideTitles: _bottomTitles),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
getTitlesWidget: (value, meta) {
return Text(
value.toString(),
style: const TextStyle(fontSize: 10),
);
},
)),
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles:
false)),
),
),
),
),
flex: 2),
],
),
);
}

List<BarChartGroupData> _chartGroups() {
List<BarChartGroupData> list =
List<BarChartGroupData>.empty(growable: true);
for (int i = 0; i < _list.length; i++) {
list.add(BarChartGroupData(x: i, barRods: [
BarChartRodData(
toY: double.parse(_list[i].value!), color: Colors.deepOrange)
]));
}
return list;
}

SideTitles get _bottomTitles => SideTitles(


showTitles: true,
getTitlesWidget: (value, meta) {
String text = '';
switch (value.toInt()) {
case 0:
text = 'Mon';
break;
case 1:
text = 'Tue';
break;
case 2:
text = 'Wed';
break;
case 3:
text = 'Thu';
break;
case 4:
text = 'Fri';
break;
case 5:
text = 'Sat';
break;
case 6:
text = 'Sun';
break;
}
return Text(
text,
style: TextStyle(fontSize: 10),
);
},
);
}
class DataModel {
String? key;
String? value;

DataModel({this.key, this.value});

DataModel.fromJson(Map<String, dynamic> json) {


key = json['key'];
value = json['value'];
}

Map<String, dynamic> toJson() {


final Map<String, dynamic> data = new Map<String, dynamic>();
data['key'] = this.key;
data['value'] = this.value;
return data;
}
}

You might also like