how to call your charts in widget child

[wasimakram3]

For example . i'm using your piechart and need to add it in the bootstrap widget . I'm calling pieChart() in child bootstrap. it shows void error. How to add the container in it. can you give a sample code for adding charts and calling in widget child

[jolleekin]

Can you provide more information? I'm not sure what you mean by widget child (I never use bootstrap).

[wasimakram3]

Actually we are using bootstrap child widget to use in flutter web. I don't know how to call the void createPieChart() in the bootstrap child content widget. Also instead of createContainer function, how to merge container with that bootstrap child widget (Ex: col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 given in last one with text 'Line chart').

Given source code below:

import 'package:flutter/material.dart'; import 'package:flutter_bootstrap/flutter_bootstrap.dart'; import 'dart:html'; import 'package:modern_charts/modern_charts.dart' as modern; import 'package:http/http.dart' as http;

void main() => runApp(Application());

class Application extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Inventory', home: DemoPage(), ); } }

class DemoPage extends StatefulWidget { @override _DemoPageState createState() => _DemoPageState(); }

class _DemoPageState extends State { @override void initState() { super.initState(); bootstrapGridParameters( gutterSize: 30, ); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Inventory', style: TextStyle(color: Colors.black)), backgroundColor: Colors.white, ), body: SingleChildScrollView( child: BootstrapContainer( fluid: true, decoration: BoxDecoration(color: Colors.white), children: [ BootstrapContainer( fluid: true, decoration: BoxDecoration(color: Colors.white), padding: const EdgeInsets.only(top: 20), children: [ BootstrapRow( height: 60, children: [ BootstrapCol( sizes: 'col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3', child: ContentWidget( text: 'Summary One', color: Colors.grey, ), ), BootstrapCol( sizes: 'col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3', child: ContentWidget( text: 'Summary two', color: Colors.grey, ), ), BootstrapCol( sizes: 'col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3', child: ContentWidget( text: 'Summary Three', color: Colors.grey, ), ), BootstrapCol( sizes: 'col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3', child: ContentWidget( text: 'Summary four', color: Colors.grey, ), ), ], ), SizedBox(height: 8), Divider(), BootstrapRow( height: 120, children: [ BootstrapCol( sizes: 'col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4', child: ContentWidget( text: 'Pie Chart', color: Colors.grey, ), ), BootstrapCol( sizes: 'col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8', child: ContentWidget( text: 'Table', color: Colors.grey, ), ), ], ), SizedBox(height: 8), Divider(), BootstrapRow( height: 60, children: [ BootstrapCol( sizes: 'col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12', child: ContentWidget( text: 'Line chart', color: Colors.grey, ), ), ], ), ], ), ], ), ), ); } }

class ContentWidget extends StatelessWidget { const ContentWidget({ Key key, this.text, this.color, }) : super(key: key);

final String text; final Color color;

@override Widget build(BuildContext context) { return Container( height: 150, color: color, child: Text(text), alignment: Alignment.center, ); } }

void createPieChart() { var changeDataButton = ButtonElement()..text = 'Change data'; //document.body.append(changeDataButton);

var insertRemoveRowButton = ButtonElement()..text = 'Insert/remove data row'; //document.body.append(insertRemoveRowButton);

//var container = createContainer(); var container; var table = modern.DataTable([ ['Browser', 'Share'], ['Chrome', 35], ['Firefox', 20], ['IE', 30], ['Opera', 5], ['Safari', 8], ['Other', 2] ]); var chart = modern.PieChart(container); chart.draw(table, { 'animation': { 'onEnd': () { changeDataButton.disabled = false; insertRemoveRowButton.disabled = false; } }, 'pieHole': .5, 'series': { 'counterclockwise': true, 'labels': {'enabled': true}, 'startAngle': 90 + 10 * 360, }, 'title': {'text': 'Pie Chart Demo'}, });

void disableAllButtons() { changeDataButton.disabled = true; insertRemoveRowButton.disabled = true; }

changeDataButton.onClick.listen((_) { disableAllButtons(); for (var row in table.rows) { for (var i = 1; i < table.columns.length; i++) { // row[i] = rand(2, 25); } } chart.update(); });

var insertRow = true; insertRemoveRowButton.onClick.listen((_) { insertRemoveRowButton.disabled = true; if (insertRow) { var values = ['New', 6]; table.rows.insert(2, values); } else { table.rows.removeAt(2); } insertRow = !insertRow; chart.update(); }); }

[jolleekin]

I see. This package supports web only. To create charts in Flutter, you should use a package that supports it. Here are some good ones

• https://pub.dev/packages/syncfusion_flutter_charts
• https://pub.dev/packages/charts_flutter