Improve UI and Added feature to see Image when clicked

android/app/src/main/AndroidManifest.xml

@@ -31,4 +31,5 @@
             android:name="flutterEmbedding"
             android:value="2" />
     </application>
+    <uses-permission android:name="android.permission.INTERNET" /> 
 </manifest>

lib/HomeScreen.dart

@@ -15,8 +15,7 @@ class HomeScreen extends StatefulWidget {
 }
 
 class _HomeScreenState extends State<HomeScreen> {
-
-  var controller = PageController(initialPage: 1);
+  late PageController controller;
 
   String url = "https://newsapi.org/v2/top-headlines?country=in&category=science&apiKey=ff7aefdd16e6480faf2817f36e2daa5e";
 
@@ -35,9 +34,9 @@ class _HomeScreenState extends State<HomeScreen> {
   }
 
   @override
-
   void initState() {
     super.initState();
+    controller = PageController(initialPage: 1);
     fetchNews();
   }
 
@@ -53,10 +52,6 @@ class _HomeScreenState extends State<HomeScreen> {
             WebView(),
           ],
         ),
-        // floatingActionButton: FloatingActionButton(
-        //   onPressed: ()=> fetchNews(),
-        //   child: Icon(Icons.search),
-        // ),
       ),
     );
   }

lib/Screens/newsList.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 
+import './showImage.dart';
+import '../animation/animation.dart';
+
 class NewsList extends StatelessWidget {
-
   var jsonData;
   NewsList(this.jsonData);
 
@@ -19,50 +21,57 @@ class NewsList extends StatelessWidget {
           return Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Container(
-                height: MediaQuery.of(context).size.height / 3,
-                color: Colors.amber,
-                // child: Image(
-                //     fit: BoxFit.fill,
-                //     image: AssetImage('assets/images/img.png')
-                //     image: NetworkImage,
-                //   ),
-                child: Image.network("${jsonData["articles"][index]["urlToImage"]}", fit: BoxFit.fill,),
+              InkWell(
+                // onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context)=> ShowImage("${jsonData["articles"][index]["urlToImage"]}"))),
+                onTap: () =>
+                  Navigator.push(context, SizeTransition3(ShowImage("${jsonData["articles"][index]["urlToImage"]}"))),
+                child: SizedBox(
+                    height: MediaQuery.of(context).size.height / 3,
+                    child: (jsonData["articles"][index]["urlToImage"] != null)
+                        ? Image.network(
+                            "${jsonData["articles"][index]["urlToImage"]}",
+                            fit: BoxFit.fill,
+                          )
+                        : const Image(image: AssetImage('assets/images/unavailable-image.jpg'))
+                ),
               ),
               Expanded(
-                  child: Container(
-                    padding: EdgeInsets.all(15),
-                    decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(18)),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                            jsonData["articles"][index]["title"],
-                            style: TextStyle(fontSize: 25),
-                            textAlign: TextAlign.justify),
-                        const SizedBox(height: 10),
-                        Text(
-                          (jsonData["articles"][index]["content"] != null) ?jsonData["articles"][index]["content"] :"",
-                          style: TextStyle(
-                              color: Colors.grey[600], fontSize: 17),
-                          textAlign: TextAlign.justify,
-                        ),
-                        SizedBox(height: 15),
-                        Text(
-                          'Published at: ${dateFormatter.format( DateTime.parse(jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format( DateTime.parse(jsonData["articles"][index]["publishedAt"]))}',
-                          style: TextStyle(color: Colors.grey, fontSize: 16),
-                          textAlign: TextAlign.justify,
-                        ),
-                        SizedBox(height: 20,),
-                        Text(
-                          'swipe left for more info.',
-                          style: TextStyle(color: Colors.grey, fontSize: 14),
-                          textAlign: TextAlign.justify,
-                        ),
-                      ],
+                child: Container(
+                padding: EdgeInsets.all(15),
+                decoration:
+                    BoxDecoration(borderRadius: BorderRadius.circular(18)),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      jsonData["articles"][index]["title"],
+                        style: TextStyle(fontSize: 25),
+                        textAlign: TextAlign.justify),
+                    const SizedBox(height: 10),
+                    Text(
+                      (jsonData["articles"][index]["content"] != null)
+                          ? jsonData["articles"][index]["content"]
+                          : "",
+                      style: TextStyle(color: Colors.grey[600], fontSize: 17),
+                      textAlign: TextAlign.justify,
+                    ),
+                    SizedBox(height: 15),
+                    Text(
+                      'Published at: ${dateFormatter.format(DateTime.parse(jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format(DateTime.parse(jsonData["articles"][index]["publishedAt"]))}',
+                      style: TextStyle(color: Colors.grey, fontSize: 16),
+                      textAlign: TextAlign.justify,
+                    ),
+                    SizedBox(
+                      height: 20,
+                    ),
+                    Text(
+                      'swipe left for more info.',
+                      style: TextStyle(color: Colors.grey, fontSize: 14),
+                      textAlign: TextAlign.justify,
                     ),
-                  ))
+                  ],
+                ),
+              ))
             ],
           );
         });

