added custom appbar

paulntitemi · Aug 29, 2022 · 2221d56 · 2221d56
1 parent bde1d6b
commit 2221d56
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/lib/presentation/pages/planner.dart b/lib/presentation/pages/planner.dart
@@ -1,5 +1,6 @@
 import 'package:elearn/data/course/categories.dart';
 import 'package:elearn/data/course/course_json.dart';
+import 'package:elearn/data/user/user_data.dart';
 import 'package:elearn/presentation/themes/colors.dart';
 import 'package:elearn/presentation/widget/course_widget.dart';
 import 'package:table_calendar/table_calendar.dart';
@@ -17,10 +18,106 @@ class _PlannerPageState extends State<PlannerPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: background,
+      appBar: getAppBar(),
       body: getBody(),
     );
   }
 
+  // Custom appbar (
+  PreferredSizeWidget getAppBar() {
+    return PreferredSize(
+      preferredSize: const Size.fromHeight(150),
+      child: Container(
+        // duration: const Duration(milliseconds: 500),
+        // curve: Curves.fastOutSlowIn,
+        // Appbar container
+        height: 220,
+        width: MediaQuery.of(context).size.width,
+        child: Padding(
+          padding: const EdgeInsets.only(
+            left: 12,
+            right: 12,
+          ),
+          child: Column(
+            // Colums conataining the username, profilepic, and the searchbar
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              Row(
+                // user name and searchbar
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text('Hi, ' + user[0]['firstname'],
+                      style: const TextStyle(
+                          color: black,
+                          fontSize: 30,
+                          fontWeight: FontWeight.bold)),
+                  SizedBox(
+                    child: CircleAvatar(
+                      radius: 25.0,
+                      backgroundColor: white,
+                      foregroundImage: AssetImage(user[0]['image']),
+                    ),
+                  )
+                ],
+              ),
+              // search bar
+              Container(
+                child: TextField(
+                  decoration: InputDecoration(
+                    contentPadding: const EdgeInsets.all(12),
+                    isDense: true,
+                    border: OutlineInputBorder(
+                      borderSide: const BorderSide(color: Colors.blue),
+                      borderRadius: BorderRadius.circular(15.0),
+                    ),
+                    enabledBorder: OutlineInputBorder(
+                      borderSide: const BorderSide(color: shadow),
+                      borderRadius: BorderRadius.circular(15.0),
+                    ),
+                    filled: true,
+                    fillColor: white,
+                    hintStyle: const TextStyle(color: disabled),
+                    hintText: "Search",
+                    suffixIcon: const Icon(
+                      Icons.search,
+                      color: disabled,
+                      size: 25,
+                    ),
+                  ),
+                ),
+                decoration: const BoxDecoration(
+                  boxShadow: [
+                    BoxShadow(
+                      color: shadow,
+                      blurRadius: 8,
+                      offset: Offset(0, 1),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        // appbar container Decoration
+        decoration: const BoxDecoration(
+          color: white,
+          borderRadius: BorderRadius.only(
+            bottomLeft: Radius.circular(10),
+            bottomRight: Radius.circular(10),
+          ),
+          boxShadow: [
+            BoxShadow(
+              color: shadow,
+              blurRadius: 10,
+              offset: Offset(0, 8),
+              spreadRadius: 1, // Shadow position
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
   Widget getBody() {
     return SingleChildScrollView(
       scrollDirection: Axis.vertical,