How to Check if flutter app in running on Web or Mobile – Flutter kIsWeb

Hi Guys, Welcome to Proto Coders Point.

Flutter kIsWeb – Check if flutter app is running on Web

kIsWeb in flutter is a constant that will return true if your flutter app is compiled and run on web browser.

By using kIsWeb we can check if our flutter app is running on web or mobile, as it return true if run on web.

So to use kIsWeb constant we must import foundation.dart in-build library.

Example on kIsWeb

import 'package:flutter/foundation.dart';

void main() {

  var isWeb = kIsWeb;
  print(isWeb);   // true or false
   
}

Video Tutorial

Complete Code Example on how to use flutter kIsWeb constant

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var isWeb = kIsWeb;  // get is app is running on web or no // true or false
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(isWeb ? "App is Running on Web" : "App is Running on Mobile"),
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}