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

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.