diff --git a/client/assets/icons/release_icon_transparent.png b/client/assets/icons/release_icon_transparent.png new file mode 100644 index 0000000..3987b7e Binary files /dev/null and b/client/assets/icons/release_icon_transparent.png differ diff --git a/client/assets/icons/release_icon_with_name_transparent.png b/client/assets/icons/release_icon_with_name_transparent.png new file mode 100644 index 0000000..6750bcc Binary files /dev/null and b/client/assets/icons/release_icon_with_name_transparent.png differ diff --git a/client/lib/Screens/login/login_screen.dart b/client/lib/Screens/login/login_screen.dart new file mode 100644 index 0000000..64ff39d --- /dev/null +++ b/client/lib/Screens/login/login_screen.dart @@ -0,0 +1,145 @@ +import 'package:flutter/material.dart'; + +class LoginScreen extends StatelessWidget { + const LoginScreen({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + 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.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) { + TextTheme texttheme = Theme.of(context).textTheme; + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SizedBox( + width: 380, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + ' Sign In to the\nCommunity Portal', + style: texttheme.headline1, + ), + Text( + "If you don't have an account", + style: texttheme.subtitle2, + ), + Row( + children: [ + RichText( + text: TextSpan( + text: 'You can', + style: texttheme.subtitle2, + ), + ), + 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: [ + const TextField( + decoration: InputDecoration( + hintText: 'Enter email or Phone number', + labelStyle: TextStyle(fontSize: 12), + ), + ), + const SizedBox(height: 30), + const TextField( + decoration: InputDecoration( + hintText: 'Password', + counterText: 'Forgot password?', + suffixIcon: Icon( + Icons.visibility_off_outlined, + ), + labelStyle: TextStyle(fontSize: 12), + ), + ), + const SizedBox( + height: 40, + ), + Container( + decoration: BoxDecoration( + color: Theme.of(context).primaryColor, + borderRadius: BorderRadius.circular(30), + ), + child: ElevatedButton( + onPressed: () => ("it's pressed"), + style: ElevatedButton.styleFrom( + onPrimary: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(15), + ), + ), + child: const SizedBox( + width: double.infinity, + height: 50, + child: Center(child: Text('Sign In'))), + ), + ), + const SizedBox(height: 40), + ], + ); + } +} diff --git a/client/lib/main.dart b/client/lib/main.dart index 442e03f..8d13479 100644 --- a/client/lib/main.dart +++ b/client/lib/main.dart @@ -1,3 +1,5 @@ +import 'package:client/Screens/login/login_screen.dart'; +import 'package:client/themes/theme_constants.dart'; import 'package:flutter/material.dart'; void main() { @@ -11,60 +13,9 @@ 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 createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - 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: [ - 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: lightTheme, + home: const LoginScreen(), + debugShowCheckedModeBanner: false); } } diff --git a/client/lib/themes/theme_constants.dart b/client/lib/themes/theme_constants.dart new file mode 100644 index 0000000..e80feca --- /dev/null +++ b/client/lib/themes/theme_constants.dart @@ -0,0 +1,64 @@ +import 'package:flutter/material.dart'; + +Color primary = const Color(0xFFFF8714); +Color onprimary = const Color(0xFF000000); +Color secondary = const Color(0xFFF5F5F5); +Color onsecondary = const Color(0xFFFFFFFF); +Color background = const Color(0xFFFFFFFF); + +ThemeData lightTheme = ThemeData( + brightness: Brightness.light, + primaryColor: primary, + floatingActionButtonTheme: FloatingActionButtonThemeData( + backgroundColor: primary, + ), + elevatedButtonTheme: ElevatedButtonThemeData( + style: ButtonStyle( + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20.0), + ), + ), + backgroundColor: MaterialStateProperty.all(primary), + ), + ), + inputDecorationTheme: InputDecorationTheme( + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(15), borderSide: BorderSide.none), + filled: true, + fillColor: secondary.withOpacity(1.0), + suffixIconColor: Colors.grey, + contentPadding: const EdgeInsetsDirectional.only(start: 30), + ), + textTheme: const TextTheme( + headline1: TextStyle( + fontSize: 45.0, + fontWeight: FontWeight.bold, + color: Colors.black, + ), + headline2: TextStyle( + fontSize: 24.0, + fontWeight: FontWeight.bold, + color: Colors.black, + ), + headline3: TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.bold, + ), + headline4: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.bold, + color: Colors.black, + ), + bodyText2: TextStyle( + fontSize: 14, + letterSpacing: 0.5, + ), + subtitle1: TextStyle( + fontSize: 14.0, + ), + subtitle2: TextStyle( + fontSize: 12.0, + ), + ), +); diff --git a/client/pubspec.yaml b/client/pubspec.yaml index 25501c1..c181869 100644 --- a/client/pubspec.yaml +++ b/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