Skip to content

Commit

Permalink
responsive charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Santos-Enoque
Santos-Enoque committed Jun 14, 2021
1 parent d5132ec commit 1824a68
Show file tree
Hide file tree
Showing 10 changed files with 308 additions and 41 deletions.
77 changes: 44 additions & 33 deletions lib/pages/overview/overview.dart
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,59 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/style.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/bar_chart.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/overview_cards_large.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/overview_cards_medium.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/overview_cards_small.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/revenue_info.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/revenue_section_large.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:get/get.dart';

class OverviewPage extends StatelessWidget {
import 'widgets/revenue_section_small.dart';

class OverviewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Obx(
() => Row(
children: [
Container(
margin: EdgeInsets.only(
top: ResponsiveWidget.isSmallScreen(context) ? 56 : 6),
child: CustomText(
text: menuController.activeItem.value,
size: 24,
weight: FontWeight.bold,
)),
],
),
return Container(
child: Column(
children: [
Obx(
() => Row(
children: [
Container(
margin: EdgeInsets.only(
top: ResponsiveWidget.isSmallScreen(context) ? 56 : 6),
child: CustomText(
text: menuController.activeItem.value,
size: 24,
weight: FontWeight.bold,
)),
],
),
Expanded(child: ListView(children: [
if(ResponsiveWidget.isLargeScreen(context) || ResponsiveWidget.isMediumScreen(context))
if(ResponsiveWidget.isCustomSize(context))
OverviewCardsMediumScreen()
else
OverviewCardsLargeScreen()
else
OverviewCardsSmallScreen(),




Text(MediaQuery.of(context).size.width.toString(),
style: TextStyle(fontSize: 39))
],))
],
);
),
Expanded(
child: ListView(
children: [
if (ResponsiveWidget.isLargeScreen(context) ||
ResponsiveWidget.isMediumScreen(context))
if (ResponsiveWidget.isCustomSize(context))
OverviewCardsMediumScreen()
else
OverviewCardsLargeScreen()
else
OverviewCardsSmallScreen(),
if (!ResponsiveWidget.isSmallScreen(context))
RevenueSectionLarge()
else
RevenueSectionSmall(),
Text(MediaQuery.of(context).size.width.toString(),
style: TextStyle(fontSize: 39))
],
))
],
),
);
}
}
61 changes: 61 additions & 0 deletions lib/pages/overview/widgets/bar_chart.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/// Bar chart example
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/style.dart';

class SimpleBarChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;

SimpleBarChart(this.seriesList, {this.animate});

/// Creates a [BarChart] with sample data and no transition.
factory SimpleBarChart.withSampleData() {
return new SimpleBarChart(
_createSampleData(),
// Disable animations for image tests.
animate: false,
);
}


@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
);
}

/// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('Today', 55),
new OrdinalSales('Yesterday', 25),
new OrdinalSales('2 days', 100),
new OrdinalSales('24 Jun', 75),
new OrdinalSales('23 Jun', 15),
new OrdinalSales('22 Jun', 85),
new OrdinalSales('21 Jun', 45),

];

return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
colorFn: (_, __) => charts.ColorUtil.fromDartColor(active),
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
}

/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;

OrdinalSales(this.year, this.sales);
}
8 changes: 7 additions & 1 deletion lib/pages/overview/widgets/info_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ class InfoCard extends StatelessWidget {
child: Container(
height: 136,
alignment: Alignment.center,
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: lightGrey.withOpacity(.1),
blurRadius: 12
)
],
borderRadius: BorderRadius.circular(8),
border: Border.all(color: isActive ? active : lightGrey, width: .5),
),
Expand Down
3 changes: 0 additions & 3 deletions lib/pages/overview/widgets/overview_cards_large.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class OverviewCardsLargeScreen extends StatelessWidget {
value: "32",
onTap: () {},
),
SizedBox(
width: _width / 64,
),
],
);
}
Expand Down
25 changes: 25 additions & 0 deletions lib/pages/overview/widgets/revenue_info.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/style.dart';

class RevenueInfo extends StatelessWidget {
final String title;
final String amount;

const RevenueInfo({Key key, this.title, this.amount}) : super(key: key);

@override
Widget build(BuildContext context) {
return Expanded(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
TextSpan(
text: "$title \n\n",
style: TextStyle(color: lightGrey, fontSize: 16)),
TextSpan(
text: "\$ $amount",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
])),
);
}
}
85 changes: 85 additions & 0 deletions lib/pages/overview/widgets/revenue_section_large.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/style.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/bar_chart.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/revenue_info.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';

class RevenueSectionLarge extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(24),
margin: EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: lightGrey.withOpacity(.1),
blurRadius: 12)
],
border: Border.all(color: lightGrey, width: .5),
),
child: Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CustomText(
text: "Revenue Chart",
size: 20,
weight: FontWeight.bold,
color: lightGrey,
),
Container(
width: 600,
height: 200,
child: SimpleBarChart.withSampleData()),
],
),
),
Container(
width: 1,
height: 120,
color: lightGrey,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
RevenueInfo(
title: "Toda\'s revenue",
amount: "230",
),
RevenueInfo(
title: "Last 7 days",
amount: "1,100",
),
],
),
SizedBox(height: 30,),
Row(
children: [
RevenueInfo(
title: "Last 30 days",
amount: "3,230",
),
RevenueInfo(
title: "Last 12 months",
amount: "11,300",
),
],
),
],
),
),
],
),
);
}
}
86 changes: 86 additions & 0 deletions lib/pages/overview/widgets/revenue_section_small.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/constants/style.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/bar_chart.dart';
import 'package:flutter_web_dashboard/pages/overview/widgets/revenue_info.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';

class RevenueSectionSmall extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(24),
margin: EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: lightGrey.withOpacity(.1),
blurRadius: 12)
],
border: Border.all(color: lightGrey, width: .5),
),
child: Column(
children: [
Container(
height: 260,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CustomText(
text: "Revenue Chart",
size: 20,
weight: FontWeight.bold,
color: lightGrey,
),
Container(
width: 600,
height: 200,
child: SimpleBarChart.withSampleData()),
],
),
),
Container(
width: 120,
height: 1,
color: lightGrey,
),
Container(
height: 260,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
RevenueInfo(
title: "Toda\'s revenue",
amount: "230",
),
RevenueInfo(
title: "Last 7 days",
amount: "1,100",
),
],
),
Row(
children: [
RevenueInfo(
title: "Last 30 days",
amount: "3,230",
),
RevenueInfo(
title: "Last 12 months",
amount: "11,300",
),
],
),
],
),
),
],
),
);
}
}
2 changes: 0 additions & 2 deletions lib/widgets/large_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_dashboard/helpers/local_navigator.dart';
import 'package:flutter_web_dashboard/pages/overview/overview.dart';
import 'package:flutter_web_dashboard/widgets/custom_text.dart';
import 'package:flutter_web_dashboard/widgets/side_menu.dart';

class LargeScreen extends StatelessWidget {
Expand Down
1 change: 0 additions & 1 deletion lib/widgets/side_menu.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_web_dashboard/constants/controllers.dart';
import 'package:flutter_web_dashboard/constants/style.dart';
import 'package:flutter_web_dashboard/helpers/reponsiveness.dart';
Expand Down
Loading

0 comments on commit 1824a68

Please sign in to comment.