Last active
December 24, 2021 13:51
-
-
Save KrzysztofLen/90727cd5cbc7250b5aa3ec4b9a80f9b0 to your computer and use it in GitHub Desktop.
This is the source code of the tutorial post: https://fun4code.com/custom-flutter-bar-chart/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:samples/progress_bar/progress_bar.dart'; | |
import 'package:samples/withcher_chart/witcher_chart.dart'; | |
void main() => runApp(const MyApp()); | |
class MyApp extends StatelessWidget { | |
const MyApp({Key? key}) : super(key: key); | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
body: SafeArea( | |
child: Column( | |
children: <Widget>[ | |
const Text( | |
'The Witcher bar chart', | |
style: TextStyle( | |
fontFamily: 'thewitcher', | |
fontSize: 18, | |
), | |
), | |
WitcherChart.withSampleData(), | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:charts_flutter/flutter.dart'; | |
class BarData { | |
final int coins; | |
final int monster; | |
const BarData(this.coins, this.monster); | |
} | |
class WitcherChart extends StatelessWidget { | |
final List<Series<dynamic, String>> seriesList; | |
const WitcherChart(this.seriesList, {Key? key}) : super(key: key); | |
factory WitcherChart.withSampleData() => WitcherChart(_createSampleData()); | |
static final data = <BarData>[ | |
const BarData(1, 11), | |
const BarData(2, 14), | |
const BarData(3, 8), | |
const BarData(4, 10), | |
const BarData(5, 15), | |
const BarData(6, 1), | |
const BarData(7, 9), | |
const BarData(8, 9), | |
const BarData(8, 3), | |
const BarData(10, 12), | |
const BarData(11, 18), | |
const BarData(12, 8), | |
const BarData(13, 3), | |
const BarData(14, 4), | |
const BarData(15, 10), | |
const BarData(16, 12), | |
const BarData(17, 10), | |
const BarData(18, 8), | |
const BarData(19, 15), | |
const BarData(20, 12), | |
]; | |
static List<Series<BarData, String>> _createSampleData() { | |
final highestValue = | |
data.reduce((curr, next) => curr.monster > next.monster ? curr : next); | |
final smallestValue = | |
data.reduce((curr, next) => curr.monster < next.monster ? curr : next); | |
return [ | |
Series( | |
id: 'Data', | |
data: data, | |
domainFn: (BarData data, _) => data.coins.toString(), | |
measureFn: (BarData data, _) => data.monster, | |
colorFn: (data, _) { | |
if (data.monster == highestValue.monster) { | |
return Color.fromHex(code: '#2d3561'); | |
} | |
if (data.monster == smallestValue.monster) { | |
return Color.fromHex(code: '#ff0000'); | |
} | |
return Color.fromHex(code: '#af0404'); | |
}, | |
), | |
]; | |
} | |
static final yStaticLabels = <TickSpec<int>>[ | |
// Possible to define style of labels directly inside | |
const TickSpec( | |
5, | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
), | |
), | |
const TickSpec( | |
10, | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
), | |
), | |
const TickSpec( | |
15, | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
), | |
), | |
TickSpec( | |
20, | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
color: ColorUtil.fromDartColor(Colors.greenAccent), | |
), | |
), | |
]; | |
static final xStaticLabels = <TickSpec<String>>[ | |
// Possible to define style of labels directly inside | |
const TickSpec( | |
"1", | |
label: "1 monster", | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
), | |
), | |
const TickSpec( | |
"10", | |
label: "10 monsters", | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
), | |
), | |
TickSpec( | |
"20", | |
label: "20 monsters", | |
style: TextStyleSpec( | |
fontFamily: 'thewitcher', | |
color: ColorUtil.fromDartColor(Colors.orangeAccent), | |
), | |
), | |
]; | |
@override | |
Widget build(BuildContext context) { | |
return Padding( | |
padding: const EdgeInsets.all(15.0), | |
child: SizedBox( | |
height: 200, | |
child: BarChart( | |
seriesList, | |
animate: true, | |
defaultRenderer: BarRendererConfig( | |
cornerStrategy: const ConstCornerStrategy(7), | |
), | |
primaryMeasureAxis: NumericAxisSpec( | |
tickFormatterSpec: BasicNumericTickFormatterSpec( | |
(num? value) => "$value \u{1F4B0}"), | |
tickProviderSpec: StaticNumericTickProviderSpec(yStaticLabels), | |
renderSpec: GridlineRendererSpec( | |
labelStyle: TextStyleSpec( | |
fontSize: 14, | |
color: Color.fromHex(code: '#f8b739'), | |
), | |
labelAnchor: TickLabelAnchor.after, | |
), | |
), | |
domainAxis: OrdinalAxisSpec( | |
tickProviderSpec: StaticOrdinalTickProviderSpec(xStaticLabels), | |
renderSpec: SmallTickRendererSpec( | |
labelStyle: TextStyleSpec( | |
lineHeight: 3, | |
fontSize: 12, | |
color: Color.fromHex(code: '#4d80e4'), | |
), | |
lineStyle: const LineStyleSpec( | |
color: Color.transparent, | |
), | |
), | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment