?? Introducing Material Charts in Flutter: Plot Your Data Like a Pro! ????

Because your data deserves to shine with excellence and elegance!

?? What is Material Charts?

Imagine a world where charting is versatile, customizable, and requires no headaches to integrate into your Flutter app.

Crafted with love (and caffeine ?), these charts adhere to proper material design specs while sneaking in extra functionality for those extra use cases.

Building a dashboard shouldn't feel like juggling dependencies. With this lightweight package, you get all your charting essentials in one place.

?? What’s on the Menu?

Here's the menu:

??? Line Charts???

?? Pie Charts??

?? Bar Charts??

??? Candlestick Charts??

?? Gantt Charts??

?? Area Charts??

?? Radar Charts??

?? Scatter Plots, etc.

If your favorite chart isn’t on the list, feel free to open an issue or send a pull request—we’re open to collaboration.

?? Why Did We Build This?

Because as developers, we were tired of the same problems:

• Adding multiple dependencies just to support a single dashboard.
• Dealing with cryptic documentation.
• Struggling with non-intuitive APIs that make customization a pain.

So, Material Charts aims to solve these frustrations by offering a modular, developer-friendly solution with clear code and comprehensive examples.

??? What Makes It Developer-Friendly?

?? Modular Design

The package structure is neat and modular, so you don’t have to deal with spaghetti code. Easy to extend, easy to maintain, easy to understand—because no one wants to debug messy charts at 2 AM.

??? Fully Customizable

Colors? Labels? Animations? Customize away—but don’t blame us if you get carried away and turn your pie chart into a Picasso. ????

You can tweak almost everything:

• Colors ??
• Axis labels ??
• Animations ??
• Tooltips ???

If you dream it, you can probably chart it.

?? Advanced Interaction

• Zoom and pan support for exploring your data.
• Smooth animations to make transitions delightful.
• Custom error handling to keep your app resilient (because NullPointerException ruins the vibe).

Don’t worry, our error handling is smoother than your Tinder pickup lines. ????

?? Documentation Done Right

We’ve all stared at cryptic docs and thought, “What does this even mean?”

We developers read docs, not research papers—leave the hardcore science to Einstein. ??????

?? Not here. Expect clear documentation, real-world examples, and helpful snippets to get you started without frustration.

Why Material for Future Projects?

Because we’re future-proof. ??

• Zero external dependencies (except intl for date formatting).
• Strict SDK and Flutter version constraints for compatibility.
• Designed for scalability, extensibility, and readability.

?? Example

I'll provide a detailed explanation of the Pie Chart / Donut Chart code:

The code creates a pie chart with three segments using the MaterialPieChart widget. Let's break down the key components:

• Data Creation:

final data = [

  PieChartData(

    value: 30,

    label: 'Category A',

    color: Color.fromARGB(255, 24, 86, 136)

  ),

  PieChartData(

    value: 20, 

    label: 'Category B', 

    color: Color.fromARGB(255, 28, 60, 87)

  ),

  PieChartData(

    value: 15, 

    label: 'Category C', 

    color: Color.fromARGB(255, 15, 27, 37)

  )

];        

Creates a list of PieChartData objects

- Each segment has:

??- value: Determines the size of the segment

??- label: Text description of the segment

??- color: Custom color for the segment

• Chart Configuration:

return MaterialPieChart(

  data: data,

  width: 400,

  height: 300,

  padding: EdgeInsets.all(50),

  style: PieChartStyle(

    backgroundColor: const Color.fromARGB(255, 223, 219, 219),

    // holeRadius: 0.5, // Creates a donut chart

    showLabels: true,

    showValues: true,

    showLegend: true,

  ),

);        

Key Configuration Options:

- width and height: Define the chart's dimensions

- padding: Adds space around the chart

- style: Configures the chart's appearance

??- backgroundColor: Sets the background color

??- showLabels: Displays segment labels

??- showValues: Shows segment values

??- showLegend: Enables a legend for the chart

Donut Chart Conversion:

- Uncomment holeRadius: 0.5 to transform the pie chart into a donut chart

- holeRadius creates a circular hole in the center of the chart

Segment Breakdown:

- Total values: 30 + 20 + 15 = 65

- Category A: 30/65 ≈ 46% of the chart

- Category B: 20/65 ≈ 31% of the chart

- Category C: 15/65 ≈ 23% of the chart

Customization Possibilities:

1. Modify segment colors

2. Add more segments

3. Change label and value styles

4. Adjust chart dimensions and padding

5. Enable/disable interactive features

Best Practices:

- Ensure total values make sense for your data

- Use contrasting colors for readability

- Keep labels concise

- Consider using a donut chart for better visual hierarchy

More Charts—>

???? Calling All Developers!

This package isn’t perfect (yet!), and that’s where you come in:

• Found a bug? Open an issue. ??
• Have an idea? Let’s hear it! ??
• Think you can make it better? Pull requests are welcome. ??

Open-source thrives on collaboration, and we’d love for you to join us in making Material Charts even better.

Found a bug? Great! You’re halfway to being a contributor. ??????

?? Final Thoughts

Material Charts isn’t just another charting library. It’s your go-to toolkit for building dashboards that are clean, scalable, and downright beautiful.

Stop settling for mediocre visuals. Let your data do the talking. ???

Ready to give it a spin? Head over to our pub.dev | GitHub repo and start plotting like a rockstar! ??

Creator Vishnudas V

Contributor: Jerin Paul

Flutter Dev Flutter Canvas - Your {co-developer} Fluttercon 谷歌 Google Developers Group