diff --git a/lib/compenents/article_container.dart b/lib/compenents/article_container.dart deleted file mode 100644 index fe535ff..0000000 --- a/lib/compenents/article_container.dart +++ /dev/null @@ -1,56 +0,0 @@ -import 'package:flutter/material.dart'; - -class ArticleContainer extends StatelessWidget { - const ArticleContainer( - {Key? key, - required this.date, - required this.imageUrl, - required this.title}) - : super(key: key); - final String title; - final String date; - final String imageUrl; - - @override - Widget build(BuildContext context) { - return Column(children: [ - Container( - padding: const EdgeInsets.all(20.0), - width: double.infinity, - height: MediaQuery.of(context).size.height / 5, - child: Row(children: [ - Container( - margin: const EdgeInsets.only(right: 30.0), - child: ClipRRect( - borderRadius: BorderRadius.circular(20), - // ignore: prefer_const_constructors - child: Image(image: NetworkImage(imageUrl)), - ), - ), - Container( - margin: const EdgeInsets.only(top: 15), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - title, - style: const TextStyle( - color: Color(0xFFBA0C2F), - fontSize: 20.0, - fontWeight: FontWeight.bold), - ), - const SizedBox( - height: 15.0, - ), - Text( - date, - style: TextStyle(color: Colors.white), - ) - ], - ), - ) - ]), - ) - ]); - } -} diff --git a/lib/compenents/article_list.dart b/lib/compenents/article_list.dart deleted file mode 100644 index 428778b..0000000 --- a/lib/compenents/article_list.dart +++ /dev/null @@ -1,43 +0,0 @@ -import 'package:flutter/material.dart'; - -import '../data/article.dart'; -import 'article_container.dart'; - -// ignore: must_be_immutable -class ArticleListView extends StatelessWidget { - ArticleListView({Key? key, this.count}) : super(key: key); - final int? count; - List
articles = [ - const Article("title", "1/1/2011", - 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg'), - const Article("title", "1/1/2011", - 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg'), - const Article("title", "1/1/2011", - 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg'), - const Article("title", "1/1/2011", - 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg'), - const Article("title", "1/1/2011", - 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg'), - ]; - @override - Widget build(BuildContext context) { - return Container( - color: Colors.black, - child: ListView.separated( - itemCount: articles.length, - itemBuilder: (context, index) => ArticleContainer( - title: articles[index].title, - imageUrl: articles[index].imageUrl, - date: articles[index].date, - ), - separatorBuilder: (context, index) => Center( - child: Container( - height: 1.0, - width: 350, - color: Colors.grey[300], - ), - ), - ), - ); - } -} diff --git a/lib/compenents/item_container.dart b/lib/compenents/item_container.dart new file mode 100644 index 0000000..abea973 --- /dev/null +++ b/lib/compenents/item_container.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; + +class ItemContainer extends StatelessWidget { + const ItemContainer({ + Key? key, + required this.date, + required this.imageUrl, + required this.title, + }) : super(key: key); + final String title; + final String date; + final String imageUrl; + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(20.0), + width: double.infinity, + height: MediaQuery.of(context).size.height / 5, + child: Row(children: [ + Container( + width: MediaQuery.of(context).size.width / 3, + margin: const EdgeInsets.only(right: 30.0), + child: ClipRRect( + borderRadius: BorderRadius.circular(20), + child: Image.network( + imageUrl, + errorBuilder: (context, error, stackTrace) => Container(), + ), + ), + ), + Container( + margin: const EdgeInsets.only(top: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: const TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 20.0, + fontWeight: FontWeight.bold), + ), + const SizedBox( + height: 15.0, + ), + Text( + date, + style: const TextStyle(color: Colors.white), + ) + ], + ), + ) + ]), + ); + } +} diff --git a/lib/compenents/list_view.dart b/lib/compenents/list_view.dart new file mode 100644 index 0000000..c5c4afc --- /dev/null +++ b/lib/compenents/list_view.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; + +import 'item_container.dart'; + +// ignore: must_be_immutable +class IeeeListView extends StatelessWidget { + const IeeeListView({Key? key, required this.items}) : super(key: key); + final List items; + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.black, + child: ListView.separated( + itemCount: items.length, + itemBuilder: (context, index) => ItemContainer( + title: items[index].title, + imageUrl: items[index].imageUrl, + date: items[index].date.toString().substring(0, 10), + ), + separatorBuilder: (context, index) => Center( + child: Container( + height: 1.0, + width: 350, + color: Colors.grey[300], + ), + ), + ), + ); + } +} diff --git a/lib/compenents/list_view_container.dart b/lib/compenents/list_view_container.dart new file mode 100644 index 0000000..b7c68cc --- /dev/null +++ b/lib/compenents/list_view_container.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; + +class ArticleContainer extends StatelessWidget { + const ArticleContainer( + {Key? key, + required this.date, + this.imageUrl, + this.title, + required this.nextScreen}) + : super(key: key); + final String? title; + final String date; + final String? imageUrl; + final Widget nextScreen; + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(20.0), + width: double.infinity, + height: MediaQuery.of(context).size.height / 5, + child: Row(children: [ + Container( + margin: const EdgeInsets.only(right: 30.0), + child: ClipRRect( + borderRadius: BorderRadius.circular(20), + // ignore: prefer_const_constructors + child: Image(image: AssetImage('assets/article_image.jpeg')), + ), + ), + Container( + margin: const EdgeInsets.only(top: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title!, + style: const TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 30.0, + fontWeight: FontWeight.bold), + ), + const SizedBox( + height: 15.0, + ), + Text( + date, + //date, + style: const TextStyle(color: Colors.white), + ) + ], + ), + ) + ]), + ); + } +} diff --git a/lib/compenents/side_bar.dart b/lib/compenents/side_bar.dart index aca69e3..36ba8e4 100644 --- a/lib/compenents/side_bar.dart +++ b/lib/compenents/side_bar.dart @@ -1,76 +1,21 @@ -import 'package:app/compenents/side_box.dart'; -import 'package:app/data/data.dart'; +import 'package:app/compenents/side_boxes.dart'; +import 'package:app/data/ui_provider.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import '../screens/article_list_screen.dart'; - class SideBar extends StatelessWidget { const SideBar({Key? key}) : super(key: key); - @override Widget build(BuildContext context) { - bool isClicked = false; - bool providerIsClicked = Provider.of(context).isOpened; - Widget unOpenedBoxes = GestureDetector( - onTap: () { - if (Provider.of(context, listen: false).isOpened == false) { - isClicked = true; - } else { - isClicked = false; - } - Provider.of(context, listen: false).changeIsOpened(isClicked); - }, - child: Column(children: [ - SideBox( - onTap: () { - if (Provider.of(context, listen: false).isOpened == false) { - isClicked = true; - } else { - isClicked = false; - } - Provider.of(context, listen: false) - .changeIsOpened(isClicked); - }, - boxColor: const Color(0xFF4200CF), - icon: Icons.home, - iconColor: Colors.white, - title: "Home", - titleColor: Colors.white, - ), - SideBox( - onTap: (() => Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const ArticleListScreen()))), - icon: Icons.article, - title: "Article", - ), - const SideBox( - icon: Icons.login, - title: "Login", - ), - const SideBox( - icon: Icons.event, - title: "Events", - ), - const SideBox( - icon: Icons.image, - title: "Gallery", - ), - const SideBox( - icon: Icons.info, - title: "About us", - ) - ])); + bool uiProvider = Provider.of(context).isClicked; final double width = MediaQuery.of(context).size.width; final double height = MediaQuery.of(context).size.height; return AnimatedContainer( duration: const Duration(milliseconds: 150), - width: providerIsClicked ? width / 2.3 : 65, + width: uiProvider ? width / 2.3 : 65, height: height, child: Container( height: height, @@ -85,7 +30,7 @@ class SideBar extends StatelessWidget { bottomRight: Radius.circular(20.0), ), color: Color(0xFF880000)), - child: unOpenedBoxes, + child: const SideBoxesColumn(), ), ); } diff --git a/lib/compenents/side_boxes.dart b/lib/compenents/side_boxes.dart new file mode 100644 index 0000000..0134c5b --- /dev/null +++ b/lib/compenents/side_boxes.dart @@ -0,0 +1,52 @@ +import 'package:app/compenents/side_box.dart'; +import 'package:app/data/ui_provider.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; + +import '../screens/article_list_view_screen.dart'; +import '../screens/course_list_view_screen.dart'; + +class SideBoxesColumn extends StatelessWidget { + const SideBoxesColumn({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final uiProvider = Provider.of(context); + return Column(children: [ + SideBox( + onTap: () { + uiProvider.toggleSideBar(); + }, + boxColor: const Color(0xFF4200CF), + icon: Icons.home, + iconColor: Colors.white, + title: "Home", + titleColor: Colors.white, + ), + SideBox( + onTap: (() => Navigator.push(context, + MaterialPageRoute(builder: (context) => const ArticleListView()))), + icon: Icons.article, + title: "Article", + ), + SideBox( + onTap: (() => Navigator.push(context, + MaterialPageRoute(builder: (context) => const CourseListView()))), + icon: Icons.monitor, + title: "Courses", + ), + const SideBox( + icon: Icons.event, + title: "Events", + ), + const SideBox( + icon: Icons.login, + title: "Login", + ), + const SideBox( + icon: Icons.info, + title: "About us", + ) + ]); + } +} diff --git a/lib/data/article.dart b/lib/data/article.dart index 4f744f3..7520ab7 100644 --- a/lib/data/article.dart +++ b/lib/data/article.dart @@ -1,6 +1,32 @@ +// id": 12, +// "attributes": { +// "image": "https://t1.gstatic.com/images?q=tbn:ANd9GcQ_BAUrAe-b1xfenJnMF7T8IgPYDzFDwRLHgGly8LBsOBzgQtTi", +// "author": "Amr Mahdy", +// "content": "For those who are interested in technology and seek to be special in their future career, computer vision is a field of computer science that works on enabling computers to see, identify and process images in the same way that human vision does, and then provide the appropriate output.\nIt is like imparting human intelligence and instincts to a computer. Though in reality, it is a difficult task to enable computers to recognize images of different objects\nComputer vision and image recognition are integral parts of artificial intelligence (AI), which has quickly gone from niche to mainstream in the past few years.\nAnd now we can see its applications increase everywhere such as self-driving cars and Digital- Signage.\nSimply Computer vision is the science and technology of machines that see their future of Engineering and software developers.", +// "createdAt": "2022-03-25T16:14:49.259Z", +// "updatedAt": "2022-03-25T16:14:52.519Z", +// "publishedAt": "2022-03-25T16:14:52.516Z" + class Article { + final int? id; final String title; final String imageUrl; final String date; - const Article(this.title, this.date, this.imageUrl); + final String? content; + const Article( + {required this.title, + required this.date, + required this.imageUrl, + this.content, + this.id}); + + factory Article.fromJson(Map json) { + Article article = Article( + id: json['id'], + title: json['attributes']['author'], + date: json['attributes']["publishedAt"], + imageUrl: json['attributes']["image"], + content: json['attributes']["content"]); + return article; + } } diff --git a/lib/data/articles_provider.dart b/lib/data/articles_provider.dart new file mode 100644 index 0000000..a5d9592 --- /dev/null +++ b/lib/data/articles_provider.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; + +import 'article.dart'; + +class ArticlesProvider with ChangeNotifier { + final List
_articles = const [ + Article( + id: 0, + title: "Smart Cars", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupiArticlesProvidert non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + imageUrl: + 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg', + date: "12/12/2012"), + ]; + + List
get articles { + return _articles; + } +} diff --git a/lib/data/course.dart b/lib/data/course.dart new file mode 100644 index 0000000..fe695e3 --- /dev/null +++ b/lib/data/course.dart @@ -0,0 +1,13 @@ +class Course { + final String? title; + final String? imageUrl; + final String? courseContent; + final String? courseDescription; + final String? date; + Course( + {this.date, + this.title, + this.imageUrl, + this.courseContent, + this.courseDescription}); +} diff --git a/lib/data/courses_provider.dart b/lib/data/courses_provider.dart new file mode 100644 index 0000000..5eef82f --- /dev/null +++ b/lib/data/courses_provider.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; + +import 'course.dart'; + +class CoursesProvider with ChangeNotifier { + final List _courses = [ + Course( + title: 'EMBEDDED ARM', + imageUrl: + 'https://res.cloudinary.com/rs-designspark-live/image/upload/c_limit,w_595/f_auto/v1/article/What_is_an_embedded_system_9973b860b8142db0b5b4290e405d38cadb0cc242', + date: "20/12/2012"), + Course( + title: 'EMBEDDED ARM', + imageUrl: + 'https://res.cloudinary.com/rs-designspark-live/image/upload/c_limit,w_595/f_auto/v1/article/What_is_an_embedded_system_9973b860b8142db0b5b4290e405d38cadb0cc242', + date: "20/12/2012"), + Course( + title: 'EMBEDDED ARM', + imageUrl: + 'https://res.cloudinary.com/rs-designspark-live/image/upload/c_limit,w_595/f_auto/v1/article/What_is_an_embedded_system_9973b860b8142db0b5b4290e405d38cadb0cc242', + date: "20/12/2012"), + Course( + title: 'EMBEDDED ARM', + imageUrl: + 'https://res.cloudinary.com/rs-designspark-live/image/upload/c_limit,w_595/f_auto/v1/article/What_is_an_embedded_system_9973b860b8142db0b5b4290e405d38cadb0cc242', + date: "20/12/2012"), + Course( + title: 'EMBEDDED ARM', + imageUrl: + 'https://res.cloudinary.com/rs-designspark-live/image/upload/c_limit,w_595/f_auto/v1/article/What_is_an_embedded_system_9973b860b8142db0b5b4290e405d38cadb0cc242', + date: "20/12/2012") + ]; + + List get courses { + return _courses; + } +} diff --git a/lib/data/data.dart b/lib/data/data.dart deleted file mode 100644 index 73d5078..0000000 --- a/lib/data/data.dart +++ /dev/null @@ -1,10 +0,0 @@ -import 'package:flutter/cupertino.dart'; - -class Data extends ChangeNotifier { - bool isOpened = false; - - void changeIsOpened(bool isClicked) { - isOpened = isClicked; - notifyListeners(); - } -} diff --git a/lib/data/state_enums.dart b/lib/data/state_enums.dart new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/lib/data/state_enums.dart @@ -0,0 +1 @@ + diff --git a/lib/data/ui_provider.dart b/lib/data/ui_provider.dart new file mode 100644 index 0000000..c529f3a --- /dev/null +++ b/lib/data/ui_provider.dart @@ -0,0 +1,13 @@ +import 'package:flutter/material.dart'; + +class UiProvider with ChangeNotifier { + bool _isClicked = false; + bool get isClicked { + return _isClicked; + } + + void toggleSideBar() { + _isClicked = !_isClicked; + notifyListeners(); + } +} diff --git a/lib/main.dart b/lib/main.dart index 888b406..621b4ab 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,8 +1,10 @@ +import 'package:app/data/ui_provider.dart'; import 'package:app/screens/home_screen.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import 'data/data.dart'; +import 'data/articles_provider.dart'; +import 'data/courses_provider.dart'; void main() { runApp(const MyApp()); @@ -13,12 +15,23 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return ChangeNotifierProvider( - create: (context) => Data(), - child: Consumer( - builder: (context, value, child) => const MaterialApp( - debugShowCheckedModeBanner: false, - home: MyHomePage(), + return MultiProvider( + providers: [ + ChangeNotifierProvider( + create: (_) => UiProvider(), + ), + ChangeNotifierProvider( + create: (_) => ArticlesProvider(), + ), + ChangeNotifierProvider( + create: (_) => CoursesProvider(), + ), + ], + child: const MaterialApp( + debugShowCheckedModeBanner: false, + home: Scaffold( + backgroundColor: Colors.black, + body: MyHomePage(), ), ), ); diff --git a/lib/presentaion/screens/Article.dart b/lib/presentaion/screens/Article.dart deleted file mode 100644 index 226250e..0000000 --- a/lib/presentaion/screens/Article.dart +++ /dev/null @@ -1,7 +0,0 @@ -class Article { - List content; - String title; - String imageUrl; - - Article(this.content, this.title, this.imageUrl); -} diff --git a/lib/presentaion/screens/articles_details.dart b/lib/presentaion/screens/articles_details.dart deleted file mode 100644 index 2e004ce..0000000 --- a/lib/presentaion/screens/articles_details.dart +++ /dev/null @@ -1,96 +0,0 @@ -import 'Article.dart'; -import 'package:flutter/material.dart'; - -void main() => runApp(MaterialApp(home: ArticleDetails())); - -class ArticleDetails extends StatefulWidget { - @override - State createState() => _ArticleDetailsState(); -} - -/* -Data Reterived from the database related to the article page -1- Image URL -2- Title -3- List of paragraphs ->content of the article -*/ - -List content = [ - "The hardest thing about driving is parking. For many drivers, especially the beginners, the size of the parking spot isn't big enough for the vehicle. Minimizing the vehicle's size can't be the best solutions for all car types, but Mercedes-Benz has found the solution for this by providing smart cars and vehicles with an auto parking feature.", - "Smart cars have a long history began when the maker of swatch a famous brand of watches in the nineteenth - thought about apply the idea of his watches to develop in the automotive industry. He cooperated with Daimler-Benz AG, the makers of Mercedes-Benz to share his development of the new city car. The smart car called then (Smart Fortwo Electric Drive) because of its design of the two-door car.", - "The powerful features like the design, the affordable cost, and technology of this type of cars have captured people’s minds.The design is a fusion between urban and modern design. Also, the interior is surprisingly spacious although it has only two doors. So it is the best choice for people who like small and stylish cars. Now smart cars service the future vision of the style of the smart modern cities." -]; - -Article article = Article(content, "Smart Cars", "assets/smart-car.jpg"); - -class _ArticleDetailsState extends State { - @override - Widget build(BuildContext context) { - return Scaffold( - body: Scrollbar( - thickness: 2, - child: SingleChildScrollView( - child: Column( - children: [ - Stack( - children: [ - Opacity( - opacity: 0.8, - child: Image( - image: AssetImage(article.imageUrl), - height: 500, - fit: BoxFit.fill, - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - IconButton( - onPressed: () {}, - icon: Icon(Icons.arrow_back_ios), - color: Color(0xffBA0C2F), - iconSize: 30, - ), - SizedBox(height: 350), - Text( - article.title, - style: TextStyle( - fontSize: 30, - color: Color(0xffBA0C2F), - fontWeight: FontWeight.bold, - ), - ), - Center( - child: IconButton( - onPressed: () {}, - icon: Icon(Icons.keyboard_arrow_down), - iconSize: 30, - color: Color(0xffffffff), - ), - ), - ], - ), - ), - ], - ), - Container( - padding: EdgeInsets.fromLTRB(30, 15, 30, 15), - child: Text( - //content.map((p) => p + "\n\n").toString(), - article.content.join("\n\n"), - style: TextStyle( - fontSize: 16.0, - ), - overflow: TextOverflow.clip, - ), - ), - ], - ), - ), - ), - ); - } -} diff --git a/lib/screens/article_list_screen.dart b/lib/screens/article_list_view_screen.dart similarity index 71% rename from lib/screens/article_list_screen.dart rename to lib/screens/article_list_view_screen.dart index 4b5a608..39d5370 100644 --- a/lib/screens/article_list_screen.dart +++ b/lib/screens/article_list_view_screen.dart @@ -1,10 +1,14 @@ -import 'package:app/compenents/article_list.dart'; +import 'package:app/compenents/list_view.dart'; +import 'package:app/data/articles_provider.dart'; import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; import '../compenents/tab.dart'; -class ArticleListScreen extends StatelessWidget { - const ArticleListScreen({Key? key}) : super(key: key); +// ignore: must_be_immutable +class ArticleListView extends StatelessWidget { + const ArticleListView({Key? key}) : super(key: key); + TabBar get _tabBar => const TabBar( indicatorColor: Color(0xFFBA0C2F), tabs: [ @@ -16,37 +20,31 @@ class ArticleListScreen extends StatelessWidget { @override Widget build(BuildContext context) { + final articlesProvider = Provider.of(context); return DefaultTabController( length: 3, child: Scaffold( - backgroundColor: Colors.white, appBar: AppBar( - bottom: PreferredSize( - preferredSize: _tabBar.preferredSize, - child: ColoredBox( - color: Colors.black, - child: _tabBar, - ), - ), - elevation: 0, - leadingWidth: 0, - centerTitle: false, - backgroundColor: Colors.black, - title: Container( - padding: const EdgeInsets.only(top: 15.0), - child: const Text( + bottom: _tabBar, + backgroundColor: Colors.black, + centerTitle: false, + title: const Text( "Articles", style: TextStyle( fontSize: 28, color: Color(0xFFBA0C2F), fontWeight: FontWeight.bold), - ), - ), - ), + )), body: TabBarView(children: [ - ArticleListView(), - ArticleListView(), - ArticleListView(), + IeeeListView( + items: articlesProvider.articles, + ), + IeeeListView( + items: articlesProvider.articles, + ), + IeeeListView( + items: articlesProvider.articles, + ), ]), ), ); diff --git a/lib/screens/articles_details.dart b/lib/screens/articles_details.dart new file mode 100644 index 0000000..0bbf43f --- /dev/null +++ b/lib/screens/articles_details.dart @@ -0,0 +1,95 @@ +import '../data/article.dart'; +import 'package:flutter/material.dart'; + +void main() => runApp(MaterialApp(home: ArticleDetails())); + +// ignore: must_be_immutable +class ArticleDetails extends StatelessWidget { +/* +Data Reterived from the database related to the article page +1- Image URL +2- Title +3- List of paragraphs ->content of the article +*/ + + Article article = const Article( + title: "Smart Cars", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + imageUrl: + 'https://sscsalex.org/static/0d35d923e6ed1f15aa24de4f36c4818a/f211f/5eb8b1b08f25030017183661.jpg', + date: "12/12/2012"); + + ArticleDetails({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + extendBodyBehindAppBar: true, + appBar: AppBar( + backgroundColor: Colors.transparent, + elevation: 0, + ), + backgroundColor: Colors.black, + body: Scrollbar( + thickness: 2, + child: SingleChildScrollView( + child: Column( + children: [ + Stack( + children: [ + const Opacity( + opacity: 0.8, + child: Image( + image: AssetImage('assets/article_image.png'), + height: 500, + fit: BoxFit.fill, + ), + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + const SizedBox(height: 350), + Text( + article.title, + style: const TextStyle( + fontSize: 30, + color: Color(0xffBA0C2F), + fontWeight: FontWeight.bold, + ), + ), + Center( + child: IconButton( + onPressed: () {}, + icon: const Icon(Icons.keyboard_arrow_down), + iconSize: 30, + color: const Color(0xffffffff), + ), + ), + ], + ), + ), + ], + ), + Container( + padding: const EdgeInsets.fromLTRB(30, 15, 30, 15), + child: Text( + //content.map((p) => p + "\n\n").toString(), + "${article.content}", + style: const TextStyle( + color: Colors.white, + fontSize: 30.0, + fontWeight: FontWeight.bold), + overflow: TextOverflow.clip, + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/screens/course_details.dart b/lib/screens/course_details.dart new file mode 100644 index 0000000..d9d64df --- /dev/null +++ b/lib/screens/course_details.dart @@ -0,0 +1,161 @@ +import 'package:flutter/material.dart'; + +class CourseDetailsScreen extends StatelessWidget { + const CourseDetailsScreen({Key? key}) : super(key: key); + @override + Widget build(BuildContext context) { + return Scaffold( + extendBodyBehindAppBar: true, + appBar: AppBar( + elevation: 0, + backgroundColor: Colors.transparent, + ), + backgroundColor: Colors.black, + body: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox( + height: 48, + ), + Container( + width: 360, + height: 86, + decoration: const BoxDecoration( + color: Colors.black, + ), + child: const Text( + 'Data Structures &\nAlgorithms', + textAlign: TextAlign.center, + style: TextStyle( + fontFamily: 'Poppins', + color: Color(0xFFBA0C2F), + fontSize: 28, + fontWeight: FontWeight.bold), + ), + ), + const SizedBox( + height: 24, + ), + const Center( + child: Image( + image: AssetImage('assets/article_image.png'), + alignment: Alignment.center, + ), + ), + const SizedBox( + height: 23, + ), + Container( + width: 360, + // height: 86, + decoration: const BoxDecoration( + color: Colors.black, + ), + padding: const EdgeInsets.only(left: 28), + child: const Text( + 'Description', + textAlign: TextAlign.start, + style: TextStyle( + fontFamily: 'Poppins', + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold), + ), + ), + Container( + width: 296, + margin: const EdgeInsets.only(left: 32), + decoration: const BoxDecoration( + color: Colors.black, + ), + child: RichText( + text: const TextSpan( + style: TextStyle(fontFamily: 'Poppins'), + // text: + // 'Data Structure is a way of collecting and organising data in such a way that we can perform operations on these data in an effective way. Data Structures is about rendering data elements in terms of some relationship, for better organization and storage. An algorithm is a finite set of instructions or logic, written in order to accomplish a certain predefined task. Algorithm is not the complete code or program, it is just the core logic(solution) of a problem, which can be expressed either as an informal high-level description as pseudocode or using a flowchart ', + children: [ + TextSpan( + text: + 'Data Structure is a way of collecting and organising data in such a way that we can perform operations on these data in an effective way. Data Structures is about rendering data elements in terms of some relationship, for better organization and storage. An algorithm is a finite set of instructions or logic, written in order to accomplish a certain predefined task. Algorithm is not the complete code or program, it is just the core logic(solution) of a problem, which can be expressed either as an informal high-level description as pseudocode or using a flowchart.', + style: TextStyle( + fontSize: 11, + height: 1, + )), + TextSpan( + text: '\nContent', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- Complexity analysis + Array + Amortized Complexity\n- Analysis + Dynamic array\n- Linked list (Singly and Doubly)\n- Stack + Queue\n- Sorting algorithms (Selection sort + Insertion sort + Bubble sort + Count sort) + Divide & Conquer (Binary search + Merge sort + Quick sort)\n- Binary tree + recursion\n- Hash Map\n- Heap + Heap sort\n- Graph + Graph traversal (Breadth first search + Depth first search)\n- String + Dynamic programming + Greed', + style: TextStyle(fontSize: 11)), + TextSpan( + text: '\nPrerequisites', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: '\n- Programming in C or C++', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nInstructor', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- Eng. Abo-Elhamd Ali\n- Eng. Mennatallah samier', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nCourse Length', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- The course consists of 7 sessions\n- Each session is 3 hours', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nFees', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: '\n- Members: 110\n- Non-members: 120', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + ], + ), + ), + ), + ], + ), + ), + )); + } +} diff --git a/lib/screens/course_details_screen.dart b/lib/screens/course_details_screen.dart new file mode 100644 index 0000000..38d5e24 --- /dev/null +++ b/lib/screens/course_details_screen.dart @@ -0,0 +1,159 @@ +import 'package:flutter/material.dart'; + +class Home extends StatelessWidget { + const Home({Key? key}) : super(key: key); + static final Route = 'home'; + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + backgroundColor: Colors.black, + body: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 48, + ), + Container( + width: 360, + height: 86, + decoration: BoxDecoration( + color: Colors.black, + ), + child: Text( + 'Data Structures &\nAlgorithms', + textAlign: TextAlign.center, + style: TextStyle( + fontFamily: 'Poppins', + color: Color(0xFFBA0C2F), + fontSize: 28, + fontWeight: FontWeight.bold), + ), + ), + SizedBox( + height: 24, + ), + Center( + child: Image.asset( + 'assets/image.png', + alignment: Alignment.center, + ), + ), + SizedBox( + height: 23, + ), + Container( + width: 360, + // height: 86, + decoration: BoxDecoration( + color: Colors.black, + ), + padding: EdgeInsets.only(left: 28), + child: Text( + 'Description', + textAlign: TextAlign.start, + style: TextStyle( + fontFamily: 'Poppins', + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold), + ), + ), + Container( + width: 296, + margin: EdgeInsets.only(left: 32), + decoration: BoxDecoration( + color: Colors.black, + ), + child: RichText( + text: TextSpan( + style: TextStyle(fontFamily: 'Poppins'), + // text: + // 'Data Structure is a way of collecting and organising data in such a way that we can perform operations on these data in an effective way. Data Structures is about rendering data elements in terms of some relationship, for better organization and storage. An algorithm is a finite set of instructions or logic, written in order to accomplish a certain predefined task. Algorithm is not the complete code or program, it is just the core logic(solution) of a problem, which can be expressed either as an informal high-level description as pseudocode or using a flowchart ', + children: [ + TextSpan( + text: + 'Data Structure is a way of collecting and organising data in such a way that we can perform operations on these data in an effective way. Data Structures is about rendering data elements in terms of some relationship, for better organization and storage. An algorithm is a finite set of instructions or logic, written in order to accomplish a certain predefined task. Algorithm is not the complete code or program, it is just the core logic(solution) of a problem, which can be expressed either as an informal high-level description as pseudocode or using a flowchart.', + style: TextStyle( + fontSize: 11, + height: 1, + )), + TextSpan( + text: '\nContent', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- Complexity analysis + Array + Amortized Complexity\n- Analysis + Dynamic array\n- Linked list (Singly and Doubly)\n- Stack + Queue\n- Sorting algorithms (Selection sort + Insertion sort + Bubble sort + Count sort) + Divide & Conquer (Binary search + Merge sort + Quick sort)\n- Binary tree + recursion\n- Hash Map\n- Heap + Heap sort\n- Graph + Graph traversal (Breadth first search + Depth first search)\n- String + Dynamic programming + Greed', + style: TextStyle(fontSize: 11)), + TextSpan( + text: '\nPrerequisites', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: '\n- Programming in C or C++', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nInstructor', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- Eng. Abo-Elhamd Ali\n- Eng. Mennatallah samier', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nCourse Length', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: + '\n- The course consists of 7 sessions\n- Each session is 3 hours', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + TextSpan( + text: '\nFees', + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 16, + fontWeight: FontWeight.bold, + height: 2)), + TextSpan( + text: '\n- Members: 110\n- Non-members: 120', + style: TextStyle( + color: Colors.white, + fontSize: 11, + )), + ], + ), + ), + ), + ], + ), + ), + )), + ); + } +} diff --git a/lib/screens/course_list_view_screen.dart b/lib/screens/course_list_view_screen.dart new file mode 100644 index 0000000..7a81902 --- /dev/null +++ b/lib/screens/course_list_view_screen.dart @@ -0,0 +1,30 @@ +import 'package:app/compenents/list_view.dart'; +import 'package:app/data/courses_provider.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; + +// ignore: must_be_immutable +class CourseListView extends StatelessWidget { + const CourseListView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final courses = Provider.of(context).courses; + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.black, + centerTitle: false, + title: const Text( + "Courses", + style: TextStyle( + color: Color(0xFFBA0C2F), + fontSize: 28, + fontWeight: FontWeight.bold), + ), + ), + body: IeeeListView( + items: courses, + ), + ); + } +} diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart index 2897d78..f557575 100644 --- a/lib/screens/home_screen.dart +++ b/lib/screens/home_screen.dart @@ -1,56 +1,78 @@ import 'package:app/compenents/side_bar.dart'; +import 'package:app/data/ui_provider.dart'; import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; import '../compenents/home_text.dart'; -class MyHomePage extends StatelessWidget { +// ignore: must_be_immutable +class MyHomePage extends StatefulWidget { const MyHomePage({ Key? key, }) : super(key: key); + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.black, - body: Stack( - children: [ - Center( - child: Container( - padding: const EdgeInsets.only(left: 50.0), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: const [ - HomeText( - title: "I E E E", - ), - HomeText( - title: "S S C S", - color: Color(0xffBA1B1B), - ), - HomeText( - title: "Alex S C", - ), - SizedBox( - height: 15, - ), - HomeText( - title: "Providing the future electronics enginners", - size: 12, - color: Colors.grey, - weight: FontWeight.normal, - ), - HomeText( - title: "with the knowledge and skills they need", - size: 12, - color: Colors.grey, - weight: FontWeight.normal, - ) - ]), + final uiProvider = Provider.of(context); + final sideBarStatus = uiProvider.isClicked; + return WillPopScope( + onWillPop: () async { + if (sideBarStatus == true) { + uiProvider.toggleSideBar(); + return false; + } else { + return true; + } + }, + child: GestureDetector( + onTap: () { + uiProvider.toggleSideBar(); + }, + child: Stack( + children: [ + Center( + child: Container( + padding: const EdgeInsets.only(left: 50.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + HomeText( + title: "I E E E", + ), + HomeText( + title: "S S C S", + color: Color(0xffBA1B1B), + ), + HomeText( + title: "Alex S C", + ), + SizedBox( + height: 15, + ), + HomeText( + title: "Providing the future electronics enginners", + size: 12, + color: Colors.grey, + weight: FontWeight.normal, + ), + HomeText( + title: "with the knowledge and skills they need", + size: 12, + color: Colors.grey, + weight: FontWeight.normal, + ) + ]), + ), ), - ), - const SideBar(), - ], + const SideBar(), + ], + ), ), ); }