feat: adding authentication page UI based on Figma

client/lib/Screens/login/login_screen.dart

@@ -0,0 +1,187 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:flutter/material.dart';
+
+class LoginScreen extends StatelessWidget {
+  const LoginScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Color(0xffFFFFFF),
+      body: ListView(
+        padding: EdgeInsets.symmetric(
+            horizontal: MediaQuery.of(context).size.width / 8),
+        children: const [
+          Menu(),
+          Body(),
+        ],
+      ),
+    );
+  }
+}
+
+class Menu extends StatelessWidget {
+  const Menu({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 30),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Image.asset(
+                'icons/release_icon_transparent.png',
+                width: 41,
+                height: 65,
+              )
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Body extends StatelessWidget {
+  const Body({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        SizedBox(
+          width: 380,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                '   Sign In to the\nCommunity Portal',
+                style: TextStyle(
+                  fontSize: 45,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              SizedBox(
+                height: null,
+              ),
+              Text(
+                "If you don't have an account",
+                style: TextStyle(
+                    color: Colors.black54, fontWeight: FontWeight.bold),
+              ),
+              SizedBox(
+                height: 10,
+              ),
+              Row(
+                children: [
+                  RichText(
+                    text: TextSpan(
+                      text: 'You can',
+                      style: TextStyle(
+                          color: Colors.black54, fontWeight: FontWeight.bold),
+                    ),
+                  ),
+                  SizedBox(width: 15),
+                  Text(
+                    "Register here!",
+                    style: TextStyle(
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.bold),
+                  ),
+                ],
+              ),
+              Image.asset(
+                'icons/release_icon_with_name_transparent.png',
+                width: 400,
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(
+              vertical: MediaQuery.of(context).size.height / 6),
+          child: SizedBox(
+            width: 320,
+            child: _formLogin(context),
+          ),
+        )
+      ],
+    );
+  }
+
+  Widget _formLogin(context) {
+    return Column(
+      children: [
+        TextField(
+          decoration: InputDecoration(
+            hintText: 'Enter email or Phone number',
+            filled: true,
+            labelStyle: TextStyle(fontSize: 12),
+            contentPadding: EdgeInsetsDirectional.only(start: 30),
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(15),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(15),
+            ),
+          ),
+        ),
+        SizedBox(height: 30),
+        TextField(
+          decoration: InputDecoration(
+            hintText: 'Password',
+            counterText: 'Forgot password?',
+            suffixIcon: Icon(
+              Icons.visibility_off_outlined,
+              color: Colors.grey,
+            ),
+            filled: true,
+            labelStyle: TextStyle(fontSize: 12),
+            contentPadding: EdgeInsetsDirectional.only(start: 30),
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(15),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(15),
+            ),
+          ),
+        ),
+        SizedBox(height: 40),
+        Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).primaryColor,
+            borderRadius: BorderRadius.circular(30),
+            boxShadow: [
+              BoxShadow(
+                color: Theme.of(context).primaryColor,
+                spreadRadius: 10,
+                blurRadius: 20,
+              ),
+            ],
+          ),
+          child: ElevatedButton(
+            onPressed: () => ("it's pressed"),
+            style: ElevatedButton.styleFrom(
+              primary: Theme.of(context).primaryColor,
+              onPrimary: Colors.white,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(15),
+              ),
+            ),
+            child: SizedBox(
+                width: double.infinity,
+                height: 50,
+                child: Center(child: Text("Sign In"))),
+          ),
+        ),
+        SizedBox(height: 40),
+      ],
+    );
+  }
+}

client/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:client/Screens/login/login_screen.dart';
 import 'package:flutter/material.dart';
 
 void main() {
@@ -11,60 +12,14 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({Key? key, required this.title}) : super(key: key);
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
-    );
+        title: 'Community-portal',
+        theme: ThemeData(
+            primaryColor: const Color(0xffFF8714),
+            backgroundColor: const Color(0xffFFFFFF),
+            inputDecorationTheme: const InputDecorationTheme(
+              fillColor: Color(0xffF5F5F5),
+            )),
+        home: const LoginScreen(),
+        debugShowCheckedModeBanner: false);
   }
 }

client/pubspec.yaml

@@ -58,8 +58,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
+  assets:
+   - assets/icons/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see