Use a CSS File in Flutter

Parveen Baghel

27 October 2023

In this blog, we’ll Use a CSS File in Flutter and learn about the ‘CSS function’ in the Flutter Webview to manage the styling of HTML content.

The presentation and layout of web pages are used to describe using the language known as CSS (Cascading Style Sheets). It offers a large number of capabilities to change the attributes of HTML elements. eg- margin, padding, Colors, font style, etc.

Additionally, you may read more about Mobikul’s Flutter app development services.

To use a CSS file in Flutter for WebView, you can follow these steps:

Add the CSS file to your Flutter project’s assets folder.
Load the CSS file into the WebView using the injectJavascriptFileFromUrl() method.
Add a <style> tag to your HTML file and link to the CSS file using the href attribute.

Here is an example of how to use a CSS file in a Flutter WebView:

We’ve used the In_AppWebview package.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView CSS Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse(url)),
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            useShouldOverrideUrlLoading: true,
            javaScriptEnabled: true,
            javaScriptCanOpenWindowsAutomatically: true,
            userAgent:
                "Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03C) "
                "AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
          ),
          android: AndroidInAppWebViewOptions(
            useShouldInterceptRequest: true,
            useHybridComposition: true,
          ),
        ),
        shouldOverrideUrlLoading: (controller, navigationAction) async {
          // You can access the URL like this
          final url = navigationAction.request.url.toString();
          if (url.contains("example")) {
            return NavigationActionPolicy.ALLOW;
          } else {
            //TODO: Launch Url Outside the app.
            //_launchURL(url);
            return NavigationActionPolicy.ALLOW;
          }
        },
        onWebViewCreated: (InAppWebViewController controller) {
          _webViewController = controller;
          // Inject the CSS file into the WebView.
          // _webViewController!.injectJavascriptFileFromUrl(
          //     urlFile: Uri.parse('assets/css_styles.css'));
        },
        onLoadStop: (controller, url) {
          //TODO: Stop Loader
        },
      ),
    );
  }
}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('WebView CSS Example'),

body: InAppWebView(

initialUrlRequest: URLRequest(url: Uri.parse(url)),

initialOptions: InAppWebViewGroupOptions(

crossPlatform: InAppWebViewOptions(

useShouldOverrideUrlLoading: true,

javaScriptEnabled: true,

javaScriptCanOpenWindowsAutomatically: true,

userAgent:

"Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03C) "

"AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",

android: AndroidInAppWebViewOptions(

useShouldInterceptRequest: true,

useHybridComposition: true,

shouldOverrideUrlLoading: (controller, navigationAction) async {

// You can access the URL like this

final url = navigationAction.request.url.toString();

if (url.contains("example")) {

return NavigationActionPolicy.ALLOW;

} else {

//TODO: Launch Url Outside the app.

//_launchURL(url);

return NavigationActionPolicy.ALLOW;

}

onWebViewCreated: (InAppWebViewController controller) {

_webViewController = controller;

// Inject the CSS file into the WebView.

// _webViewController!.injectJavascriptFileFromUrl(

// urlFile: Uri.parse('assets/css_styles.css'));

onLoadStop: (controller, url) {

//TODO: Stop Loader

);

}

Here is an example of a simple HTML file that uses a CSS file:

&lt;!DOCTYPE <strong>html</strong>&gt; 
&lt;html&gt; 
&lt;head&gt; &lt;title&gt;WebView Example&lt;/title&gt; 
&lt;style&gt; 
body { 
color: blue; 
} &lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;h1&gt;Hello from Flutter!&lt;/h1&gt; 
&lt;/body&gt; 
&lt;/html&gt;

<!DOCTYPE <strong>html</strong>>

<html>

<head> <title>WebView Example</title>

<style>

body {

color: blue;

} </style>

</head>

<body>

<h1>Hello from Flutter!</h1>

</body>

</html>

When you run the app, the WebView will display the HTML file with the CSS file applied. The text “Hello from Flutter!” will be displayed in blue.

You can also use a CSS file to style the WebView itself. For example, you can use the width and height properties to set the size of the WebView. You can also use the border property to add a border around the WebView.

Here is an example of a CSS file that can be used to style a WebView:

webview {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

webview {

width: 100%;

height: 100%;

border: 1px solid black;

}

When you add this CSS file to your project and inject it into the WebView, the WebView will be styled according to the CSS file.

You can use CSS files to style your Flutter WebViews in a variety of ways. By understanding how to use CSS files in Flutter WebViews, you can create more visually appealing and engaging web applications.

Conclusion

Now You have a little knowledge about the Use a CSS File in Flutter Webview.

Use CSS files to control the layout, typography, colors, and other visual elements of a web page. It works by targeting HTML elements. so click this link and learn more about CSS.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Always be ready for learning 🙂