Flutter: How to create a simple custom bar chart / slider - flutter

Question

I have a JSON like this:
[
{
"column": "Column 1",
"slider1": 86,
"slider2": 43,
"slider3": 25
},
{
"column": "Column 2",
"slider1": 64,
"slider2": 72,
"slider3": 39
}
]
I want to make a Bar chart or Slider like this:
Max length of bar chart = 100
The length of the bar chart = its value (Ex slider1 = 86)
I thought of using Stack but I don't know how to do. So pls help me, this is the main file:
import 'dart:convert';
import 'package:ask/model/data_model.dart';
import 'package:flutter/material.dart';
class Page4 extends StatefulWidget {
#override
_Page4State createState() => _Page4State();
}
class _Page4State extends State<Page4> {
List<Data> _data = [];
Future<List<Data>> getDataFromJson(BuildContext context) async {
String jsonString = await DefaultAssetBundle.of(context).loadString('assets/data.json');
List<dynamic> raw = jsonDecode(jsonString);
return raw.map((e) => Data.fromJson(e)).toList();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Simple Slider')),
body: FutureBuilder(
future: getDataFromJson(context),
builder: (context, snapshot) {
List<Data> _data = snapshot.data;
return ListView.separated(
separatorBuilder: (context, index) => Divider(),
itemCount: _data.length,
itemBuilder: (context, index) {
Data data = _data[index];
return Column(children: [
Row(children: [
Expanded(child: Text(data.column)),
Expanded(
child: Column(children: [
SizedBox(height: 5),
Container(
width: double.infinity,
color: Colors.grey[300],
child: Text(data.slider1.toString(), style: TextStyle(color: Colors.blue[(data.slider1 / 10).round() * 100])), //How to put a bar chart here
),
SizedBox(height: 5),
Container(
width: double.infinity,
color: Colors.grey[300],
child: Text(data.slider2.toString(), style: TextStyle(color: Colors.blue[(data.slider2 / 10).round() * 100])), //How to put a bar chart here
),
SizedBox(height: 5),
Container(
width: double.infinity,
color: Colors.grey[300],
child: Text(data.slider3.toString(), style: TextStyle(color: Colors.blue[(data.slider3 / 10).round() * 100])), //How to put a bar chart here
),
]),
)
])
]);
});
}));
}
}
.......................................................................................

Answer 1

here is a solution which can help you but these are static bars, in case you want to have an interaction with your ui , you should use slider widgetmore info.
code sample
#override
Widget build(BuildContext context) {
final double sliderWidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CustomSlider(
percentage: 12 / 100,
width: sliderWidth,
),
CustomSlider(
percentage: 90 / 100,
width: sliderWidth,
),
CustomSlider(
percentage: 50 / 100,
width: sliderWidth,
),
],
),
),
);
}
}
class CustomSlider extends StatelessWidget {
final double percentage;
final double width;
CustomSlider({
this.percentage,
this.width,
});
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
width: double.infinity,
height: 20,
color: Colors.grey,
),
Container(
color: Colors.blue,
width: percentage == null ? 0 : width * percentage,
height: 20,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
percentage == null ? "0" : (percentage * 100).toString(),
),
),
),
],
),
);
}
}
good luck.