Innovate Nest Labs

Posted on Apr 6

Build Enterprise-Grade Flutter Dashboards in Minutes 🚀 (What’s New in NRB 3.0.3)

#flutter #dart #ui #webdev

If you’ve ever tried to build a complex, responsive data table in Flutter, you know the struggle.

Wrestling with DataTable to get sticky headers, dynamic column sizing, horizontal scrolling, and pagination can quickly turn a simple admin panel into a multi-day headache. And when your client asks, "Can we add a pie chart and an export-to-PDF button?", you usually have to hunt down three different heavy libraries just to make it work.

That’s exactly why we built NRB (Nexora Report Builder).

Today, we are thrilled to announce NRB Version 3.0.3, our biggest update yet, turning nrb from a powerful table builder into a complete Enterprise Dashboard UI Toolkit.

🌟 The Big Feature: Inject ANY Custom Widget into your Tables

Since day one, developers have loved nrb for its ease of use when rendering text and numbers. But a modern dashboard needs more than just text. It needs action buttons, colorful status badges, user avatars, and progress bars.

In v3.0.3, we are introducing the NrbCustomWidgetCell.

You are no longer limited to strings. You can now pass any Flutter widget directly into your table grid without breaking the responsive layout, sticky headers, or export functionality.

💻 Example: Adding Status Badges and Action Buttons

// Building a row in NRB 3.0.3
List<ReportCell> _buildRow(Employee data) {
  return [
    TextCell(itemContent: data.name),
    TextCell(itemContent: data.department),

    // 🔥 NEW: Inject a custom Flutter Widget for the Status!
    NrbCustomWidgetCell(
      exportText: data.status, // Fallback text for PDF/Excel exports
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          color: data.isActive ? Colors.green.shade100 : Colors.red.shade100,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          data.status,
          style: TextStyle(color: data.isActive ? Colors.green : Colors.red),
        ),
      ),
    ),

    // 🔥 NEW: Inject a Delete Icon Button!
    NrbCustomWidgetCell(
      exportText: "Action",
      child: IconButton(
        icon: const Icon(Icons.delete, color: Colors.red),
        onPressed: () => deleteUser(data.id),
      ),
    ),
  ];
}

Note: We even included an exportText property! When your user downloads the table as an Excel or PDF file, nrb knows exactly what text to print in place of your custom UI widget.

📈 Stop Importing Heavy Chart Libraries: New Analytics Widgets

Admin panels aren't just tables; they are visual stories. To save you from bloating your app with massive third-party charting dependencies, nrb now ships with beautiful, animated, physics-based charts built natively in Flutter.

With this update, we’ve added highly requested enterprise charts:

1. NrbComboChart (Dual-Axis Mastery)

Need to compare revenue (currency) against total active users (volume) over time? The Combo Chart lets you overlay a sleek bezier line chart directly on top of a bar chart, complete with dual Y-axes and interactive tooltips.

2. NrbMultiDonutChart

A massive upgrade from standard pie charts. Create beautiful, multi-segmented rings with automatically generated side and bottom legends. Just pass your data and set showSideLegend: true!

NrbMultiDonutChart(
  size: 180,
  strokeWidth: 35.0,
  showLabels: true, // Shows % inside the ring!
  showSideLegend: true, // Auto-generates a clean UI legend
  slices: [
    NrbPieSlice(value: 55.0, color: Colors.blue, label: "Web Apps"),
    NrbPieSlice(value: 35.0, color: Colors.green, label: "Mobile Apps"),
  ],
  centerContent: const Text("90", style: TextStyle(fontSize: 24)),
)

3. NrbStackedBarChart

Perfect for visualizing budget breakdowns, team allocations, or nested categories over time.

4. Interactive Trend Cards

Dashboards need top-level KPIs. Use the new NrbTrendCard to display key metrics. It includes built-in up/down trend arrows and a smooth "bounce" animation when tapped.

🛠️ Why Developers Love NRB

If you are new to the Nexora Report Builder, here is what you get out of the box:

📱 Truly Responsive: Columns auto-measure their content (wrap_content) and expand proportionally to fill available screen space.
📌 Complex Nested Headers: Build main headers, sub-headers, and sticky left-side columns (like Excel-style freeze panes) in minutes.
💰 Built-in Number Formatting: Automatically format raw numbers into International or Indian comma separation schemas (10,99,493.50).
📥 Premium Native Exporting: Instantly download your exact table grid to PDF, Excel (.xlsx), or Word, or trigger the native OS share dialog.

🚀 Get Started Today

Drop the old, rigid DataTable. Give your users the smooth, enterprise-grade reporting experience they deserve.

📦 Install via pub.dev:

flutter pub add nrb

🔗 Check out the interactive Web Demo: nrb Demo Live

📖 Read the Docs: pub.dev/packages/nrb

Have feature requests or feedback? Let us know in the comments below or open an issue on our GitHub! Happy coding! 💙💻

DEV Community