diff --git a/README.md b/README.md index c3b927d..536bc4a 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,12 @@ A new Flutter project. +# Content of DAY 12 ([Tutorial](https://www.youtube.com/watch?v=oWU5SY7vPoo&list=PLrjrqTcKCnhTXI2GyPkaQF47inLp6LoIC&index=12)) + +- ListView Builder +- List Generate +- Cards & Asserts + ## Getting Started This project is a starting point for a Flutter application. diff --git a/assets/images/hey.png b/assets/images/hey.png new file mode 100644 index 0000000..caeca23 Binary files /dev/null and b/assets/images/hey.png differ diff --git a/lib/main.dart b/lib/main.dart index 81f5db5..1091413 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_catalog/pages/login_page.dart'; -import 'package:google_fonts/google_fonts.dart'; +import 'package:flutter_catalog/utils/routes.dart'; import 'pages/home_page.dart'; +import 'widgets/themes.dart'; void main() { runApp(MyApp()); @@ -12,18 +13,14 @@ class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( themeMode: ThemeMode.light, - theme: ThemeData( - primarySwatch: Colors.deepPurple, - fontFamily: GoogleFonts.lato().fontFamily, - ), - darkTheme: ThemeData( - brightness: Brightness.dark, - ), - initialRoute: "/", + theme: MyTheme.lightTheme(context), + darkTheme: MyTheme.darkTheme(context), + debugShowCheckedModeBanner: false, + initialRoute: MyRoutes.homeRoute, routes: { "/": (context) => LoginPage(), - "/home": (context) => HomePage(), - "/login": (context) => LoginPage() + MyRoutes.homeRoute: (context) => HomePage(), + MyRoutes.loginRoute: (context) => LoginPage() }, ); } diff --git a/lib/models/catalog.dart b/lib/models/catalog.dart new file mode 100644 index 0000000..da10336 --- /dev/null +++ b/lib/models/catalog.dart @@ -0,0 +1,23 @@ +class CatalogModel { + static final items = [ + Item( + id: 1, + name: "iPhone 12 Pro", + desc: "Apple iPhone 12th generation", + price: 999, + color: "#33505a", + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRISJ6msIu4AU9_M9ZnJVQVFmfuhfyJjEtbUm3ZK11_8IV9TV25-1uM5wHjiFNwKy99w0mR5Hk&usqp=CAc") + ]; +} + +class Item { + final int id; + final String name; + final String desc; + final num price; + final String color; + final String image; + + Item({this.id, this.name, this.desc, this.price, this.color, this.image}); +} diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart index 487caed..16f1ec8 100644 --- a/lib/pages/home_page.dart +++ b/lib/pages/home_page.dart @@ -1,20 +1,30 @@ import 'package:flutter/material.dart'; +import 'package:flutter_catalog/models/catalog.dart'; +import 'package:flutter_catalog/widgets/drawer.dart'; +import 'package:flutter_catalog/widgets/item_widget.dart'; class HomePage extends StatelessWidget { final int days = 30; final String name = "Codepur"; @override Widget build(BuildContext context) { + final dummyList = List.generate(20, (index) => CatalogModel.items[0]); return Scaffold( appBar: AppBar( title: Text("Catalog App"), ), - body: Center( - child: Container( - child: Text("Welcome to $days days of flutter by $name"), + body: Padding( + padding: const EdgeInsets.all(16.0), + child: ListView.builder( + itemCount: dummyList.length, + itemBuilder: (context, index) { + return ItemWidget( + item: dummyList[index], + ); + }, ), ), - drawer: Drawer(), + drawer: MyDrawer(), ); } } diff --git a/lib/pages/login_page.dart b/lib/pages/login_page.dart index 73465b5..d176d74 100644 --- a/lib/pages/login_page.dart +++ b/lib/pages/login_page.dart @@ -1,61 +1,129 @@ import 'package:flutter/material.dart'; +import 'package:flutter_catalog/utils/routes.dart'; + +class LoginPage extends StatefulWidget { + @override + _LoginPageState createState() => _LoginPageState(); +} + +class _LoginPageState extends State { + String name = ""; + bool changeButton = false; + + final _formKey = GlobalKey(); + + moveToHome(BuildContext context) async { + if (_formKey.currentState.validate()) { + setState(() { + changeButton = true; + }); + await Future.delayed(Duration(seconds: 1)); + await Navigator.pushNamed(context, MyRoutes.homeRoute); + setState(() { + changeButton = false; + }); + } + } -class LoginPage extends StatelessWidget { @override Widget build(BuildContext context) { return Material( color: Colors.white, - child: Column( - children: [ - Image.asset( - "assets/images/login_image.png", - fit: BoxFit.cover, - ), - SizedBox( - height: 20.0, - ), - Text( - "Welcome", - style: TextStyle( - fontSize: 24, - fontWeight: FontWeight.bold, - ), - ), - SizedBox( - height: 20.0, - ), - Padding( - padding: - const EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0), - child: Column( - children: [ - TextFormField( - decoration: InputDecoration( - hintText: "Enter username", - labelText: "Username", - ), - ), - TextFormField( - obscureText: true, - decoration: InputDecoration( - hintText: "Enter password", - labelText: "Password", - ), + child: SingleChildScrollView( + child: Form( + key: _formKey, + child: Column( + children: [ + Image.asset( + "assets/images/hey.png", + fit: BoxFit.cover, + ), + SizedBox( + height: 20.0, + ), + Text( + "Welcome $name", + style: TextStyle( + fontSize: 28, + fontWeight: FontWeight.bold, ), - SizedBox( - height: 20.0, + ), + SizedBox( + height: 20.0, + ), + Padding( + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 32.0), + child: Column( + children: [ + TextFormField( + decoration: InputDecoration( + hintText: "Enter username", + labelText: "Username", + ), + validator: (value) { + if (value.isEmpty) { + return "Username cannot be empty"; + } + + return null; + }, + onChanged: (value) { + name = value; + setState(() {}); + }, + ), + TextFormField( + obscureText: true, + decoration: InputDecoration( + hintText: "Enter password", + labelText: "Password", + ), + validator: (value) { + if (value.isEmpty) { + return "Password cannot be empty"; + } else if (value.length < 6) { + return "Password length should be atleast 6"; + } + + return null; + }, + ), + SizedBox( + height: 40.0, + ), + Material( + color: Colors.deepPurple, + borderRadius: + BorderRadius.circular(changeButton ? 50 : 8), + child: InkWell( + onTap: () => moveToHome(context), + child: AnimatedContainer( + duration: Duration(seconds: 1), + width: changeButton ? 50 : 150, + height: 50, + alignment: Alignment.center, + child: changeButton + ? Icon( + Icons.done, + color: Colors.white, + ) + : Text( + "Login", + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 18), + ), + ), + ), + ), + ], ), - ElevatedButton( - child: Text("Login"), - style: TextButton.styleFrom(), - onPressed: () { - print("Hi Codepur"); - }, - ) - ], - ), - ) - ], + ) + ], + ), + ), )); } } diff --git a/lib/utils/routes.dart b/lib/utils/routes.dart new file mode 100644 index 0000000..510c16a --- /dev/null +++ b/lib/utils/routes.dart @@ -0,0 +1,4 @@ +class MyRoutes { + static String loginRoute = "/login"; + static String homeRoute = "/home"; +} diff --git a/lib/widgets/drawer.dart b/lib/widgets/drawer.dart new file mode 100644 index 0000000..298d27b --- /dev/null +++ b/lib/widgets/drawer.dart @@ -0,0 +1,70 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class MyDrawer extends StatelessWidget { + @override + Widget build(BuildContext context) { + final imageUrl = + "https://avatars.githubusercontent.com/u/12619420?s=460&u=26db98cbde1dd34c7c67b85c240505a436b2c36d&v=4"; + return Drawer( + child: Container( + color: Colors.deepPurple, + child: ListView( + padding: EdgeInsets.zero, + children: [ + DrawerHeader( + padding: EdgeInsets.zero, + child: UserAccountsDrawerHeader( + margin: EdgeInsets.zero, + accountName: Text("Pawan Kumar"), + accountEmail: Text("mtechviral@gmail.com"), + currentAccountPicture: CircleAvatar( + backgroundImage: NetworkImage(imageUrl), + ), + ), + ), + ListTile( + leading: Icon( + CupertinoIcons.home, + color: Colors.white, + ), + title: Text( + "Home", + textScaleFactor: 1.2, + style: TextStyle( + color: Colors.white, + ), + ), + ), + ListTile( + leading: Icon( + CupertinoIcons.profile_circled, + color: Colors.white, + ), + title: Text( + "Profile", + textScaleFactor: 1.2, + style: TextStyle( + color: Colors.white, + ), + ), + ), + ListTile( + leading: Icon( + CupertinoIcons.mail, + color: Colors.white, + ), + title: Text( + "Email me", + textScaleFactor: 1.2, + style: TextStyle( + color: Colors.white, + ), + ), + ) + ], + ), + ), + ); + } +} diff --git a/lib/widgets/item_widget.dart b/lib/widgets/item_widget.dart new file mode 100644 index 0000000..7bc5396 --- /dev/null +++ b/lib/widgets/item_widget.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_catalog/models/catalog.dart'; + +class ItemWidget extends StatelessWidget { + final Item item; + + const ItemWidget({Key key, @required this.item}) + : assert(item != null), + super(key: key); + + @override + Widget build(BuildContext context) { + return Card( + child: ListTile( + onTap: () { + print("${item.name} pressed"); + }, + leading: Image.network(item.image), + title: Text(item.name), + subtitle: Text(item.desc), + trailing: Text( + "\$${item.price}", + textScaleFactor: 1.5, + style: TextStyle( + color: Colors.deepPurple, + fontWeight: FontWeight.bold, + ), + ), + ), + ); + } +} diff --git a/lib/widgets/themes.dart b/lib/widgets/themes.dart new file mode 100644 index 0000000..158a8d1 --- /dev/null +++ b/lib/widgets/themes.dart @@ -0,0 +1,18 @@ +import 'package:flutter/material.dart'; +import 'package:google_fonts/google_fonts.dart'; + +class MyTheme { + static ThemeData lightTheme(BuildContext context) => ThemeData( + primarySwatch: Colors.deepPurple, + fontFamily: GoogleFonts.lato().fontFamily, + appBarTheme: AppBarTheme( + color: Colors.white, + elevation: 0.0, + iconTheme: IconThemeData(color: Colors.black), + textTheme: Theme.of(context).textTheme, + )); + + static ThemeData darkTheme(BuildContext context) => ThemeData( + brightness: Brightness.dark, + ); +}