Build WebView and add preserve state on switching

android/app/build.gradle

@@ -47,7 +47,7 @@ android {
         applicationId "com.example.inshorts_clone"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 19
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

lib/HomeScreen.dart

@@ -8,7 +8,8 @@ import './Screens/newsList.dart';
 import './Screens/webView.dart';
 
 class HomeScreen extends StatefulWidget {
-  const HomeScreen({Key? key}) : super(key: key);
+  HomeScreen({Key? key}) : super(key: key);
+  static int newsIndex = 0;
 
   @override
   State<HomeScreen> createState() => _HomeScreenState();
@@ -49,10 +50,14 @@ class _HomeScreenState extends State<HomeScreen> {
             Bookmarks(),
             isNewsFetched ?NewsList(jsonData) :WaitingScreen(),
             // isNewsFetched ?WaitingScreen() :WaitingScreen(),
-            WebView(),
+            isNewsFetched ?WebViewPage(jsonData) :WaitingScreen(),
           ],
         ),
+        // floatingActionButton: FloatingActionButton(
+        //   onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context)=>WebViewPage())),
+        // ),
       ),
+
     );
   }
 }

lib/Screens/newsList.dart

@@ -1,35 +1,59 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:http/http.dart' as http;
 
+import '../HomeScreen.dart';
 import './showImage.dart';
 import '../animation/animation.dart';
 
-class NewsList extends StatelessWidget {
+class NewsList extends StatefulWidget {
   var jsonData;
   NewsList(this.jsonData);
 
+  @override
+  State<NewsList> createState() => _NewsListState();
+}
+
+class _NewsListState extends State<NewsList> with AutomaticKeepAliveClientMixin<NewsList> {
   final DateTime now = DateTime.now();
+
   final timeFormatter = DateFormat('Hms');
+
   final dateFormatter = DateFormat('MMMMd');
 
+  // int newsIndex = 0;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    PageController controller = PageController(initialPage: 0);
+  }
+
+  bool get wantKeepAlive => true;
+
   @override
   Widget build(BuildContext context) {
+    super.build(context);
     return PageView.builder(
+      onPageChanged: (page){
+        HomeScreen.newsIndex = page;
+        print(HomeScreen.newsIndex);
+      },
         scrollDirection: Axis.vertical,
-        itemCount: jsonData["articles"].length,
+        itemCount: widget.jsonData["articles"].length,
         itemBuilder: (context, index) {
           return Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               InkWell(
-                // onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context)=> ShowImage("${jsonData["articles"][index]["urlToImage"]}"))),
                 onTap: () =>
-                  Navigator.push(context, SizeTransition3(ShowImage("${jsonData["articles"][index]["urlToImage"]}"))),
+                  Navigator.push(context, SizeTransition3(ShowImage("${widget.jsonData["articles"][index]["urlToImage"]}"))),
                 child: SizedBox(
                     height: MediaQuery.of(context).size.height / 3,
-                    child: (jsonData["articles"][index]["urlToImage"] != null)
+                    child: (   widget.jsonData["articles"][index]["urlToImage"] != null    )
                         ? Image.network(
-                            "${jsonData["articles"][index]["urlToImage"]}",
+                            "${widget.jsonData["articles"][index]["urlToImage"]}",
                             fit: BoxFit.fill,
                           )
                         : const Image(image: AssetImage('assets/images/unavailable-image.jpg'))
@@ -44,20 +68,20 @@ class NewsList extends StatelessWidget {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      jsonData["articles"][index]["title"],
+                      widget.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"]
+                      (widget.jsonData["articles"][index]["content"] != null)
+                          ? widget.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"]))}',
+                      'Published at: ${dateFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}  ${timeFormatter.format(DateTime.parse(widget.jsonData["articles"][index]["publishedAt"]))}',
                       style: TextStyle(color: Colors.grey, fontSize: 16),
                       textAlign: TextAlign.justify,
                     ),

lib/Screens/webView.dart

@@ -1,15 +1,79 @@
+import 'dart:io';
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:webview_flutter/webview_flutter.dart';
 
-class WebView extends StatefulWidget {
-  const WebView({Key? key}) : super(key: key);
+import '../HomeScreen.dart';
+
+import './newsList.dart';
+
+class WebViewPage extends StatefulWidget {
+  // const WebViewPage({Key? key}) : super(key: key);
+  var jsonData;
+  WebViewPage(this.jsonData);
 
   @override
-  State<WebView> createState() => _WebViewState();
+  State<WebViewPage> createState() => _WebViewPageState(jsonData);
 }
 
-class _WebViewState extends State<WebView> {
+class _WebViewPageState extends State<WebViewPage> {
+  var jsonData;
+  _WebViewPageState(this.jsonData);
+
+  void action(String choice) {
+    print('Working...');
+  }
+
   @override
+  void initState() {
+    super.initState();
+    if (Platform.isAndroid) WebView.platform = AndroidWebView();
+  }
+
+  Widget TopBar() {
+    return Container(
+        color: Colors.black,
+        width: MediaQuery.of(context).size.width,
+        height: 35,
+        child: Align(
+          alignment: Alignment.centerRight,
+          child: PopupMenuButton<String>(
+              onSelected: action,
+              itemBuilder: (context) {
+                return PopUpMenuData.Menu.map((String choice) {
+                  return PopupMenuItem<String>(
+                    value: choice,
+                    child: Text(choice),
+                  );
+                }).toList();
+              }),
+        ));
+  }
+
   Widget build(BuildContext context) {
-    return Center(child: Text('WebView'),);
+    return Scaffold(
+      body: Column(
+        children: [
+          TopBar(),
+          Expanded(
+            child: WebView(
+              // initialUrl: jsonData["articles"][0]["url"],
+              initialUrl: jsonData["articles"][HomeScreen.newsIndex]["url"],
+              javascriptMode: JavascriptMode.unrestricted,
+            ),
+          ),
+        ],
+      ),
+    );
   }
-}
+}
+
+class PopUpMenuData {
+  static const String copyLink = 'Copy link';
+  static const String browser = 'Open in browser';
+
+  static const List<String> Menu = <String>[
+    copyLink,
+    browser,
+  ];
+}

pubspec.lock

@@ -137,6 +137,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.1"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.2"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -198,5 +205,34 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.2"
+  webview_flutter:
+    dependency: "direct main"
+    description:
+      name: webview_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.4"
+  webview_flutter_android:
+    dependency: transitive
+    description:
+      name: webview_flutter_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.8.11"
+  webview_flutter_platform_interface:
+    dependency: transitive
+    description:
+      name: webview_flutter_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.9.1"
+  webview_flutter_wkwebview:
+    dependency: transitive
+    description:
+      name: webview_flutter_wkwebview
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.8.1"
 sdks:
   dart: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"

pubspec.yaml

@@ -37,6 +37,7 @@ dependencies:
   http: ^0.13.4
   intl: ^0.17.0
   font_awesome_flutter: ^10.1.0
+  webview_flutter: ^3.0.4
 
 dev_dependencies:
   flutter_test: