Merge pull request #457 from imaNNeoFighT/feature/side-title-customiz…

…able-text-style Feature/side title customizable text style, #439
imaNNeo · Sep 25, 2020 · 0399440 · 0399440
2 parents d41461b + ff51a9b
commit 0399440
Show file tree

Hide file tree

Showing 21 changed files with 151 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## new version
-[Improvement] [BREAKING] Replaced `color` property with `colors` in [BarChartRodData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#barchartroddata), and [BackgroundBarChartRodData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#backgroundbarchartroddata) to support gradient in BarChart, instead of solid color, #166. Check [BarChartSample3](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#sample-3-source-code)
-[Improvement] Improved gradient stops calculating algorithm.
+* [Improvement] [BREAKING] Replaced `color` property with `colors` in [BarChartRodData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#barchartroddata), and [BackgroundBarChartRodData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#backgroundbarchartroddata) to support gradient in BarChart, instead of solid color, #166. Check [BarChartSample3](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/bar_chart.md#sample-3-source-code)
+* [Improvement] Improved gradient stops calculating algorithm.
+* [Improvement] [BREAKING] Changed SideTitle's `textStyle` property to `getTextStyles` getter (it gives you the axis value, and you must return a TextStyle based on it), It helps you to have a different style for specific text, #439. Check it here [LineChartSample3](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#sample-3-source-code)
 
 ## 0.11.1
 * [Bugfix] Fixed drawing BarChart rods with providing minY (for positive), maxY (for negative) values bug, #404.

diff --git a/example/lib/bar_chart/samples/bar_chart_sample1.dart b/example/lib/bar_chart/samples/bar_chart_sample1.dart
@@ -195,7 +195,8 @@ class BarChartSample1State extends State<BarChartSample1> {
         show: true,
         bottomTitles: SideTitles(
           showTitles: true,
-          textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14),
+          getTextStyles: (value) =>
+              const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14),
           margin: 16,
           getTitles: (double value) {
             switch (value.toInt()) {
@@ -238,7 +239,8 @@ class BarChartSample1State extends State<BarChartSample1> {
         show: true,
         bottomTitles: SideTitles(
           showTitles: true,
-          textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14),
+          getTextStyles: (value) =>
+              const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14),
           margin: 16,
           getTitles: (double value) {
             switch (value.toInt()) {

diff --git a/example/lib/bar_chart/samples/bar_chart_sample2.dart b/example/lib/bar_chart/samples/bar_chart_sample2.dart
@@ -134,10 +134,8 @@ class BarChartSample2State extends State<BarChartSample2> {
                         show: true,
                         bottomTitles: SideTitles(
                           showTitles: true,
-                          textStyle: TextStyle(
-                              color: const Color(0xff7589a2),
-                              fontWeight: FontWeight.bold,
-                              fontSize: 14),
+                          getTextStyles: (value) => const TextStyle(
+                              color: Color(0xff7589a2), fontWeight: FontWeight.bold, fontSize: 14),
                           margin: 20,
                           getTitles: (double value) {
                             switch (value.toInt()) {
@@ -162,10 +160,8 @@ class BarChartSample2State extends State<BarChartSample2> {
                         ),
                         leftTitles: SideTitles(
                           showTitles: true,
-                          textStyle: TextStyle(
-                              color: const Color(0xff7589a2),
-                              fontWeight: FontWeight.bold,
-                              fontSize: 14),
+                          getTextStyles: (value) => const TextStyle(
+                              color: Color(0xff7589a2), fontWeight: FontWeight.bold, fontSize: 14),
                           margin: 32,
                           reservedSize: 14,
                           getTitles: (value) {

diff --git a/example/lib/bar_chart/samples/bar_chart_sample3.dart b/example/lib/bar_chart/samples/bar_chart_sample3.dart
@@ -45,8 +45,8 @@ class BarChartSample3State extends State<BarChartSample3> {
               show: true,
               bottomTitles: SideTitles(
                 showTitles: true,
-                textStyle: TextStyle(
-                    color: const Color(0xff7589a2), fontWeight: FontWeight.bold, fontSize: 14),
+                getTextStyles: (value) => const TextStyle(
+                    color: Color(0xff7589a2), fontWeight: FontWeight.bold, fontSize: 14),
                 margin: 20,
                 getTitles: (double value) {
                   switch (value.toInt()) {

diff --git a/example/lib/bar_chart/samples/bar_chart_sample4.dart b/example/lib/bar_chart/samples/bar_chart_sample4.dart
@@ -31,7 +31,7 @@ class BarChartSample4State extends State<BarChartSample4> {
                 show: true,
                 bottomTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(color: Color(0xff939393), fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Color(0xff939393), fontSize: 10),
                   margin: 10,
                   getTitles: (double value) {
                     switch (value.toInt()) {
@@ -52,7 +52,7 @@ class BarChartSample4State extends State<BarChartSample4> {
                 ),
                 leftTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(
+                  getTextStyles: (value) => const TextStyle(
                       color: Color(
                         0xff939393,
                       ),

diff --git a/example/lib/bar_chart/samples/bar_chart_sample5.dart b/example/lib/bar_chart/samples/bar_chart_sample5.dart
@@ -37,7 +37,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 show: true,
                 topTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Colors.white, fontSize: 10),
                   margin: 10,
                   rotateAngle: 0,
                   getTitles: (double value) {
@@ -63,7 +63,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 ),
                 bottomTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Colors.white, fontSize: 10),
                   margin: 10,
                   rotateAngle: 0,
                   getTitles: (double value) {
@@ -89,7 +89,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 ),
                 leftTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Colors.white, fontSize: 10),
                   rotateAngle: 45,
                   getTitles: (double value) {
                     if (value == 0) {
@@ -103,7 +103,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 ),
                 rightTitles: SideTitles(
                   showTitles: true,
-                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Colors.white, fontSize: 10),
                   rotateAngle: 90,
                   getTitles: (double value) {
                     if (value == 0) {

diff --git a/example/lib/line_chart/samples/line_chart_sample1.dart b/example/lib/line_chart/samples/line_chart_sample1.dart
@@ -20,10 +20,10 @@ class LineChartSample1State extends State<LineChartSample1> {
     return AspectRatio(
       aspectRatio: 1.23,
       child: Container(
-        decoration: BoxDecoration(
-          borderRadius: const BorderRadius.all(Radius.circular(18)),
+        decoration: const BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(18)),
           gradient: LinearGradient(
-            colors: const [
+            colors: [
               Color(0xff2c274c),
               Color(0xff46426c),
             ],
@@ -109,7 +109,7 @@ class LineChartSample1State extends State<LineChartSample1> {
         bottomTitles: SideTitles(
           showTitles: true,
           reservedSize: 22,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff72719b),
             fontWeight: FontWeight.bold,
             fontSize: 16,
@@ -129,7 +129,7 @@ class LineChartSample1State extends State<LineChartSample1> {
         ),
         leftTitles: SideTitles(
           showTitles: true,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff75729e),
             fontWeight: FontWeight.bold,
             fontSize: 14,
@@ -263,7 +263,7 @@ class LineChartSample1State extends State<LineChartSample1> {
         bottomTitles: SideTitles(
           showTitles: true,
           reservedSize: 22,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff72719b),
             fontWeight: FontWeight.bold,
             fontSize: 16,
@@ -283,7 +283,7 @@ class LineChartSample1State extends State<LineChartSample1> {
         ),
         leftTitles: SideTitles(
           showTitles: true,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff75729e),
             fontWeight: FontWeight.bold,
             fontSize: 14,

diff --git a/example/lib/line_chart/samples/line_chart_sample2.dart b/example/lib/line_chart/samples/line_chart_sample2.dart
@@ -77,7 +77,7 @@ class _LineChartSample2State extends State<LineChartSample2> {
         bottomTitles: SideTitles(
           showTitles: true,
           reservedSize: 22,
-          textStyle:
+          getTextStyles: (value) =>
               const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
           getTitles: (value) {
             switch (value.toInt()) {
@@ -94,7 +94,7 @@ class _LineChartSample2State extends State<LineChartSample2> {
         ),
         leftTitles: SideTitles(
           showTitles: true,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff67727d),
             fontWeight: FontWeight.bold,
             fontSize: 15,
@@ -171,7 +171,7 @@ class _LineChartSample2State extends State<LineChartSample2> {
         bottomTitles: SideTitles(
           showTitles: true,
           reservedSize: 22,
-          textStyle:
+          getTextStyles: (value) =>
               const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
           getTitles: (value) {
             switch (value.toInt()) {
@@ -188,7 +188,7 @@ class _LineChartSample2State extends State<LineChartSample2> {
         ),
         leftTitles: SideTitles(
           showTitles: true,
-          textStyle: const TextStyle(
+          getTextStyles: (value) => const TextStyle(
             color: Color(0xff67727d),
             fontWeight: FontWeight.bold,
             fontSize: 15,

diff --git a/example/lib/line_chart/samples/line_chart_sample3.dart b/example/lib/line_chart/samples/line_chart_sample3.dart
@@ -1,26 +1,23 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
-class LineChartSample3 extends StatelessWidget {
-  final weekDays = [
-    'Sat',
-    'Sun',
-    'Mon',
-    'Tue',
-    'Wed',
-    'Thu',
-    'Fri',
-  ];
+class LineChartSample3 extends StatefulWidget {
+  final weekDays = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
 
-  final List<double> yValues = [
-    1.3,
-    1,
-    1.8,
-    1.5,
-    2.2,
-    1.8,
-    3,
-  ];
+  final List<double> yValues = [1.3, 1, 1.8, 1.5, 2.2, 1.8, 3];
+
+  @override
+  State createState() => _LineChartSample3State();
+}
+
+class _LineChartSample3State extends State<LineChartSample3> {
+  double touchedValue;
+
+  @override
+  void initState() {
+    touchedValue = -1;
+    super.initState();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -93,11 +90,33 @@ class LineChartSample3 extends StatelessWidget {
                           }
 
                           return LineTooltipItem(
-                            '${weekDays[flSpot.x.toInt()]} \n${flSpot.y} k calories',
+                            '${widget.weekDays[flSpot.x.toInt()]} \n${flSpot.y} k calories',
                             const TextStyle(color: Colors.white),
                           );
                         }).toList();
-                      })),
+                      }),
+                  touchCallback: (LineTouchResponse lineTouch) {
+                    if (lineTouch.lineBarSpots.length == 1 &&
+                        lineTouch.touchInput is! FlLongPressEnd &&
+                        lineTouch.touchInput is! FlPanEnd) {
+                      final value = lineTouch.lineBarSpots[0].x;
+
+                      if (value == 0 || value == 6) {
+                        setState(() {
+                          touchedValue = -1;
+                        });
+                        return null;
+                      }
+
+                      setState(() {
+                        touchedValue = value;
+                      });
+                    } else {
+                      setState(() {
+                        touchedValue = -1;
+                      });
+                    }
+                  }),
               extraLinesData: ExtraLinesData(horizontalLines: [
                 HorizontalLine(
                   y: 1.8,
@@ -109,7 +128,7 @@ class LineChartSample3 extends StatelessWidget {
               lineBarsData: [
                 LineChartBarData(
                   isStepLineChart: true,
-                  spots: yValues.asMap().entries.map((e) {
+                  spots: widget.yValues.asMap().entries.map((e) {
                     return FlSpot(e.key.toDouble(), e.value);
                   }).toList(),
                   isCurved: false,
@@ -200,6 +219,7 @@ class LineChartSample3 extends StatelessWidget {
                 show: true,
                 leftTitles: SideTitles(
                   showTitles: true,
+                  reservedSize: 30,
                   getTitles: (value) {
                     switch (value.toInt()) {
                       case 0:
@@ -214,17 +234,20 @@ class LineChartSample3 extends StatelessWidget {
 
                     return '';
                   },
-                  textStyle: const TextStyle(color: Colors.black, fontSize: 10),
+                  getTextStyles: (value) => const TextStyle(color: Colors.black, fontSize: 10),
                 ),
                 bottomTitles: SideTitles(
                   showTitles: true,
                   getTitles: (value) {
-                    return weekDays[value.toInt()];
+                    return widget.weekDays[value.toInt()];
+                  },
+                  getTextStyles: (value) {
+                    final isTouched = value == touchedValue;
+                    return TextStyle(
+                      color: isTouched ? Colors.deepOrange : Colors.deepOrange.withOpacity(0.5),
+                      fontWeight: FontWeight.bold,
+                    );
                   },
-                  textStyle: const TextStyle(
-                    color: Colors.deepOrange,
-                    fontWeight: FontWeight.bold,
-                  ),
                 ),
               ),
             ),

diff --git a/example/lib/line_chart/samples/line_chart_sample4.dart b/example/lib/line_chart/samples/line_chart_sample4.dart
@@ -57,7 +57,7 @@ class LineChartSample4 extends StatelessWidget {
             bottomTitles: SideTitles(
                 showTitles: true,
                 reservedSize: 14,
-                textStyle: dateTextStyle,
+                getTextStyles: (value) => dateTextStyle,
                 getTitles: (value) {
                   switch (value.toInt()) {
                     case 0:

diff --git a/example/lib/line_chart/samples/line_chart_sample5.dart b/example/lib/line_chart/samples/line_chart_sample5.dart
@@ -119,12 +119,12 @@ class LineChartSample5 extends StatelessWidget {
                   }
                   return '';
                 },
-                textStyle: TextStyle(
-                  fontWeight: FontWeight.bold,
-                  color: Colors.blueGrey,
-                  fontFamily: 'Digital',
-                  fontSize: 18,
-                )),
+                getTextStyles: (value) => const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: Colors.blueGrey,
+                      fontFamily: 'Digital',
+                      fontSize: 18,
+                    )),
           ),
           axisTitleData: FlAxisTitleData(
             rightTitle: AxisTitle(showTitle: true, titleText: 'count'),

diff --git a/example/lib/line_chart/samples/line_chart_sample6.dart b/example/lib/line_chart/samples/line_chart_sample6.dart
@@ -126,7 +126,7 @@ class LineChartSample6 extends StatelessWidget {
 
                       return intValue.toString();
                     },
-                    textStyle: const TextStyle(
+                    getTextStyles: (value) => const TextStyle(
                         color: Colors.deepOrange, fontWeight: FontWeight.bold, fontSize: 18),
                     margin: 16,
                   ),
@@ -142,7 +142,7 @@ class LineChartSample6 extends StatelessWidget {
 
                       return intValue.toString();
                     },
-                    textStyle: const TextStyle(
+                    getTextStyles: (value) => const TextStyle(
                         color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 18),
                     margin: 16,
                   ),
@@ -151,7 +151,8 @@ class LineChartSample6 extends StatelessWidget {
                     showTitles: true,
                     reservedSize: 28,
                     margin: 8,
-                    textStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
+                    getTextStyles: (value) =>
+                        const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
                     getTitles: (double value) {
                       return value.toInt().toString();
                     },

diff --git a/example/lib/line_chart/samples/line_chart_sample7.dart b/example/lib/line_chart/samples/line_chart_sample7.dart
@@ -95,8 +95,8 @@ class LineChartSample7 extends StatelessWidget {
           titlesData: FlTitlesData(
             bottomTitles: SideTitles(
                 showTitles: true,
-                textStyle:
-                    TextStyle(fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
+                getTextStyles: (value) => const TextStyle(
+                    fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
                 getTitles: (value) {
                   switch (value.toInt()) {
                     case 0: