adding login screen

lib/routes.dart

@@ -2,12 +2,14 @@ import 'package:flutter/material.dart';
 
 import 'src/ui/screens/home.dart';
 import "src/ui/screens/welcome.dart";
+import "src/ui/screens/login.dart";
 import 'themer.dart';
 
 class Routes {
   final routes = <String, WidgetBuilder>{
     '/home': (BuildContext context) => Container(child: Home()),
     '/welcome': (BuildContext context) => Welcome(),
+    '/login': (BuildContext context) => Login(),
   };
 
   final theme = buildTheme();
@@ -17,7 +19,7 @@ class Routes {
       title: "Beep",
       theme: theme,
       routes: routes,
-      home: Welcome(),
+      home: Login(),
     ));
   }
 }

lib/src/ui/screens/login.dart

@@ -0,0 +1,55 @@
+import "package:flutter/material.dart";
+import "../widgets/login_card.dart";
+import "package:flutter_svg/flutter_svg.dart";
+
+class Login extends StatelessWidget {
+  final String logo = "assets/logo.png";
+  final String phoneSvg = "assets/phoneno.svg";
+
+  @override
+  Widget build(BuildContext context) {
+    final double bottomPadding = MediaQuery.of(context).padding.bottom;
+    final double topPadding = MediaQuery.of(context).padding.top;
+
+    return Scaffold(
+        body: Stack(children: <Widget>[
+      Column(children: <Widget>[
+        Expanded(
+            child: Container(
+          padding: EdgeInsets.only(top: topPadding, bottom: 60),
+          child: Column(children: <Widget>[
+            Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: <Widget>[
+                  Image.asset(logo,
+                      semanticLabel: "Beep logo", width: 30.0, height: 50.0),
+                  Padding(
+                      padding: EdgeInsets.only(left: 10.0),
+                      child: Text("Beep",
+                          style: Theme.of(context).accentTextTheme.display3)),
+                ]),
+            Spacer(),
+            SvgPicture.asset(phoneSvg,
+                width: MediaQuery.of(context).size.width - 20),
+          ]),
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+                colors: [
+                  Theme.of(context).primaryColor,
+                  Theme.of(context).primaryColorDark
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+                stops: [0.0, 1.0],
+                tileMode: TileMode.clamp),
+          ),
+        )),
+        Expanded(child: Container())
+      ]),
+      Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: <Widget>[LoginCard()]),
+    ]));
+  }
+}

lib/src/ui/widgets/login_card.dart

@@ -0,0 +1,25 @@
+import "package:flutter/material.dart";
+
+class LoginCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final double bottomPadding = MediaQuery.of(context).padding.bottom;
+
+    return Container(
+        height: (MediaQuery.of(context).size.height / 2) + 50,
+        child: Card(
+          elevation: 10.0,
+          margin: EdgeInsets.only(left: 20.0, right: 20.0),
+          child: Padding(
+              padding: EdgeInsets.all(20.0),
+              child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
+                Text("Phone number",
+                    style: Theme.of(context)
+                        .textTheme
+                        .display3
+                        .copyWith(fontSize: 20.0)),
+                TextField(),
+              ])),
+        ));
+  }
+}

pubspec.yaml

@@ -34,6 +34,7 @@ flutter:
   assets:
     - assets/logo.png
     - assets/join.svg
+    - assets/phoneno.svg
 
   fonts:
   - family: Inter