I am trying to show a webpage in webview via URL.
I have tried flutter_webview_plugin plugin but it was not working when I run the project on the browser.
Is there any another way to show the webpage in the flutter web application?
flutter_webview_plugin is to embed web pages inside an app. In flutter web you should use HtmlElementView widget.
Most demos out there use IFrameElement to embed a webpage. You can check this easy_web_view package for handling both mobile and web platform automatically.
It internally uses HTMLElementView and WebView automatically depending on the case of the deployment.
some example is available here
Update for adding onLoad listener
IFrameElement iframeElement = IFrameElement()
..src = 'url'
..style.border = 'none'
..onLoad.listen((event) {
// perform you logic here.
});
ui.platformViewRegistry.registerViewFactory(
'webpage',
(int viewId) => iframeElement,
);
return Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: HtmlElementView(viewType: 'webpage'),
),
),
);
if someone facing issue loading mobile side then go with this, its works in Flutter Android, Ios, Web :-
EasyWebView(
height: 400,
width: 1000,
isHtml: false, // Use Html syntax
isMarkdown: false, // Use markdown syntax
convertToWidgets: true,
src: Uri.dataFromString('<html><body><iframe allow="camera *;microphone *" height="100%" width="100%"'
' frameborder="0" src="$url"></iframe></body></html>', mimeType: 'text/html').toString(),
),
you guys can use any webview to load any web page in your web/app in flutter using Url in html just change src = "$url" :)
Answer for 2023
The flutter_inappwebview package just added support for the web!
You can read the web setup instructions in the official Flutter InappWebView docs but to summarize:
1. Add script to
<head>
<!-- ... -->
<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
<!-- ... -->
</head>
2. Use the InAppWebView Widget
Scaffold(
body: SafeArea(
child: InAppWebView(
initialUrlRequest: URLRequest(url:WebUri('https://flutter.dev/')),
)
)
);
Note that there are some restrictions on what can be done in a WebView an Flutter web but for simply displaying content, this should work.
Related
In my project i want to change the background-color and font of text. Both the properties are written in css file.
Project structure is:
|-myProject
|--public
|--src
|--package.json
All my css is written in public directory, and i have an api which give response of background-color and font. Now i want to change the properties background-color and font in css files according to api response.
Instead of trying to modify the base stylesheets, why not set these particular properties using the elements’ style attributes:
const divStyle = {
backgroundColor: /* Some color */,
fontFamily: /* Some font stack */,
};
function HelloWorldComponent() {
return <div style={ divStyle }>Hello World!</div>;
}
(adapted from the React docs)
I think the best way to do this would be to use inline style on the elements you want to change.
On api response -> set
const yourVar={
backgroundColor:##,
fontFamily:##
};
I believe that the answer from MTCoster is the best approach. depending on the structure of your app you could use the new Context API to make some sort of theme provider, so that you could pass custom styles that could be stored on your application state and that is loaded from your backend API. there are some tools that could help you integrate this feature more easily, like Styled-Components.
with Styled components you culd write something like:
import styled from 'styled-components'
import { YourComponentJSX } from '../somewhere'
// Wrap the component where you need your custom styles
const YourStyledComponent = styled(YourComponentJSX)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
// using the short-if to add a default color in case it is not connected to the ThemeProvider
color: ${props => props.theme.main ? props.theme.main : "palevioletred"};
border: 2px solid ${props => props.theme.main ? props.theme.main : "palevioletred"};
`;
// Define what props.theme will look like
const theme = {
main: "mediumseagreen"
};
render(
<div>
<ThemeProvider theme={theme}>
<App>
<YourStyledComponent>Themed</YourStyledComponent>
</App>
</ThemeProvider>
</div>
);
This way you could wrap your whole app and use custom styles saved on the app state that have been loaded from the backend and use them on really deeply nested ui components
*The code is a modification from the styled-component docs
I have built a native Android App which has a transparent navigation drawer. I have been asked to build the same app using Flutter and I have gotten to the point where I would like to implement a transparent navigation drawer. How do I make the Navigation Drawer of my Flutter app transparent because I have been struggling on that end ? I have already tried
drawer: Drawer(
child: Container(
color: Colors.transparent,)),
The navigation drawer just remains white. I have been searching for a solution to this and cant find one. Any help would be appreciated.
I have attached images of the Native App with a transparent drawer and the Flutter version with a white Navigation drawer
I think there's a better way of doing this without messing up the entire canvases on the app. Since you want it specifically for the drawer, try this approach.
Scaffold(
drawer: Theme(
data: Theme.of(context).copyWith(
// Set the transparency here
canvasColor: Colors.transparent, //or any other color you want. e.g Colors.blue.withOpacity(0.5)
),
child: Drawer(
// All other codes goes here.
)
)
);
use the transparent color like you are currently doing but also in the drawer widget use a stack and inside it make the first widget a backdropfilter, you will need to import dart:ui. here is an example
//import this library to use the gaussian blur background
import 'dart:ui';
Scaffold(
appBar: AppBar(
title: Text('Title'),
),
drawer: Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: sideNav()),
body: Text('Hello Body'),
),
Drawer sideNav(){
return Drawer(
child: Stack(
children: <Widget> [
//first child be the blur background
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), //this is dependent on the import statment above
child: Container(
decoration: BoxDecoration(color: Color.grey.withOpacity(0.5))
)
),
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Hello Drawer Title')
),
ListTitle(
leading: Icon(Icons.dashboard, color: Colors.white)
title: "Dashboard"
onTap: (){
}
)
]
)
]
)
);
}
After much tinkering around I managed to find a solution.
I edited the ThemeData and added a canvas color as described below
theme: new ThemeData(
canvasColor: Colors.transparent
),
This isn't the best way to do this, it is more of a workaround than anything.
Visual Representation
Screenshot Of drawer top whitespace
If you came here and finding the solution about how to remove the white space above the drawer and status bar then just simply use SingleChildScrollView ---> Column().
Because if you add something like ListView() then the white Space will take place above your drawer which is so irritating to see.
I know this is not the actual solution of this problem but it will help someone who needs it.
Just wrap the drawer with opacity and give the opacity a value (between 0 and 1)
Opacity(
opacity: 0.7,
child: Drawer(//your drawer here),
),
Problem
When you use fabric js for generating text components and convert then to SVG.
I want to see the problem and try reproduce and/or resolve
----->Please check first comment <-----
How to use demo to reproduce
Open Url of demo
Run it
Click on add text component it will add English test text component.
Now change the text by double click and paste this for example arabic word شريف
Open your browser inspector.
click on print to console button .
Expected result
To look like this
This is fixed in newer version. Update to v2.3.3 (latest) , your fabricjs version v1.5 is too old and its not maintained any more.
find latest here
fabric.js website
DEMO
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setDimensions({
width:400,height:400
})
text = new fabric.IText('شريف', {
left: 50,
top: 100,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
})
canvas.add(text);
console.log(text.toSVG());
function printtest(){
console.log(text.toSVG());
}
#c{
border:1px solid red;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="printtest()">print console</button><br>
<canvas id="c"></canvas>
I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.
I need to delivery dynamic css content. In a short, I need this:
<link href="/css/site.css?color=111111" rel="stylesheet" type="text/css">
where site.css has unprocessed less code.
So I installed Node.js+LESS on server-side, and the follow line works fine:
$ lessc testless.less
But I still didn't figure out how to configure server to answer these HTTP requests.
1) What the best option: Using either apache or node.js? (I already have an apache server installed and working)
2) How should I configure my server and application to achieve this?
Any help would be appreciated.
Thanks
Ronan
I'll suggest another preprocessor, which is based on JavaScript - http://krasimir.github.io/absurd/. The idea is to use JavaScript objects or JSON and generate CSS. Later, this CSS could be added to the document.
api.add({
body: {
marginTop: "20px",
width: "100%"
},
header: {
width: "100%"
}
});
compiles to:
body {
margin-top: 20px;
}
body, header {
width: 100%;
}
AbsurdJS is available for a server-side (nodejs) or client-side usage. The good thing is that you can use everything which is available in the usual js code.
I solved the same kind of problem to build http://twitterbootstrap3navbars.w3masters.nl/ and http://twitterbootstrap3buttons.w3masters.nl/. For both application i use apache with php.
For the button generator i used Lessphp and for the navbar generator i call lessc via PHP's exec().
I use less code to write inline stylsheets. In your case you would create a dynamic stylesheet.
So for example use:
<link href="/css/site.php?color=111111" rel="stylesheet" type="text/css">
With site.php:
<?
//use lessphp from http://leafo.net/lessphp/
header("Content-type: text/css", true);
$less = new lessc;
echo $less->compile('p {color: '.$_GET['color'].'; }');
exit;
or
<?
//use lessc
header("Content-type: text/css", true);
exec( echo "p { color: '.$_GET['color'].'; }" | /usr/local/bin/lessc -',$output,$error);
echo implode("\n",$output);
exit;