Get HTML element with web scraping on flutter - flutter

i´m trying to get the link of the video of this page with the package "web_scraper". I can find it using Chrome´s tools (is an attribute of a jw-video jw-reset element. The problem is that when you enter the page you can´t see this attribute before clicking in the play button. Can any one help me?
I have already this code:
import 'package:flutter/material.dart';
import 'package:web_scraper/web_scraper.dart';
class Prueba extends StatefulWidget {
#override
State createState() => new _Prueba();
}
class _Prueba extends State<Prueba> {
final webScraper = WebScraper('https://www3.animeflv.net');
List<Map<String, dynamic>> link;
void fetchProducts() async {
// Loads web page and downloads into local state of library
if (await webScraper
.loadWebPage('/ver/sword-art-online-alicization-war-of-underworld-20')) {
setState(() {
link = webScraper.getElement(
'div.jw-wrapper.jw-reset > div.jw-media.jw-reset > video.jw-video.jw-reset', ['src']);
});
}
}
#override
void initState() {
super.initState();
// Requesting to fetch before UI drawing starts
fetchProducts();
}
#override
Widget build (BuildContext ctxt) {
print(link);
return Container();
}
}

Related

I can succesfully show asset logo but i still get the error: Unable to load asset

I have a use case where i have to load the asset image based on the value of the key logo_image from a json file.
So i have this json with key logo_image and value image1.png:
{
"logo_image" : "image1.png"
}
There is an image inisde the assets folder like this: assets/image1.png
I have a class called GetAssets() with a method called getAssetItems() which loads the json file and another method called getLogo which i will use as blueprint in the view to specify which key item i want to view:
class GetAssets {
Future<Map<String, dynamic>> getAssetItems() async {
String jsonData =
await rootBundle.loadString('assets/items.json');
Map<String, dynamic> data = jsonDecode(jsonData);
return data;
Future getLogo(String key) async {
var assets = await GetAssets().getAssetItems();
return 'assets/' + assets[key];
}
}
I have a field called logo and i have method called setAssets() to load the logo and set the state of the logo with setState() and i use initState() to initialize setAssets(). I have a Scaffold() which i use to view the asset logo with the field logo:
import 'package:flutter/material.dart';
class ShowLogo extends StatefulWidget {
const ShowLogo({Key? key}) : super(key: key);
#override
_ShowLogoState createState() => _ShowLogoState();
}
class _ShowLogoState extends State<ShowLogo> {
late String logo = "";
setAssets() async {
final logoFromAsset = await GetAssets().getLogo("logo_image");
setState(() {
logo = logoFromAsset;
});
}
#override
initState() {
setAssets();
}
#override
Widget build(BuildContext context) {
return Scaffold(body: Image.asset(logo),);
}
}
I am able to show the logo on the screen of my phone, but i still get the error: Unable to load asset: What is the cause of this? How can i resolve this issue?
I think this is because of Json asset asynchronous method call.
When the widget executing then build(BuildContext context) method try to build the widget immediately after the initState (setAssets) method call.
For setAssets method's asynchronous call, build(BuildContext context) method already executed before setting logo = logoFromAsset inside setAssets method and the first time logo variable remains with empty string which is not a valid asset path, thats why Image.asset(logo) can not load the asset/image and throw an error.
But after few moment when your setAssets asynchronous method call executed and called setState this time the widget is rebuild with the non-empty/valid asset path and the logo is showing.
Try to set an default image/icon and I think this will resolve your issue.
import 'package:flutter/material.dart';
class ShowLogo extends StatefulWidget {
const ShowLogo({Key? key}) : super(key: key);
#override
_ShowLogoState createState() => _ShowLogoState();
}
class _ShowLogoState extends State<ShowLogo> {
late String logo = "";
setAssets() async {
final logoFromAsset = await GetAssets().getLogo("logo_image");
setState(() {
logo = logoFromAsset;
});
}
#override
initState() {
setAssets();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: logo != "" ? Image.asset(logo) : const Icon(Icons.image)
);
}
}

Fill list in flutter from other page

On fetchDept.dart I have:
Future<List<Dept>> fetchDept() async {
final response = await http.get(Uri.https('someurl.com', 'dept'));
if (response.statusCode == 200) {
List<Dept> dept = (json.decode(response.body)["items"] as List)
.map((data) => Dept.fromJson(data))
.toList();
return dept;
} else {
throw Exception('Error');
}
}
How on other dart page load data from fetchDept.dart (fetchDept) to deptList
Details.dart page:
import 'package:services/fetchDept.dart';
class DropListPage extends StatefulWidget {
#override
_DropListPageState createState() => _DropListPageState();
}
class _DropListPageState extends State<DropListPage> {
#override
void initState() {
fetchDept();
super.initState();
}
List deptList;
String _myDept;
//deptList ==> Set here data from fetchDept()
On Details.dart page I need to populate Dropdown list.
on the Details page, you could store your data into a List and use it to build your widgets, like this:
import 'package:services/fetchDept.dart';
class DropListPage extends StatefulWidget {
#override
_DropListPageState createState() => _DropListPageState();
}
class _DropListPageState extends State<DropListPage> {
List deptList=[];
#override
void initState() {
asyncMethod();
super.initState();
}
Future<void> asyncMethod() async{
List result = await fetchDept();
setState((){
deptList=result;
});
}
String _myDept;
//with the help of deptList you could build your widgets

How to hide elements in webview in Flutter.? [duplicate]

I'm beginner to flutter , I want to hide section of website in my flutter application . I added flutter flutter_webview_plugin in pubspec.yaml file and imported package to my feed.dart page. the flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); is executed when i run the application. But flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); i tried to hide header but its not working.
Bellow is the source code .. Please help .
enter code here
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class FeedPage extends StatefulWidget {
#override
FeedPageState createState() {
return new FeedPageState();
}
}
class FeedPageState extends State<FeedPage> {
final flutterWebviewPlugin = new FlutterWebviewPlugin();
// alternatively you can define variable as var js = "YOUR_SCRIPT"; and use it inside evalJavascript
#override
void initState(){
super.initState();
flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); // executed
flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); // not executed
}
#override
void dispose() {
flutterWebviewPlugin.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return WebviewScaffold(
url: 'https://www.esdatech.com/',
hidden: true,
appBar: AppBar(title: Text("ESDA")),
);
}
}
enter image description here
This is likely due to your webpage not being loaded, and therefore the element not existing, at the point you call that method in your code.
A solution would be to wait until the page is loaded before attempting to remove the element using the onStateChanged stream.
StreamSubscription<WebViewStateChanged> _onStateChanged;
#override
void initState(){
super.initState();
flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");
_onStateChanged =
flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state) {
if(state.type == WebViewState.finishLoad) {
flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");
}
}
);
}
#override
void dispose() {
_onStateChanged.cancel();
flutterWebviewPlugin.dispose();
super.dispose();
}