lib/Screens/showImage.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+class ShowImage extends StatelessWidget {
+  String url;
+  ShowImage(this.url);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: (url != "null")
+        ?Center(child: Image.network(url))
+        :Center(child: Text("Image Unavailable !",style: TextStyle(color: Colors.white),)),
+    );
+  }
+}

lib/Screens/waitingScreen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 
 class WaitingScreen extends StatefulWidget {
   const WaitingScreen({Key? key}) : super(key: key);
@@ -16,7 +17,7 @@ class _WaitingScreenState extends State<WaitingScreen> {
         Icon(Icons.cloud_outlined,size: 150,),
         Icon(Icons.arrow_downward_rounded,size: 65,),
         SizedBox(height: 15),
-        Icon(Icons.mobile_friendly_rounded,size: 130,),
+        Icon(FontAwesomeIcons.mobileScreen,size: 115,),
         SizedBox(height: 50,),
         Text('Loading Shorts...',style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
         SizedBox(height: 40,),

lib/animation/animation.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class SizeTransition3 extends PageRouteBuilder {
+  final Widget page;
+
+  SizeTransition3(this.page)
+      : super(
+          pageBuilder: (context, animation, anotherAnimation) => page,
+          transitionDuration: Duration(milliseconds: 1000),
+          reverseTransitionDuration: Duration(milliseconds: 200),
+          transitionsBuilder: (context, animation, anotherAnimation, child) {
+            animation = CurvedAnimation(
+                curve: Curves.fastLinearToSlowEaseIn,
+                parent: animation,
+                reverseCurve: Curves.fastOutSlowIn);
+            return Align(
+              alignment: Alignment.center,
+              child: SizeTransition(
+                axis: Axis.horizontal,
+                sizeFactor: animation,
+                child: page,
+                axisAlignment: 0,
+              ),
+            );
+          },
+        );
+
+}

lib/main.dart

@@ -3,11 +3,14 @@ import 'package:flutter/material.dart';
 import './HomeScreen.dart';
 
 void main() {
-  runApp(MaterialApp(
+  runApp(
+    MaterialApp(
+      debugShowCheckedModeBanner: false,
       title: 'Flutter Demo',
       themeMode: ThemeMode.system,
       theme: ThemeData.light(),
       darkTheme: ThemeData.dark(),
       home: HomeScreen(),
-    ));
+    )
+  );
 }

pubspec.lock

@@ -74,6 +74,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  font_awesome_flutter:
+    dependency: "direct main"
+    description:
+      name: font_awesome_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "10.1.0"
   http:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -36,6 +36,7 @@ dependencies:
   cupertino_icons: ^1.0.2
   http: ^0.13.4
   intl: ^0.17.0
+  font_awesome_flutter: ^10.1.0
 
 dev_dependencies:
   flutter_test:
@@ -62,6 +63,8 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/images/img.png
+    - assets/images/unavailable-image.jpg
+
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see