Added Light/Dark Theme and UI improved

insfirred · Sep 11, 2022 · ba5c61d · ba5c61d
1 parent db968a2
commit ba5c61d
Show file tree

Hide file tree

Showing 23 changed files with 107 additions and 1,058 deletions.
diff --git a/lib/Screens/bookmarks.dart b/lib/Screens/bookmarks.dart
@@ -1,12 +1,10 @@
-import 'dart:developer';
-
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
-import 'package:inshorts_clone/Screens/newsList.dart';
 import 'package:inshorts_clone/database/database.dart';
-import 'package:sqflite/sqflite.dart';
 import 'package:url_launcher/url_launcher.dart';
 
+import '../theme/theme.dart';
+
 class Bookmarks extends StatefulWidget {
   Bookmarks({Key? key}) : super(key: key);
 
@@ -36,15 +34,17 @@ class _BookmarksState extends State<Bookmarks> {
   Widget NewsTile(int index){
     int len = list.length;
     int newIndex = len-index-1 ;
+    TextTheme _textTheme = Theme.of(context).textTheme;
 
     return Padding(
-      padding: EdgeInsets.fromLTRB(25, 40, 25, 20),
+      padding: EdgeInsets.fromLTRB(25, 30, 25, 0),
       child: Container(
         decoration: BoxDecoration(
-          color: Color.fromARGB(255, 217, 216, 212),
+          // color:  Color.fromARGB(255, 70, 66, 66),
+          color: Theme.of(context).primaryColor,
           borderRadius: BorderRadius.circular(20),
         ),
-        padding: EdgeInsets.fromLTRB(20,5,20,25),
+        padding: EdgeInsets.fromLTRB(20,5,20,20),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -56,18 +56,44 @@ class _BookmarksState extends State<Bookmarks> {
                     int i = await DatabaseClass.instance.delete(list[newIndex]['url']);
                     displayNews();
                   },
-                  icon: const FaIcon(FontAwesomeIcons.trash)
+                  icon: const FaIcon(FontAwesomeIcons.trash,size: 20)
                 ),
+                // IconTheme(
+                //   data: _iconTheme,
+                //   child: IconButton(
+                //   onPressed: () async{
+                //     int i = await DatabaseClass.instance.delete(list[newIndex]['url']);
+                //     displayNews();
+                //   },
+                //   icon: const FaIcon(FontAwesomeIcons.trash,)
+                // ),
+                // )
               ],
             ),
-            Text( list[newIndex]['title']  ,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
-            SizedBox(height: 10,),
-            Text( list[newIndex]['_id'].toString()  ,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
-            SizedBox(height: 10,),
-            Text( list[newIndex]['_description']  ,style: TextStyle(color: Colors.grey[600], fontSize: 17),),
-            SizedBox(height: 10,),
-            Text( list[newIndex]['date']  ,style: TextStyle(color: Colors.grey, fontSize: 16,fontStyle: FontStyle.italic),),
-            SizedBox(height: 10,),
+            Text( list[newIndex]['title']  ,style: _textTheme.headline6),
+            const SizedBox(height: 10,),
+            // Text( list[newIndex]['_id'].toString()  ,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
+            // const SizedBox(height: 10,),
+            // Text( list[newIndex]['_description']  ,style: const TextStyle(
+              // color: Colors.grey[600],
+              // fontSize: 17)
+            // ),
+            // const SizedBox(height: 10,),
+
+            Align(
+              alignment: Alignment.centerRight,
+              child: Text(
+                list[newIndex]['date'],
+                  // style: const TextStyle(
+                  // color: Colors.grey,
+                    // fontSize: 16,
+                    // fontStyle: FontStyle.italic
+                  // )
+                  style: _textTheme.subtitle2,
+              ),
+            ),
+            const SizedBox(height: 10,),
+
             GestureDetector(
               onTap: () async{
                 String url = list[newIndex]['url'];
@@ -91,16 +117,20 @@ class _BookmarksState extends State<Bookmarks> {
 
   @override
   Widget build(BuildContext context) {
-
     if(isLoading){
       return CircularProgressIndicator();
     }
     else{
-
+      TextTheme _textTheme = Theme.of(context).textTheme;
       if(list.length==0){
         return Builder(
           builder: (context) {
-            return const Center(child: Text('Your Saved Bookmarks Will Appear Here...'));
+            return Center(
+              child: Text(
+                'Your Saved Bookmarks Will Appear Here',
+                style: _textTheme.subtitle1,
+              )
+            );
           }
         );
       }

diff --git a/lib/Screens/newsList.dart b/lib/Screens/newsList.dart
@@ -49,8 +49,9 @@ class _NewsListState extends State<NewsList>
           height: MediaQuery.of(context).size.height / 3,
           child: (widget.jsonData["articles"][index]["urlToImage"] != null)
                 ? CachedNetworkImage(
+                  fit: BoxFit.fill,
                     imageUrl: "${widget.jsonData["articles"][index]["urlToImage"]}",
-                    errorWidget: (context, url, error) => Icon(Icons.error),
+                    errorWidget: (context, url, error) => const Icon(Icons.error),
                 )
               : const Image(
                   image: AssetImage('assets/images/unavailable-image.jpg'))),
@@ -60,7 +61,7 @@ class _NewsListState extends State<NewsList>
   List<Map<String,dynamic>> list = [];
 
   Widget NewsDetails(index) {
-
+    TextTheme _textTheme = Theme.of(context).textTheme;
     return Expanded(
         child: Container(
       padding: EdgeInsets.all(15),
@@ -82,23 +83,23 @@ class _NewsListState extends State<NewsList>
                 }
 
                 if(isPresent){
-                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(duration: Duration(milliseconds: 800),content: Text("Already present in Bookmarks")));
+                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(duration: Duration(milliseconds: 800),content: Text("Already present in Bookmarks")));
                 }
                 else{
                   int i = await DatabaseClass.instance.create(
                     {
                       ColumnFields.title: widget.jsonData["articles"][index]["title"],
                       ColumnFields.description: (widget.jsonData["articles"][index]["content"] != null) ?widget.jsonData["articles"][index]["content"] :"",
-                      ColumnFields.date: 'Published at: ${dateFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}',
+                      ColumnFields.date: '${dateFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}',
                       ColumnFields.url: (widget.jsonData["articles"][index]["url"] != null) ?widget.jsonData["articles"][index]["url"] :""
                     }
                   );
                   addedToBookmarks();
                 } 
-
             },
             child: Text(widget.jsonData["articles"][index]["title"],
-                style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
+                // style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
+                style: _textTheme.headline5,
                 ),
           ),
           const SizedBox(height: 10),
@@ -111,13 +112,22 @@ class _NewsListState extends State<NewsList>
                   (widget.jsonData["articles"][index]["content"] != null)
                       ? widget.jsonData["articles"][index]["content"]
                       : "",
-                  style: TextStyle(color: Colors.grey[600], fontSize: 17),
+                  // style: TextStyle(
+                  //   color: Colors.grey[700],
+                  //   fontSize: 17
+                  // ),
+                  style: _textTheme.subtitle1,
                   textAlign: TextAlign.justify,
                 ),
                 const SizedBox(height: 30),
                 Text(
                   'Published at: ${dateFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}',
-                  style: const TextStyle(color: Colors.grey, fontSize: 14,fontStyle: FontStyle.italic),
+                  // style: const TextStyle(
+                  //   color: Colors.grey,
+                  //   fontSize: 14,
+                  //   fontStyle: FontStyle.italic
+                  // ),
+                  style: _textTheme.subtitle2,
                   textAlign: TextAlign.justify,
                 ),
               ],

diff --git a/lib/Screens/waitingScreen.dart b/lib/Screens/waitingScreen.dart
@@ -20,7 +20,7 @@ class _WaitingScreenState extends State<WaitingScreen> {
           SizedBox(height: 15),
           Icon(FontAwesomeIcons.mobileScreen,size: 115,),
           SizedBox(height: 50,),
-          Text('Loading Shorts...',style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
+          Text('Loading Shorts...',style: Theme.of(context).textTheme.headline5),
           SizedBox(height: 40,),
           CircularProgressIndicator(color: Colors.grey[600],)
         ],

diff --git a/lib/main.dart b/lib/main.dart
@@ -3,6 +3,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 
 import './HomeScreen.dart';
 import './Screens/gettingStarted.dart';
+import './theme/theme.dart';
 
 Future main() async{
   WidgetsFlutterBinding.ensureInitialized();
@@ -24,10 +25,11 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
-      title: 'Flutter Demo',
+      title: 'News Shorts',
       themeMode: ThemeMode.system,
-      theme: ThemeData.light(),
-      darkTheme: ThemeData.dark(),
+      // theme: ThemeData.light(),
+      theme: lightTheme,
+      darkTheme: darkTheme,
       home: showHome ?HomeScreen() :GettingStarted(),
     );
   }

diff --git a/lib/theme/theme.dart b/lib/theme/theme.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+// Light Theme
+ThemeData lightTheme = ThemeData(
+  scaffoldBackgroundColor: Colors.white,
+
+  textTheme: TextTheme(
+    subtitle1: TextStyle(color: Colors.grey[700],fontSize: 17),
+    subtitle2: const TextStyle(color: Colors.grey,fontSize: 14,fontStyle: FontStyle.italic),
+    headline5: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold,color: Colors.black),
+    headline6: const TextStyle(color: Colors.black)
+  ),
+
+  iconTheme: const IconThemeData(color: Colors.black87),
+
+  primaryColor: Colors.grey[300]
+);
+
+
+// Dark Theme
+ThemeData darkTheme = ThemeData(
+  scaffoldBackgroundColor: Colors.grey[900],
+
+  textTheme: TextTheme(
+    subtitle1: TextStyle(color: Colors.grey[300],fontSize: 17),
+    subtitle2: const TextStyle(color: Colors.grey,fontSize: 14,fontStyle: FontStyle.italic),
+    headline5: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold,color: Colors.white),
+    headline6: const TextStyle(color: Colors.white)
+  ),
+
+  iconTheme: const IconThemeData(color: Colors.white70),
+
+  primaryColor: Colors.grey[800]
+);
diff --git a/windows/.gitignore b/windows/.gitignore
diff --git a/windows/CMakeLists.txt b/windows/CMakeLists.txt