How can I do if seen check on custom splash screen? If walkthrough screen is already seen

Im doing a splashscreen first app, to be followed by a walkthrough page if the user first used the app, else go to a welcome page to sign in/ sign up if already saw the walkthrough screen.
My code came from this projects main.dart file: https://github.com/instaflutter/flutter-login-screen-firebase-auth-facebook-login and modified it to this code(from splashscreen tutorial FlutterKart)
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:binder/ui/screens/root_screen.dart';
import 'package:binder/ui/screens/walk_screen.dart';
void main() {
Firestore.instance.settings(timestampsInSnapshotsEnabled: true);
SharedPreferences.getInstance().then((prefs) {
SplashScreen(prefs: prefs);
});
}
class SplashScreen extends StatefulWidget {
final SharedPreferences prefs;
SplashScreen({Key key,this.prefs}): super(key: key);
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Timer(Duration(seconds: 3), () => _handleCurrentScreen(context));
}
#override
Widget build(BuildContext context) {
final logowhite = Hero(
tag: 'hero',
child: //code insert flutterkart splashscreen
)
],
),
)
],
)
],
),
);
}
Widget _handleCurrentScreen (BuildContext context) {
bool seen = (widget.prefs.getBool('seen') ?? false);
if (seen) {
return new RootScreen();
} else {
return new WalkthroughScreen(prefs: widget.prefs);
}
}
}
I want it to show the splashscreen first and directed to the rootscreen if already seen and to the walkthrough screen if first use.
You'd probably want to use shared_preferences or something similar. Something like this:
// add this static variable somewhere
// could technically be initialized during splash screen and added to a Provider or something similar after
static SharedPreferences prefs;
// make `main` async if it is not already
Future<void> main() async {
prefs = await SharedPreferences.getInstance();
...
}
Future<void> onSplashScreenDone() async {
if (prefs.getBool('isFirstTime') ?? true) {
// you might want to put this at the end of your walkthrough, so they don't miss it if they close the app, for example
await prefs.setBool('isFirstTime', false);
// this is their first time, show walkthrough, etc.
...
} else {
// this is not their first time, do normal things.
}
}

What is the equivalent code in flutter for " mAdapter.notifyDataSetChanged();";

Befor HTTP response show loading and after https response create tab view. I successfully create tab view but my problem is after HTTP request unable to update the view in the android studio with java we use
`mAdapter.notifyDataSetChanged();
mActivity.runOnUiThread(new Runnable() {
#Override
public void run() {
}
});`
code for doing this.
what is the equivalent code in the flutter?
If you want update any widget in flutter you should call setState((){})
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isLoading = false;
#override
void initState() {
super.initState();
isLoading = true;
getData();
}
#override
Widget build(BuildContext context) {
return isLoading ? new CircularProgressIndicator() : // show list;
}
Future<ModelClass> getData() async {
// get data from http
...
// after processing response
setState(() {
isLoading = false;
});
}
}
In Flutter, the UI is updated when the State is changed using setState method.
In your case, you will need some variables (E.x: isLoading, items (for your list)).
When the app loads data from backend, isLoading = true, items = [] (empty). When the request is done, isLoading = false and items = [item1, item2,...]. Here is where you have to use setState method to update your UI.
Under your build method, you have to use these 2 variables to render the corresponding UI.