Высшая школа электроники и компьютерных наук

3.8. 
Реализация страницы статистики расходов по категориям 
Страница диаграммы расходов по категориям (рис. 19) содержит в 
себе круговую диаграмму (chart) и функциональную кнопку (IconButton), 
где пользователю предлагается выбрать граничные даты исследуемого вре-
менного диапазона (_initialFirstDate, _initialLastDate) с помощью функции 
showDatePicker класса DateRagePicker.
Scaffold( 
backgroundColor: Colors.white, 
appBar: AppBar(title: Text('Расходы'), actions: [ 
IconButton( 
icon: Icon(Icons.date_range), 
onPressed: () async { 
DateTime date = DateTime.now(); 
DateTime _initialFirstDate = 
new DateTime(date.year, date.month, 1); 
DateTime _initialLastDate = 
new DateTime(date.year, date.month + 1, 0); 
List picked = await DateRagePicker.showDatePicker( 
context: context, 
initialFirstDate: _initialFirstDate, 
initialLastDate: _initialLastDate, 
firstDate: new DateTime(2018), 
lastDate: new DateTime(DateTime.now().year + 1)); 
if (picked != null && picked.length == 2) { 
print(picked); 
setDate(_initialFirstDate, _initialLastDate); 
} 
}, 
) 
]), 
body: chart, 
);
Рис. 19. Фрагмент реализации страницы статистики расходов пользователя 

---

39 
Ниже представлена реализация диаграммы расходов и список катего-
рий и затрат пользователя по ним (Рис. 20). Объект chart реализуется с по-
мощью библиотеки charts_flutter [10] и содержит список series. 
var series = [ 
charts.Series( 
colorFn: (Spendings sales, _) => sales.color, 
domainFn: (Spendings sales, _) => sales.name, 
measureFn: (Spendings sales, _) => sales.sum, 
id: 'Sales', 
data: categoryList, 
labelAccessorFn: (Spendings sales, _) => 
'${sales.name}: ${sales.sum.toString()}') 
]; 
var chart = charts.PieChart( 
series, 
defaultRenderer: charts.ArcRendererConfig( 
arcRendererDecorators: [charts.ArcLabelDecorator()]), 
);
Рис 20. Фрагмент реализации объекта диаграммы и его составляющих 
Библиотека chart предоставляет различные форматы отображения ин-
формации графически. Был выбран вариант круговой диаграммы как самый 
наглядный для пользователя: соотнесение долей круга как части суммы всех 
расходов. 
Итогом является реализованное приложение, соответствующее про-
ектным требованиям с использованием выбранных технологий. 

---

40