Menggunakan LayoutBuilder

LayoutBuilder memungkinkan kita mengatur tinggi atau lebar children widget berdasarkan constraint maxheight atau maxwidth.

Setelah menggunakan LayoutBuilder kita bisa menampilkan bar chart yang mengambil tinggi dengan propors yang kita atur dari widget chart. (lihat gambar dibawah).

Buka file chart_bar.dart, atur tinggi chart proporsional terhadap maximum height total seluruh tinggi chartwidget yang diperoleh dari constraints.maxHeight. Pada contoh, tinggi bar chart akan mengambil 60% dari maxHeight.

return LayoutBuilder(builder: (ctx, constraints) {
  // return bar chart disini
}

Container(
  height: constraints.maxHeight * 0.6,
  width: 10,
  child: Stack(
  ...
  ...
  ...
),

Code

//file chart_bar.dart

import 'package:flutter/material.dart';

class ChartBar extends StatelessWidget {
  final String lbl;
  final double amount;
  final double persentase;

  ChartBar(this.lbl, this.amount, this.persentase);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (ctx, constraints) {
      return Column(
        children: <Widget>[
          Text(
            (amount).toStringAsFixed(0),
            style: TextStyle(
              fontSize: 10,
            ),
          ),
          Container(
              height: constraints.maxHeight * 0.6,
              width: 10,
              child: Stack(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 1),
                      color: Color.fromRGBO(200, 200, 200, 1),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  FractionallySizedBox(
                    heightFactor: persentase,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  )
                ],
              )),
          SizedBox(height: constraints.maxHeight * 0.15),
          Text(
            lbl,
            style: TextStyle(fontSize: 10),
          )
        ],
      );
    });
  }
}