การใช้งาน WebView แสดงเว็บไซต์ ใน Flutter

// Data models
class Article {
  final String id;
  final String topic;
  final String description;
  final String date;
  final String? image;
  final String url;
  final String view;
  final String? lastvisited;

  Article({
    required this.id,
    required this.topic,
    required this.description,
    required this.date,
    this.image,
    required this.url,    
    required this.view,  
    this.lastvisited,
  });

  // ส่วนของ name constructor ที่จะแปลง json string มาเป็น Article object
  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
      id: json['id'],
      topic: json['topic'],
      description: json['description'],
      date: json['date'],
      image: json['img'],
      url: json['url'],      
      view: json['view'],    
      lastvisited: json['lastvisited'],    
    );
  }

} 

import 'package:flutter/material.dart';
 
class Articles extends StatefulWidget {
    static const routeName = '/articles';

    const Articles({Key? key}) : super(key: key);
 
    @override
    State<StatefulWidget> createState() {
        return _ArticlesState();
    }
}
 
class _ArticlesState extends State<Articles> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Articles'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Articles Screen'),
                    ],
                )
            ),
        );
    }
}

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

import 'article.dart';
import '../models/article_model.dart';
  
class Home extends StatefulWidget {
    static const routeName = '/';
 
    const Home({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
  
class _HomeState extends State<Home> {

    // กำนหดตัวแปรข้อมูล articles
    late Future<List<Article>> articles;
    // ตัว ScrollController สำหรับจัดการการ scroll ใน ListView
    final ScrollController _scrollController = ScrollController();
      
    @override
    void initState() {
      super.initState(); 
      articles = fetchArticle();
    }     
    
    Future<void> _refresh() async {
      setState(() {
        articles = fetchArticle();
      });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
              child: FutureBuilder<List<Article>>( // ชนิดของข้อมูล
                future: articles, // ข้อมูล Future
                builder: (context, snapshot) {
                  // มีข้อมูล และต้องเป็น done ถึงจะแสดงข้อมูล ถ้าไม่ใช่ ก็แสดงตัว loading 
                  if (snapshot.hasData) {
                      bool _visible = false; // กำหนดสถานะการแสดง หรือมองเห็น เป็นไม่แสดง
                      if(snapshot.connectionState == ConnectionState.waiting){ // เมื่อกำลังรอข้อมูล
                        _visible = true; // เปลี่ยนสถานะเป็นแสดง
                      } 
                      if(_scrollController.hasClients){ //เช็คว่ามีตัว widget ที่ scroll ได้หรือไม่ ถ้ามี
                        // เลื่อน scroll มาด้านบนสุด
                      _scrollController.animateTo(0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                      }
                      return Column(
                          children: [
                            Visibility(
                              child: const LinearProgressIndicator(),
                              visible: _visible,
                            ),
                            Container( // สร้างส่วน header ของลิสรายการ
                              padding: const EdgeInsets.all(5.0),
                              decoration: BoxDecoration(
                                color: Colors.orange.withAlpha(100),
                              ),                  
                              child: Row(                  
                                children: [
                                  Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                                ],
                              ),
                            ),
                            Expanded( // ส่วนของลิสรายการ
                                child: snapshot.data!.isNotEmpty // กำหนดเงื่อนไขตรงนี้
                                ? RefreshIndicator(
                                  onRefresh: _refresh,
                                  child: ListView.separated( // กรณีมีรายการ แสดงปกติ
                                        controller: _scrollController, // กำนหนด controller ที่จะใช้งานร่วม
                                        itemCount: snapshot.data!.length,
                                        itemBuilder: (context, index) {
                                          Article article = snapshot.data![index];

                                          Widget card; // สร้างเป็นตัวแปร
                                          card = Card(
                                            margin: const EdgeInsets.all(5.0), // การเยื้องขอบ
                                            child: Column(
                                              children: [
                                                ListTile(
                                                  leading: Image.network(article.image!),
                                                  title: Text(article.topic,
                                                    maxLines: 2,
                                                    overflow: TextOverflow.ellipsis,
                                                  ),
                                                  subtitle: Text('View: ${article.view}'),
                                                  trailing: Icon(Icons.more_vert),
                                                  onTap: (){
                                                    Navigator.push(
                                                      context, 
                                                      MaterialPageRoute(builder: (context) => Articles(),
                                                        settings: RouteSettings(
                                                          arguments: article.url // ส่งค่าไปใน  arguments   
                                                        ),
                                                      ),                                             
                                                    );                                          
                                                  },
                                                ),
                                              ],
                                            )
                                          );
                                          return card;
                                        },
                                        separatorBuilder: (BuildContext context, int index) => const SizedBox(),                    
                                  ),
                                )
                                : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                            ),
                          ],
                        );
                  } else if (snapshot.hasError) { // กรณี error
                    return Text('${snapshot.error}');
                  }
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
                  return const RefreshProgressIndicator();
                },
              ),  
            ),          
        );
    }   

}

// สรัางฟังก์ชั่นดึงข้อมูล คืนค่ากลับมาเป็นข้อมูล Future ประเภท List ของ Article
Future<List<Article>> fetchArticle() async {
  // ทำการดึงข้อมูลจาก server ตาม url ที่กำหนด
  final response = await http
      .get(Uri.parse('https://www.ninenik.com/demo/article_api.php'));

  // เมื่อมีข้อมูลกลับมา
  if (response.statusCode == 200) {
    // ส่งข้อมูลที่เป็น JSON String data ไปทำการแปลง เป็นข้อมูล List<Article
    // โดยใช้คำสั่ง compute ทำงานเบื้องหลัง เรียกใช้ฟังก์ชั่นชื่อ parseArticles
    // ส่งข้อมูล JSON String data ผ่านตัวแปร response.body
    return compute(parseArticles, response.body);
  } else { // กรณี error
    throw Exception('Failed to load article');
  }
}

// ฟังก์ชั่นแปลงข้อมูล JSON String data เป็น เป็นข้อมูล List<Article>
List<Article> parseArticles(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Article>((json) => Article.fromJson(json)).toList();
} 

dependencies:
  webview_flutter: ^2.1.2

import 'package:webview_flutter/webview_flutter.dart';

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class Articles extends StatefulWidget {
    static const routeName = '/articles';

    const Articles({Key? key}) : super(key: key);
 
    @override
    State<StatefulWidget> createState() {
        return _ArticlesState();
    }
}
 
class _ArticlesState extends State<Articles> {
    // กำหนดตัวแปร controler สำหรับควบคุมการทำงาน
    final Completer<WebViewController> _controller =
        Completer<WebViewController>();

    @override
    void initState() {
      super.initState();
      // กำหนดการใช้งาน ที่รับการใช้งาน keyboard สำหรับ android
      if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
    }

    @override
    Widget build(BuildContext context) {
        // รับค่า url ที่ส่งมาใน arguments
        final url = ModalRoute.of(context)!.settings.arguments as String;

        return Scaffold(
            appBar: AppBar(
                title: Text('Articles'),
            ),
            body: Builder(builder: (BuildContext context) {
              // ใช้งาน WebView กำหนดค่าเบื้องต้น 
              return WebView(
                initialUrl: url, // ใช้ url จากหน้าที่ส่งมา
                javascriptMode: JavascriptMode.unrestricted, // ใช้งาน JavaScript ได้
                onWebViewCreated: (WebViewController webViewController) { // เมื่อสร้าง webviewเสร็จ
                  _controller.complete(webViewController); // การใช้งาน async เมื่อ controller พร้อมใช้งาน
                },
              );
            }),
        );
    }
}

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// กำหนดตัวแปร controler สำหรับควบคุมการทำงาน
final Completer<WebViewController> _controller =
    Completer<WebViewController>();

@override
void initState() {
  super.initState();
  // กำหนดการใช้งาน ที่รับการใช้งาน keyboard สำหรับ android
  if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}

// ใช้งาน WebView กำหนดค่าเบื้องต้น 
return WebView(
  initialUrl: url, // ใช้ url จากหน้าที่ส่งมา
  javascriptMode: JavascriptMode.unrestricted, // ใช้งาน JavaScript ได้
  onWebViewCreated: (WebViewController webViewController) { // เมื่อสร้าง webviewเสร็จ
    _controller.complete(webViewController); // การใช้งาน async เมื่อ controller พร้อมใช้งาน
  },
);

// ใช้งาน WebView กำหนดค่าเบื้องต้น 
return WebView(
  initialUrl: url, // ใช้ url จากหน้าที่ส่งมา
  javascriptMode: JavascriptMode.unrestricted, // ใช้งาน JavaScript ได้
  onWebViewCreated: (WebViewController webViewController) { // เมื่อสร้าง webviewเสร็จ
    _controller.complete(webViewController); // การใช้งาน async เมื่อ controller พร้อมใช้งาน
  },
  onProgress: (int progress) { // กำหนดการทำงาน ตามสถานะการโหลดเว็บเพจ 0-100%
    print("WebView is loading (progress : $progress%)");
  },
  navigationDelegate: (NavigationRequest request) { // กำหนดการทำงานเมื่อคลิกลิ้งค์ในเว็บเพจ
    // เช่นการตรวจ url และ block ไม่ให้ใช้้งาน url ที่กำหนด
    if (request.url.startsWith('https://www.youtube.com/')) {
      print('blocking navigation to $request}');
      return NavigationDecision.prevent; // ถ้าเป็นจากลิ้งค์ youtube ให้ block
    }
    print('allowing navigation to $request');
    return NavigationDecision.navigate; // ถ้าเป็นลิ้งค์อื่นๆ เข้าไปปกติ
  },
  onPageStarted: (String url) { // กำหนดการทำงานเมื่อมีการโหลดเว็บเพจ
    print('Page started loading: $url');
  },
  onPageFinished: (String url) { // กำหนดการทำงานเมื่อโหลดเว็บเพจเสร็จสิ้น 100%
    print('Page finished loading: $url');
  },
  gestureNavigationEnabled: true, // กำหนดให้รองรับ gusture ต่างๆ เช่นการปัด เพื่อเลื่อนไปหน้าอื่น
);

// อนุญาตเล่นอัตโนมัติได้
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,  
// ป้องกันการเล่นไฟล์วิดีโออัตโนมัติ โดยผู้ใช้ต้องกดเล่นก่อนเท่านั้น
// initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,  
// กำหนดเล่นไฟล์มีเดียต่างๆ ที่ฝังในเพจนั้น
allowsInlineMediaPlayback: true, // true | false 

// สร้าง widget สำหรับทำปุ่มควบคุม เช่น ก่อนหน้า ย้อนหลัง รีเฟรช
class NavigationControls extends StatelessWidget {
  // รับค่าข้อมูล Future WebViewController ผ่าน parameter เข้ามาใช้งาน
  const NavigationControls(this._webViewControllerFuture);

  // กำหนดตัวแปรสำหรับรับค่าและเรียกใช้งาน WebViewController ใน widget นี้
  final Future<WebViewController> _webViewControllerFuture;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebViewController>( // ดูเพิ่มเติมได้ที่ http://niik.in/1036
      future: _webViewControllerFuture,
      builder: (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        // กำหนดตัวแปรเงื่อนไข controller พร้อมทำงานหรือ webview พร้อมทำงาน
        final bool webViewReady =
        snapshot.connectionState == ConnectionState.done;
        // กำนหดตัวแปร controller เพื่อควบคุม webview
        final WebViewController? controller = snapshot.data;
        // สร้าง widget ปุมต่างๆ ไปใช้งาน
        return Row(
          children: <Widget>[
            IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () async { // พร้อมทำงาน
                      if (await controller!.canGoBack()) { //เช็คย้อนหลังได้ไหม
                        await controller.goBack(); // ถ้าได้ ก็ย้อนหลัง
                      } else {
                        // ย้อนหลังไม่ได้ แสดงข้อความแจ้ง
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text("No back history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward_ios),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () async { // พร้อมทำงาน
                      if (await controller!.canGoForward()) { // เช็คไปหน้าได้ไหม
                        await controller.goForward(); // ถ้าได้ ก็ไปหน้าถัดไป
                      } else {
                        // ถ้าไปหน้าไม่ได้ แสดงข้อความแจ้ง
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(
                              content: Text("No forward history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.replay),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () { // พร้อมทำงาน
                      controller!.reload(); // โหลดหน้าเว็บเพจใหม่อีกครั้ง
                    },
            ),
          ],
        );
      },
    );
  }
}

controller.goBack(); // ย้อนหลังไปหน้าก่อนหน้า
controller.goForward(); // ไปหน้าถัดไป
controller!.reload(); // โหลดหน้าเว็บเพจใหม่อีกครั้ง

appBar: AppBar(
    title: Text('Articles'),
    actions: <Widget>[ // สร้างอาเรย์หรือ List ของปุ่มใน action
      NavigationControls(_controller.future),
    ],
),

class _ArticlesState extends State<Articles> {
.....
.....
    @override
    Widget build(BuildContext context) {
.......
....
            }),
            floatingActionButton: favoriteButton(), // เรียกใช้ปุ่มจากฟังก์ชั่น
        );
    }


  // สร้างฟังก์ชั่น คืนค่าเป็น widget
  Widget favoriteButton() {
    return FutureBuilder<WebViewController>(
        future: _controller.future, // ใช้งาน controller future ได้เลย
        builder: (BuildContext context,
            AsyncSnapshot<WebViewController> controller) {
          if (controller.hasData) { // มีข้อมูล
            return FloatingActionButton( // คืนค่าเป็นปุ่มรูปหัวใจ
              onPressed: () async { // ถ้ากด
                // เรียกดู url ที่กำลังใช้งานอยู่
                final String url = (await controller.data!.currentUrl())!;
                // จำลองการทำงานเท่านั้น โดยเสดงข้อความว่าเพิ่มเป็น Favorited แล้ว
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Favorited $url')),
                );
              },
              child: const Icon(Icons.favorite),
            );
          }
          return Container(); // ยังไม่มีข้อมูล คืนค่า container ว่างไปแสดงที่ปุ่ม
        });
  }

}

// สร้างฟังก์ชั่น คืนค่าเป็น widget
Widget scrollTopButton() {
  return FutureBuilder<WebViewController>(
      future: _controller.future, // ใช้งาน controller future ได้เลย
      builder: (BuildContext context,
          AsyncSnapshot<WebViewController> controller) {
        if (controller.hasData) { // มีข้อมูล
          return FloatingActionButton( // คืนค่าเป็นปุ่มลูกศรเลื่อนบน
            onPressed: () async { // ถ้ากด
              // เรียกคำสั่ง javascript  เลื่อน scroll ไปด้านบนสุด
              await controller.data!.evaluateJavascript('window.scrollTo(0, 0);');
            },
            child: const Icon(Icons.arrow_upward),
          );
        }
        return Container(); // ยังไม่มีข้อมูล คืนค่า container ว่างไปแสดงที่ปุ่ม
      });
}

AsyncSnapshot<WebViewController> controller) {

controller.data!.evaluateJavascript()

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class Articles extends StatefulWidget {
    static const routeName = '/articles';

    const Articles({Key? key}) : super(key: key);
 
    @override
    State<StatefulWidget> createState() {
        return _ArticlesState();
    }
}
 
class _ArticlesState extends State<Articles> {
    // กำหนดตัวแปร controler สำหรับควบคุมการทำงาน
    final Completer<WebViewController> _controller =
        Completer<WebViewController>();

    @override
    void initState() {
      super.initState();
      // กำหนดการใช้งาน ที่รับการใช้งาน keyboard สำหรับ android
      if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
    }

    @override
    Widget build(BuildContext context) {
        // รับค่า url ที่ส่งมาใน arguments
        final url = ModalRoute.of(context)!.settings.arguments as String;

        return Scaffold(
            appBar: AppBar(
                title: Text('Articles'),
                actions: <Widget>[ // สร้างอาเรย์หรือ List ของปุ่มใน action
                  NavigationControls(_controller.future),
                ],
            ),
            body: Builder(builder: (BuildContext context) {
              // ใช้งาน WebView กำหนดค่าเบื้องต้น 
              return WebView(
                initialUrl: url, // ใช้ url จากหน้าที่ส่งมา 
                javascriptMode: JavascriptMode.unrestricted, // ใช้งาน JavaScript ได้
                onWebViewCreated: (WebViewController webViewController) { // เมื่อสร้าง webviewเสร็จ
                  _controller.complete(webViewController); // การใช้งาน async เมื่อ controller พร้อมใช้งาน
                },
                /* onProgress: (int progress) { // กำหนดการทำงาน ตามสถานะการโหลดเว็บเพจ 0-100%
                  print("WebView is loading (progress : $progress%)");
                },
                navigationDelegate: (NavigationRequest request) { // กำหนดการทำงานเมื่อคลิกลิ้งค์ในเว็บเพจ
                  // เช่นการตรวจ url และ block ไม่ให้ใช้้งาน url ที่กำหนด
                  if (request.url.startsWith('https://www.ninenik.com/')) {
                    print('blocking navigation to $request}');
                    return NavigationDecision.prevent; // ถ้าเป็นจากลิ้งค์ youtube ให้ block
                  }
                  print('allowing navigation to $request');
                  return NavigationDecision.navigate; // ถ้าเป็นลิ้งค์อื่นๆ เข้าไปปกติ
                },
                onPageStarted: (String url) { // กำหนดการทำงานเมื่อมีการโหลดเว็บเพจ
                  print('Page started loading: $url');
                },
                onPageFinished: (String url) { // กำหนดการทำงานเมื่อโหลดเว็บเพจเสร็จสิ้น 100%
                  print('Page finished loading: $url');
                }, */
                gestureNavigationEnabled: true, // กำหนดให้รองรับ gusture ต่างๆ เช่นการปัด เพื่อเลื่อนไปหน้าต่างอื่น
              );
            }),
            floatingActionButton: scrollTopButton(),
        );
    }


    // สร้างฟังก์ชั่น คืนค่าเป็น widget
    Widget scrollTopButton() {
      return FutureBuilder<WebViewController>(
          future: _controller.future, // ใช้งาน controller future ได้เลย
          builder: (BuildContext context,
              AsyncSnapshot<WebViewController> controller) {
            if (controller.hasData) { // มีข้อมูล
              return FloatingActionButton( // คืนค่าเป็นปุ่มลูกศรเลื่อนบน
                onPressed: () async { // ถ้ากด
                  // เรียกคำสั่ง javascript  เลื่อน scroll ไปด้านบนสุด
                  await controller.data!.evaluateJavascript('window.scrollTo(0, 0);');
                },
                child: const Icon(Icons.arrow_upward),
              );
            }
            return Container(); // ยังไม่มีข้อมูล คืนค่า container ว่างไปแสดงที่ปุ่ม
          });
    }

}

// สร้าง widget สำหรับทำปุ่มควบคุม เช่น ก่อนหน้า ย้อนหลัง รีเฟรช
class NavigationControls extends StatelessWidget {
  // รับค่าข้อมูล Future WebViewController ผ่าน parameter เข้ามาใช้งาน
  const NavigationControls(this._webViewControllerFuture);

  // กำหนดตัวแปรสำหรับรับค่าและเรียกใช้งาน WebViewController ใน widget นี้
  final Future<WebViewController> _webViewControllerFuture;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebViewController>( // ดูเพิ่มเติมได้ที่ http://niik.in/1036
      future: _webViewControllerFuture,
      builder: (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        // กำหนดตัวแปรเงื่อนไข controller พร้อมทำงานหรือ webview พร้อมทำงาน
        final bool webViewReady =
        snapshot.connectionState == ConnectionState.done;
        // กำนหดตัวแปร controller เพื่อควบคุม webview
        final WebViewController? controller = snapshot.data;
        // สร้าง widget ปุมต่างๆ ไปใช้งาน
        return Row(
          children: <Widget>[
            IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () async { // พร้อมทำงาน
                      if (await controller!.canGoBack()) { //เช็คย้อนหลังได้ไหม
                        await controller.goBack(); // ถ้าได้ ก็ย้อนหลัง
                      } else {
                        // ย้อนหลังไม่ได้ แสดงข้อความแจ้ง
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text("No back history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward_ios),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () async { // พร้อมทำงาน
                      if (await controller!.canGoForward()) { // เช็คไปหน้าได้ไหม
                        await controller.goForward(); // ถ้าได้ ก็ไปหน้าถัดไป
                      } else {
                        // ถ้าไปหน้าไม่ได้ แสดงข้อความแจ้ง
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(
                              content: Text("No forward history item")),
                        );
                        return;
                      }
                    },
            ),
            IconButton(
              icon: const Icon(Icons.replay),
              onPressed: !webViewReady // ไม่พร้อมทำงาน
                  ? null // คืนค่า null 
                  : () { // พร้อมทำงาน
                      controller!.reload(); // โหลดหน้าเว็บเพจใหม่อีกครั้ง
                    },
            ),
          ],
        );
      },
    );
  }
}