Как визуализировать данные в Flutter с помощью fl_chart и Back4App

введение визуализация данных является важным аспектом современных приложений, помогая пользователям понимать сложные данные через интуитивно понятные графики и диаграммы в этом учебном пособии вы научитесь создавать интерактивные и визуально привлекательные диаграммы в вашем приложении flutter с использованием пакета fl chart кроме того, вы интегрируете back4app — платформу backend as a service (baas), работающую на parse server — для хранения и извлечения данных для ваших диаграмм к концу этого учебного пособия у вас будет полностью функциональное приложение flutter, которое отображает динамические данные, полученные из back4app, с использованием различных типов диаграмм, таких как линейные, столбчатые и круговые диаграммы предварительные требования чтобы завершить это учебное пособие, вам потребуется аккаунт back4app если у вас его нет, вы можете зарегистрироваться для получения бесплатного аккаунта на back4app https //www back4app com/ установленный flutter sdk вы можете следовать официальному руководству по установке flutter https //flutter dev/docs/get started/install для вашей операционной системы базовые знания dart и flutter если вы новичок в flutter, рассмотрите возможность изучения документации flutter https //flutter dev/docs , чтобы ознакомиться с основами sdk parse server для flutter добавлен в ваш проект вы можете узнать, как его настроить, следуя руководству по sdk flutter от back4app https //www back4app com/docs/flutter/parse flutter sdk ide или текстовый редактор такие как visual studio code или android studio шаг 1 – настройка бэкенда back4app на этом этапе вы создадите новое приложение back4app и настроите класс данных для хранения данных вашего графика 1 1 создание нового приложения back4app войдите в ваш панель управления back4app https //dashboard back4app com/ нажмите на "создать новое приложение" введите имя для вашего приложения, например, "flutterchartapp" , и нажмите "создать" 1 2 настройка модели данных в вашей панели управления приложением перейдите в раздел "база данных" в левом боковом меню нажмите на "создать класс" в верхней части страницы в появившемся модальном окне выберите "пользовательский" введите "salesdata" в качестве имени класса нажмите "создать класс" 1 3 добавление столбцов в класс в классе "salesdata" нажмите на "+" для добавления нового столбца добавьте следующие столбцы месяц тип строка продажи тип число ваша модель данных теперь настроена для хранения данных о продажах за месяц, которые вы будете визуализировать в своем приложении flutter шаг 2 – заполнение базы данных образцовыми данными перед тем как получить данные в вашем приложении, вам нужны образцовые данные в вашей базе данных back4app все еще в классе "salesdata" нажмите на "+" для добавления новой строки введите следующие образцовые данные повторите вышеуказанные шаги, чтобы добавить все записи образцовых данных шаг 3 – настройка проекта flutter на этом этапе вы создадите новый проект flutter и добавите необходимые зависимости 3 1 создание нового проекта flutter откройте терминал и выполните flutter create flutter chart app перейдите в каталог проекта cd flutter chart app 3 2 добавление зависимостей в pubspec yaml откройте pubspec yaml и добавьте следующие зависимости dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 запустите flutter pub get для установки пакетов шаг 4 – инициализация parse в вашем приложении flutter чтобы подключить ваше приложение flutter к back4app, вам нужно инициализировать sdk parse 4 1 получите учетные данные приложения back4app в вашей панели управления back4app перейдите в "настройки приложения" > "безопасность и ключи" запишите ваш id приложения и ключ клиента 4 2 инициализируйте parse в main dart откройте lib/main dart и измените его следующим образом import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } замените 'your application id' и 'your client key' на учетные данные, которые вы получили от back4app шаг 5 – получение данных из back4app на этом этапе вы получите данные о продажах из back4app, используя parse sdk 5 1 создайте home page dart создайте новый файл lib/home page dart и добавьте следующий код import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } объяснение класс salesdata простая модель класса для хранения данных о месяце и продажах fetchsalesdata() извлекает данные из класса salesdata в back4app и обновляет список chartdata linechart использует fl chart , чтобы создать линейный график на основе извлеченных данных bottomtitlewidgets() настраивает метки нижней оси для отображения сокращений месяцев шаг 6 – запуск приложения теперь, когда вы настроили фронтенд и бэкенд, пришло время запустить ваше приложение в вашем терминале перейдите в каталог вашего проекта запустите приложение с помощью flutter run вы должны увидеть линейный график, отображающий данные о продажах за каждый месяц шаг 7 – добавление интерактивности и настройки чтобы сделать ваш график более интерактивным и визуально привлекательным, вы можете дополнительно настроить его 7 1 настройка внешнего вида графика измените linechartbardata в вашем build методе linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata добавляет заполненную область под линией dotdata показывает точки на каждом значении данных 7 2 включить взаимодействие с сенсорным экраном вы можете включить взаимодействие с сенсорным экраном для отображения подсказок добавьте следующее в ваш linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), шаг 8 – отображение различных типов диаграмм вы также можете отображать другие типы диаграмм, используя fl chart 8 1 пример круговой диаграммы замените linechart в вашем build методе на piechart piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata определяет каждый раздел круговой диаграммы заключение в этом уроке вы узнали, как использовать пакет fl chart для визуализации данных в вашем приложении flutter вы интегрировали back4app в качестве решения для бэкенда для хранения и извлечения данных с помощью parse sdk получая данные из back4app и отображая их с помощью различных типов диаграмм, вы теперь можете создавать динамические и интерактивные визуализации данных в ваших приложениях flutter чтобы еще больше улучшить ваше приложение, рассмотрите возможность изучения других типов диаграмм, предоставляемых fl chart , таких как столбчатые диаграммы и радиальные диаграммы вы также можете реализовать обновления данных в реальном времени, интегрировав live queries от back4app дополнительные ресурсы документация back4app https //www back4app com/docs пакет fl chart на pub dev https //pub dev/packages/fl chart руководство по parse sdk для flutter https //docs parseplatform org/flutter/guide/ официальная документация flutter https //flutter dev/docs пожалуйста, убедитесь, что вы заменили значения заполнители, такие как 'your application id' и 'your client key' на ваши реальные учетные данные back4app удачного кодирования!