half done

lib/screens/dashboard/components/chart.dart

@@ -0,0 +1,79 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+
+class Chart extends StatelessWidget {
+  const Chart({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 200,
+      child: Stack(
+        children: [
+          PieChart(
+            PieChartData(
+              sectionsSpace: 0,
+              centerSpaceRadius: 70,
+              startDegreeOffset: -90,
+              sections: paiChartSelectionDatas,
+            ),
+          ),
+          Positioned.fill(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                SizedBox(height: defaultPadding),
+                Text(
+                  "29.1",
+                  style: Theme.of(context).textTheme.headline4.copyWith(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w600,
+                        height: 0.5,
+                      ),
+                ),
+                Text("of 128GB")
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+List<PieChartSectionData> paiChartSelectionDatas = [
+  PieChartSectionData(
+    color: primaryColor,
+    value: 25,
+    showTitle: false,
+    radius: 25,
+  ),
+  PieChartSectionData(
+    color: Color(0xFF26E5FF),
+    value: 20,
+    showTitle: false,
+    radius: 22,
+  ),
+  PieChartSectionData(
+    color: Color(0xFFFFCF26),
+    value: 10,
+    showTitle: false,
+    radius: 19,
+  ),
+  PieChartSectionData(
+    color: Color(0xFFEE2727),
+    value: 15,
+    showTitle: false,
+    radius: 16,
+  ),
+  PieChartSectionData(
+    color: primaryColor.withOpacity(0.1),
+    value: 25,
+    showTitle: false,
+    radius: 13,
+  ),
+];

lib/screens/dashboard/components/header.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../../../constants.dart';
+
+class Header extends StatelessWidget {
+  const Header({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Text(
+          "Dashboard",
+          style: Theme.of(context).textTheme.headline6,
+        ),
+        Spacer(flex: 2),
+        Expanded(child: SearchField()),
+        ProfileCard()
+      ],
+    );
+  }
+}
+
+class ProfileCard extends StatelessWidget {
+  const ProfileCard({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(left: defaultPadding),
+      padding: EdgeInsets.symmetric(
+        horizontal: defaultPadding,
+        vertical: defaultPadding / 2,
+      ),
+      decoration: BoxDecoration(
+        color: secondaryColor,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+        border: Border.all(color: Colors.white10),
+      ),
+      child: Row(
+        children: [
+          Image.asset(
+            "assets/images/profile_pic.png",
+            height: 38,
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: defaultPadding / 2),
+            child: Text("Angelina Joli"),
+          ),
+          Icon(Icons.keyboard_arrow_down),
+        ],
+      ),
+    );
+  }
+}
+
+class SearchField extends StatelessWidget {
+  const SearchField({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      decoration: InputDecoration(
+        hintText: "Search",
+        fillColor: secondaryColor,
+        filled: true,
+        border: OutlineInputBorder(
+          borderSide: BorderSide.none,
+          borderRadius: const BorderRadius.all(Radius.circular(10)),
+        ),
+        suffixIcon: InkWell(
+          onTap: () {},
+          child: Container(
+            padding: EdgeInsets.all(defaultPadding * 0.75),
+            margin: EdgeInsets.symmetric(horizontal: defaultPadding / 2),
+            decoration: BoxDecoration(
+              color: primaryColor,
+              borderRadius: const BorderRadius.all(Radius.circular(10)),
+            ),
+            child: SvgPicture.asset("assets/icons/Search.svg"),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/dashboard/components/storage_details.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+import 'chart.dart';
+import 'storage_info_card.dart';
+
+class StarageDetails extends StatelessWidget {
+  const StarageDetails({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(defaultPadding),
+      decoration: BoxDecoration(
+        color: secondaryColor,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "Storage Details",
+            style: TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          SizedBox(height: defaultPadding),
+          Chart(),
+          StorageInfoCard(
+            svgSrc: "assets/icons/Documents.svg",
+            title: "Documents Files",
+            amountOfFiles: "1.3GB",
+            numOfFiles: 1328,
+          ),
+          StorageInfoCard(
+            svgSrc: "assets/icons/media.svg",
+            title: "Media Files",
+            amountOfFiles: "15.3GB",
+            numOfFiles: 1328,
+          ),
+          StorageInfoCard(
+            svgSrc: "assets/icons/folder.svg",
+            title: "Other Files",
+            amountOfFiles: "1.3GB",
+            numOfFiles: 1328,
+          ),
+          StorageInfoCard(
+            svgSrc: "assets/icons/unknown.svg",
+            title: "Unknown",
+            amountOfFiles: "1.3GB",
+            numOfFiles: 140,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/screens/dashboard/components/storage_info_card.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../../../constants.dart';
+
+class StorageInfoCard extends StatelessWidget {
+  const StorageInfoCard({
+    Key key,
+    @required this.title,
+    @required this.svgSrc,
+    @required this.amountOfFiles,
+    @required this.numOfFiles,
+  }) : super(key: key);
+
+  final String title, svgSrc, amountOfFiles;
+  final int numOfFiles;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: defaultPadding),
+      padding: EdgeInsets.all(defaultPadding),
+      decoration: BoxDecoration(
+        border: Border.all(width: 2, color: primaryColor.withOpacity(0.15)),
+        borderRadius: const BorderRadius.all(
+          Radius.circular(defaultPadding),
+        ),
+      ),
+      child: Row(
+        children: [
+          SizedBox(
+            height: 20,
+            width: 20,
+            child: SvgPicture.asset(svgSrc),
+          ),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    title,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  Text(
+                    "$numOfFiles Files",
+                    style: Theme.of(context)
+                        .textTheme
+                        .caption
+                        .copyWith(color: Colors.white70),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Text(amountOfFiles)
+        ],
+      ),
+    );
+  }
+}

lib/screens/dashboard/dashboard_screen.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+import '../../constants.dart';
+import 'components/header.dart';
+import 'components/storage_details.dart';
+
+class DashboardScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: SingleChildScrollView(
+        padding: EdgeInsets.all(defaultPadding),
+        child: Column(
+          children: [
+            Header(),
+            SizedBox(height: defaultPadding),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  flex: 5,
+                  child: Container(
+                    height: 500,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(width: defaultPadding),
+                Expanded(
+                  flex: 2,
+                  child: StarageDetails(),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}