CODEWITHSUNDEEP
androidflutterdart
iiiiiiiiiiiiiiiiiiii
iiiiiiiiiiiiiiiiiiii

Reputation: 359

Flutter: Google Charts Library chart-size/column

I am trying to use Googles's chart lib (https://github.com/google/charts) to make same charts. My problem is the following: I am trying to have the chart on the top, followed by buttons in text.

But everytime, if I try to do the chart in a column like:

 Column(
      children: [
          LineChart(seriesList),
      ],
    );
  }

I need to wrap the LineChart in an expanded (what I not really want), so I do not get an error. Is there any option, to force the google-charts to a specific size, e.g. half of the screen?

Upvotes: 0

Views: 371

Answers (1)

Thierry
Thierry

Reputation: 8383

There are plenty of different ways.

enter image description here

1. With AspectRatio

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AspectRatio(
            aspectRatio: 2 * MediaQuery.of(context).size.aspectRatio,
            child: SimpleLineChart.withSampleData(),
          ),
        ],
      ),
    );
  }
}

With SizedBox

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
              height: MediaQuery.of(context).size.height / 2,
              child: SimpleLineChart.withSampleData()),
        ],
      ),
    );
  }
}

With a ConstrainedBox

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ConstrainedBox(
              constraints: BoxConstraints.loose(Size(
                double.infinity,
                MediaQuery.of(context).size.height / 2,
              )),
              child: SimpleLineChart.withSampleData()),
        ],
      ),
    );
  }
}

With a ListView, specifying the itemExtent

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        itemExtent: MediaQuery.of(context).size.height / 2,
        children: [
          SimpleLineChart.withSampleData(),
        ],
      ),
    );
  }
}

...

...

Upvotes: 1

Related Questions