About the project

The goal of the project is to show the capabilities of Flutter Web.

This is a dashboard that allows users to manage tasks, projects, files, view statistic and share them with their teammates based on the Flutter Web.

Features

• Manage tasks.
• Projects.
• Files.
• View statistic with charts.
• Responsive design.

Built with

• Flutter Web - Easily reach more users in browsers with the same experience as on mobile devices through the power of Flutter on the web.
• Visual Studio Code - Code Editing.
• Clean Architecture - To separate architecture into loosely coupled layers.
• Auto Route - Navigation of the application.
• Fl Chart - Pie Chart and Vertical Bar Charts .
• Syncfusion Flutter Charts - Horizontal Bar Charts.

Horizontal Bar Charts

SfCartesianChart(
        margin: EdgeInsets.zero,
        plotAreaBorderWidth: 0,
        title: ChartTitle(
          text: 'Age',
          textStyle: TextStyles.myriadProSemiBold14DarkBlue,
          alignment: ChartAlignment.near,
        ),
        primaryXAxis: CategoryAxis(
          axisLabelFormatter: (AxisLabelRenderDetails details) {
            return ChartAxisLabel(
              details.text,
              TextStyles.myriadProRegular13DarkBlue.copyWith(
                color: Palette.darkBlue.withOpacity(0.6),
                fontSize: 12.8,
              ),
            );
          },
          axisLine: const AxisLine(width: 0),
          majorTickLines: const MajorTickLines(size: 0),
          majorGridLines: const MajorGridLines(width: 0),
          isVisible: true,
        ),
        primaryYAxis: NumericAxis(
          axisLabelFormatter: (AxisLabelRenderDetails details) {
            return ChartAxisLabel(
              '${details.text}%',
              TextStyles.myriadProRegular13DarkBlue.copyWith(
                fontSize: 12.8,
              ),
            );
          },
          axisLine: const AxisLine(width: 0),
          majorTickLines: const MajorTickLines(size: 0, width: 0),
          majorGridLines: const MajorGridLines(
            width: 0.5,
            color: Palette.lightGrey,
          ),
          minorTickLines: const MinorTickLines(size: 0, width: 0),
          minorGridLines: const MinorGridLines(width: 0),
          maximum: 15,
        ),
        palette: const <Color>[
          Palette.orange,
          Palette.lightBlue,
        ],
        series: <ChartSeries>[
          _createBarSeries(femaleData),
          _createBarSeries(maleData),
        ],
        tooltipBehavior: TooltipBehavior(enable: true),
      ),

Vertical Bar Charts

BarChartGroupData(
      x: 0,
      barsSpace: 20,
      barRods: [
        ...activeUsersData.entries
            .map(
              (MapEntry<int, List<double>> e) => BarChartRodData(
                y: e.value.first,
                width: 13,
                colors: [Palette.lightBlue],
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(8),
                  topRight: Radius.circular(8),
                ),
                backDrawRodData: BackgroundBarChartRodData(
                  show: true,
                  y: e.value.last,
                  colors: [Palette.mediumBlue],
                ),
              ),
            )
            .toList(),
      ],
    ),

Getting Started

Step 1:

Download or clone this repo by using the link below:

https://github.com/TBR-Group-software/flutter_web_dashboard.git

Step 2:

Go to project root and execute the following command in console to get the required dependencies:

flutter pub get 

License

This project is licensed under the GNU GPL v3 License - see the LICENSE.md file for details.