-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#11 new (pie)chart to display Nutrition information for a day, an exa…
…mple to complete
- Loading branch information
1 parent
775c50e
commit 06dd9f0
Showing
3 changed files
with
203 additions
and
1 deletion.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class Indicator extends StatelessWidget { | ||
| final Color color; | ||
| final String text; | ||
| final bool isSquare; | ||
| final double size; | ||
| final Color textColor; | ||
|
|
||
| const Indicator({ | ||
| Key? key, | ||
| required this.color, | ||
| required this.text, | ||
| required this.isSquare, | ||
| this.size = 16, | ||
| this.textColor = const Color(0xff505050), | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Row( | ||
| children: <Widget>[ | ||
| Container( | ||
| width: size, | ||
| height: size, | ||
| decoration: BoxDecoration( | ||
| shape: isSquare ? BoxShape.rectangle : BoxShape.circle, | ||
| color: color, | ||
| ), | ||
| ), | ||
| const SizedBox( | ||
| width: 4, | ||
| ), | ||
| Text( | ||
| text, | ||
| style: TextStyle( | ||
| fontSize: 16, fontWeight: FontWeight.bold, color: textColor), | ||
| ) | ||
| ], | ||
| ); | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import 'dart:math'; | ||
|
|
||
| import 'package:flutter/material.dart'; | ||
| import 'package:fl_chart/fl_chart.dart'; | ||
| import 'package:flutter/gestures.dart'; | ||
| import 'indicator.dart'; | ||
|
|
||
| class Statistics2 extends StatefulWidget { | ||
| @override | ||
| _StatisticsState2 createState() => _StatisticsState2(); | ||
| } | ||
|
|
||
| class _StatisticsState2 extends State<Statistics2> { | ||
| int touchedIndex = -1; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return AspectRatio( | ||
| aspectRatio: 1.3, | ||
| child: Card( | ||
| color: Colors.white, | ||
| child: Row( | ||
| children: <Widget>[ | ||
| const SizedBox( | ||
| height: 18, | ||
| ), | ||
| Expanded( | ||
| child: AspectRatio( | ||
| aspectRatio: 1, | ||
| child: PieChart( | ||
| PieChartData( | ||
| pieTouchData: | ||
| PieTouchData(touchCallback: (pieTouchResponse) { | ||
| setState(() { | ||
| final desiredTouch = pieTouchResponse.touchInput | ||
| is! PointerExitEvent && | ||
| pieTouchResponse.touchInput is! PointerUpEvent; | ||
| if (desiredTouch && | ||
| pieTouchResponse.touchedSection != null) { | ||
| touchedIndex = pieTouchResponse | ||
| .touchedSection!.touchedSectionIndex; | ||
| } else { | ||
| touchedIndex = -1; | ||
| } | ||
| }); | ||
| }), | ||
| borderData: FlBorderData( | ||
| show: false, | ||
| ), | ||
| sectionsSpace: 0, | ||
| centerSpaceRadius: 40, | ||
| sections: showingSections()), | ||
| ), | ||
| ), | ||
| ), | ||
| Column( | ||
| mainAxisSize: MainAxisSize.max, | ||
| mainAxisAlignment: MainAxisAlignment.end, | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: const <Widget>[ | ||
| Indicator( | ||
| color: Color(0xff0293ee), | ||
| text: 'First', | ||
| isSquare: true, | ||
| ), | ||
| SizedBox( | ||
| height: 4, | ||
| ), | ||
| Indicator( | ||
| color: Color(0xfff8b250), | ||
| text: 'Second', | ||
| isSquare: true, | ||
| ), | ||
| SizedBox( | ||
| height: 4, | ||
| ), | ||
| Indicator( | ||
| color: Color(0xff845bef), | ||
| text: 'Third', | ||
| isSquare: true, | ||
| ), | ||
| SizedBox( | ||
| height: 4, | ||
| ), | ||
| Indicator( | ||
| color: Color(0xff13d38e), | ||
| text: 'Fourth', | ||
| isSquare: true, | ||
| ), | ||
| SizedBox( | ||
| height: 18, | ||
| ), | ||
| ], | ||
| ), | ||
| const SizedBox( | ||
| width: 28, | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| List<PieChartSectionData> showingSections() { | ||
| return List.generate(4, (i) { | ||
| final isTouched = i == touchedIndex; | ||
| final fontSize = isTouched ? 25.0 : 16.0; | ||
| final radius = isTouched ? 60.0 : 50.0; | ||
| switch (i) { | ||
| case 0: | ||
| return PieChartSectionData( | ||
| color: const Color(0xff0293ee), | ||
| value: 40, | ||
| title: '40%', | ||
| radius: radius, | ||
| titleStyle: TextStyle( | ||
| fontSize: fontSize, | ||
| fontWeight: FontWeight.bold, | ||
| color: const Color(0xffffffff)), | ||
| ); | ||
| case 1: | ||
| return PieChartSectionData( | ||
| color: const Color(0xfff8b250), | ||
| value: 30, | ||
| title: '30%', | ||
| radius: radius, | ||
| titleStyle: TextStyle( | ||
| fontSize: fontSize, | ||
| fontWeight: FontWeight.bold, | ||
| color: const Color(0xffffffff)), | ||
| ); | ||
| case 2: | ||
| return PieChartSectionData( | ||
| color: const Color(0xff845bef), | ||
| value: 15, | ||
| title: '15%', | ||
| radius: radius, | ||
| titleStyle: TextStyle( | ||
| fontSize: fontSize, | ||
| fontWeight: FontWeight.bold, | ||
| color: const Color(0xffffffff)), | ||
| ); | ||
| case 3: | ||
| return PieChartSectionData( | ||
| color: const Color(0xff13d38e), | ||
| value: 15, | ||
| title: '15%', | ||
| radius: radius, | ||
| titleStyle: TextStyle( | ||
| fontSize: fontSize, | ||
| fontWeight: FontWeight.bold, | ||
| color: const Color(0xffffffff)), | ||
| ); | ||
| default: | ||
| throw Error(); | ||
| } | ||
| }); | ||
| } | ||
| } |