diff --git a/lib/contact_card.dart b/lib/contact_card.dart new file mode 100644 index 0000000..0165f96 --- /dev/null +++ b/lib/contact_card.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; + +class ContactCard extends StatelessWidget { + final String name, image, mobileNumber; + const ContactCard({ + Key? key, + required this.name, + required this.image, + required this.mobileNumber, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Card( + child: Row( + children: [ + CircleAvatar( + backgroundImage: NetworkImage(image), + ), + Padding( + padding: const EdgeInsets.all(16), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + name, + style: const TextStyle(fontWeight: FontWeight.bold), + ), + Text(mobileNumber), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/contact_obj.dart b/lib/contact_obj.dart new file mode 100644 index 0000000..9faf88b --- /dev/null +++ b/lib/contact_obj.dart @@ -0,0 +1,8 @@ +class Contact { + final String image, name, mobileNumber; + final DateTime callDate; + bool isIncoming; + + Contact( + this.image, this.name, this.mobileNumber, this.callDate, this.isIncoming); +} diff --git a/lib/contacts_data.dart b/lib/contacts_data.dart new file mode 100644 index 0000000..c2fc0fc --- /dev/null +++ b/lib/contacts_data.dart @@ -0,0 +1,77 @@ +import 'contact_obj.dart'; + +// ignore: non_constant_identifier_names +final contacts_data = { + Contact( + 'https://i.pravatar.cc/300', + 'Ahmed', + '71766137347', + DateTime.now().add( + Duration(seconds: 3), + ), + true, + ), + Contact( + 'https://i.pravatar.cc/301', + 'Ali', + '71766137347', + DateTime.now().add( + Duration(days: 1), + ), + false, + ), + Contact( + 'https://i.pravatar.cc/302', + 'Kamal', + '71766137347', + DateTime.now().add( + Duration(days: 3), + ), + true, + ), + Contact( + 'https://i.pravatar.cc/303', + 'Mohammad', + '71766137347', + DateTime.now().add( + Duration(days: 5), + ), + true, + ), + Contact( + 'https://i.pravatar.cc/304', + 'Mohammad', + '71766137347', + DateTime.now().add( + Duration(days: 5), + ), + false, + ), + Contact( + 'https://i.pravatar.cc/305', + 'Hussein', + '71766137347', + DateTime.now().add( + Duration(days: 6), + ), + false, + ), + Contact( + 'https://i.pravatar.cc/306', + 'Aboud', + '71766137347', + DateTime.now().add( + Duration(days: 7), + ), + false, + ), + Contact( + 'https://i.pravatar.cc/307', + 'Osama', + '71766137347', + DateTime.now().add( + Duration(days: 6), + ), + false, + ), +}; diff --git a/lib/contacts_list.dart b/lib/contacts_list.dart new file mode 100644 index 0000000..41d1232 --- /dev/null +++ b/lib/contacts_list.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'contacts_data.dart'; +import 'contact_card.dart'; + +class ContactListView extends StatelessWidget { + const ContactListView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ListView( + children: contacts_data + .map((recData) => ContactCard( + image: recData.image, + name: recData.name, + mobileNumber: recData.mobileNumber, + )) + .toList(), + ); + } +} diff --git a/lib/favorites_list.dart b/lib/favorites_list.dart new file mode 100644 index 0000000..4b6a9ef --- /dev/null +++ b/lib/favorites_list.dart @@ -0,0 +1,18 @@ +import 'package:flutter/material.dart'; + +class FavoriteListView extends StatelessWidget { + const FavoriteListView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return GridView( + children: [], + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 200, + childAspectRatio: 3 / 2, + crossAxisSpacing: 20, + mainAxisSpacing: 20, + ), + ); + } +} diff --git a/lib/main.dart b/lib/main.dart index 2c084ed..e30cdce 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,18 +1,9 @@ import 'package:flutter/material.dart'; -import 'dart:math' as math; -void main() { - runApp(const MyApp()); -} - -class Contact { - String image; - String name; - String mobileNumber; - DateTime date; - bool isIncoming; +import 'contacts_list.dart'; +import 'favorites_list.dart'; +import 'recent_list.dart'; - Contact(this.image, this.name, this.mobileNumber, this.date, this.isIncoming); -} +void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @@ -20,235 +11,57 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( - title: 'Flutter Demo 2', + title: 'Flutter App 2', theme: ThemeData( - primarySwatch: Colors.blue, + primarySwatch: Colors.green, ), debugShowCheckedModeBanner: false, - home: const MyHomePage(title: 'Contacts App'), + home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { - const MyHomePage({Key? key, required this.title}) : super(key: key); - - final String title; + const MyHomePage({Key? key}) : super(key: key); @override - State createState() => _MyHomePageState(); + _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { - int _selectedIndex = 2; - static const TextStyle optionStyle = - TextStyle(fontSize: 30, fontWeight: FontWeight.bold); - static late List _pages; - - _MyHomePageState() { - _pages = [ - buildContactsList(), - buildFavoritesGridView(), - // Text('hello'), - Text( - 'Index 2: School', - style: optionStyle, - ), - ]; - } - - void _onItemTapped(int index) { - setState(() { - _selectedIndex = index; - }); - } - - var contacts = [ - Contact( - 'https://i.pravatar.cc/300', - 'Ahmed', - '71766137347', - DateTime.now().add( - const Duration(seconds: 3), - ), - true, - ), - Contact( - 'https://i.pravatar.cc/301', - 'Ali', - '71766137347', - DateTime.now().add( - const Duration(days: 1), - ), - false, - ), - Contact( - 'https://i.pravatar.cc/302', - 'Kamal', - '71766137347', - DateTime.now().add( - const Duration(days: 3), - ), - true, - ), - Contact( - 'https://i.pravatar.cc/303', - 'Mohammad', - '71766137347', - DateTime.now().add( - const Duration(days: 5), - ), - true, - ), - Contact( - 'https://i.pravatar.cc/304', - 'Mohammad', - '71766137347', - DateTime.now().add( - const Duration(days: 5), - ), - false, - ), - Contact( - 'https://i.pravatar.cc/305', - 'Hussein', - '71766137347', - DateTime.now().add( - const Duration(days: 6), - ), - false, - ), - Contact( - 'https://i.pravatar.cc/306', - 'Aboud', - '71766137347', - DateTime.now().add( - const Duration(days: 7), - ), - false, - ), - Contact( - 'https://i.pravatar.cc/307', - 'Osama', - '71766137347', - DateTime.now().add( - const Duration(days: 6), - ), - false, - ), + final tabs = [ + const RecentListView(), + const FavoriteListView(), + const ContactListView(), ]; - - Widget buildFavoritesGridView() { - return Column( - children: [ - Text('Favorites'), - Divider(thickness: 4,), - Expanded( - child: GridView.count( - crossAxisCount: 3, - children: List.generate(5, (index) { - var personColor = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()) - .withOpacity(1.0); - return Center( - child: Container( - width: 120, - height: 120, - child: Text( - contacts[index].name[0], - style: TextStyle(fontSize: 40), - ), - alignment: Alignment.center, - decoration: - BoxDecoration(shape: BoxShape.circle, color: personColor), - ), - ); - }), - ), - ), - ], - ); - } - - Widget buildContactItem(Contact _contact) { - return Card( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - CircleAvatar( - backgroundImage: NetworkImage(_contact.image), - ), - Padding( - padding: const EdgeInsets.all(16), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - _contact.name, - style: const TextStyle(fontWeight: FontWeight.bold), - ), - Text(_contact.mobileNumber), - ], - ), - ), - Text(_contact.date.toIso8601String().split('T').first), - Expanded( - child: Container(), - ), - if (_contact.isIncoming) - Icon( - Icons.arrow_downward, - color: Colors.red, - ) - else - Icon( - Icons.arrow_upward, - color: Colors.green, - ) - ], - ), - ), - ); - } - - Widget buildContactsList() { - return ListView.builder( - itemBuilder: (_context, index) { - return buildContactItem(contacts[index]); - }, - itemCount: contacts.length, - ); - } - + int _curentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( - title: Text(widget.title), - ), - body: Center( - child: _pages[_selectedIndex], + title: const Text('Contacts'), ), + body: tabs[_curentIndex], bottomNavigationBar: BottomNavigationBar( - items: const [ + currentIndex: _curentIndex, + items: const [ BottomNavigationBarItem( - icon: Icon(Icons.home), - label: 'Recent', - ), + icon: Icon(Icons.access_time_outlined), + backgroundColor: Colors.green, + label: 'Recent'), BottomNavigationBarItem( - icon: Icon(Icons.favorite), - label: 'Favorites', - ), + icon: Icon(Icons.star_outline), + backgroundColor: Colors.yellow, + label: 'Favorites'), BottomNavigationBarItem( - icon: Icon(Icons.access_time_outlined), - label: 'School', - activeIcon: Icon(Icons.access_time_filled) - ), + icon: Icon(Icons.person_outline), + backgroundColor: Colors.orange, + label: 'Contacts'), ], - currentIndex: _selectedIndex, - selectedItemColor: Colors.amber[800], - onTap: _onItemTapped, + type: BottomNavigationBarType.shifting, + onTap: (index) { + setState(() => _curentIndex = index); + }, ), ); } diff --git a/lib/recent_card.dart b/lib/recent_card.dart new file mode 100644 index 0000000..b9232ed --- /dev/null +++ b/lib/recent_card.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +// ignore: must_be_immutable +class ResentCard extends StatelessWidget { + String image, name, mobileNumber; + DateTime callDate = DateTime.now(); + bool isIncoming; + + ResentCard( + {Key? key, + required this.image, + required this.name, + required this.mobileNumber, + required this.callDate, + required this.isIncoming}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Card( + child: Row( + children: [ + CircleAvatar( + backgroundImage: NetworkImage(image), + ), + Padding( + padding: const EdgeInsets.all(16), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + name, + style: const TextStyle(fontWeight: FontWeight.bold), + ), + Text(mobileNumber), + ], + ), + ), + Text(callDate.toIso8601String().split('T').first), + Expanded( + child: Container(), + ), + if (isIncoming) + const Icon( + Icons.arrow_downward, + color: Colors.red, + ) + else + const Icon( + Icons.arrow_upward, + color: Colors.green, + ) + ], + ), + )); + } +} diff --git a/lib/recent_list.dart b/lib/recent_list.dart new file mode 100644 index 0000000..361a88c --- /dev/null +++ b/lib/recent_list.dart @@ -0,0 +1,22 @@ +import 'package:contacts_app/contact_obj.dart'; +import 'package:flutter/material.dart'; +import 'recent_card.dart'; +import 'contacts_data.dart'; + +class RecentListView extends StatelessWidget { + const RecentListView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ListView( + children: contacts_data + .map((recData) => ResentCard( + image: recData.image, + name: recData.name, + mobileNumber: recData.mobileNumber, + callDate: recData.callDate, + isIncoming: recData.isIncoming)) + .toList(), + ); + } +}