How to disable landscape mode for flutter web? - flutter

I am trying to disable the landscape mode for phone users on flutter web. I have used this code to disable it, well, it works when I run the project as an app, but it doesn't work for the web project.
Widget build(BuildContext context) => ResponsiveSizer(
builder: (context, orientation, screenType) {
if (screenType == ScreenType.mobile) {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
}
return MaterialApp(
title: 'App Title',
debugShowCheckedModeBanner: false,
theme: AppTheme.lightTheme,
home: const HomePage(),
);
},
);
Any idea how to achieve this?

You cannot disable landscape mode for web, this is not something for you to control.
Being a web app, you must be prepared for all kinds of sizes for the browser window. On desktop, users are allowed to resize their Chrome or Safari to whatever size they want. For mobile, when they turn their phone to landscape, it's the browser app that re-renders your webpage with a different browser window size.
I suggest you focus on making your web app more responsive instead.

Related

Flutter how lo listen device dark theme change instantly

My flutter app doesnt listen user's preferences changes at dark theme feature. I need to hard restart my app to reflect the changes.
How to make my flutter theme change instantly once I turn on / off the dark theme in device setting?
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.light
),
darkTheme: ThemeData(
brightness: Brightness.dark
),
themeMode: ThemeMode.system,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
Thanks
I would recommend you give this plugin Adaptive Chameleon Theme a try. It is designed to help you switch theme modes with ease be it from light to dark or even utilising the default user defined device theme.
Like so:
// sets theme mode to dark
AdaptiveChameleonTheme.of(context).changeThemeMode(dark: true);
// sets theme mode to light
AdaptiveChameleonTheme.of(context).changeThemeMode(dark: false);
// sets theme mode to system default
AdaptiveChameleonTheme.of(context).changeThemeMode(dynamic: true);
It also comes with the added benefit of allowing you to change the theme colours if you need to.
AdaptiveChameleonTheme.of(context).setTheme(AppThemes.LightRed);
AdaptiveChameleonTheme.of(context).setTheme(AppThemes.LightBlue);
The selections are stored in shared preferences and persisted in the device memory.
Full disclosure, I am the developer of the plugin so you can consider this a shameless plug. However, I too faced similar challenges in the past leading me to develop this quick and easy to use solution.
To see the change you need two things, use StatefulWidget and call setState everytime user change theme.
IconButton(
onPressed: () {
setState(() {
functionToChangeTheme();
});
},
icon: Icon(Icons.add),
)

Flutter Web PWA Top Notch gets cut off

I want to create a PWA using Flutter web but on iPhone X Models the top notch gets cut off.
Expected:
Actual:
The code I used:
import 'package:flutter/cupertino.dart';
void main() {
runApp(CupertinoApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: CupertinoPageScaffold(child: Center(child: Text("PWA")))));
}
I tried changing the meta tag in the index.html to:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
But this does not support dark mode.
Does any one got a better idea to solve this?
You can wrap your widget in safe area to prevent your app having such problems.
SafeArea(
child: Text("PWA"),
),
Happy coding...

Is there a way to remove this blankspace from this flutter webapp on Firefox Mobile?

I am trying to do a responsive webapp and everything was working fine debugging it on the desktop firefox and I did the entire layout with the switch device option in the debug tools, but when I uploaded to an HTTP server and access it through my phone I get this screen
On chrome I have no problems and everything displays just right, on firefox on the other hand I have that weird blank space... At chrome that space was occupied by the "add to the homescreen" prompt, maybe that has something to do?
Any ideas would be greatly apreciated. I'm leaving the code just in case it helps...
void main() => runApp(MyApp2());
class MyApp2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Container(
color: Colors.red,
// child: Text('Hello World'),
),
),
);
}
}
I guess its useful to say that on chrome I get the expected behaviour of getting the full screen red except for the AppBar
Add to Homescreen button is feature of PWA so you should dive into index.html probably. Can you debug your Firefox Mobile and play with css a little bit. You can check official Firefox Remote Debugging Docs.

With device_preview plugin in Flutter MediaQuery.of(context).size.width doesn't give the emulated phone's witdh

To practice responsive design in Flutter, I have decided to use device_preview. I tried different phones out. But every time I got the original device's width.
For example, original device's witdh is 1700px but simulated device's witdh is 600px. I cannot get simulated device's witdh.
Are there any settings to fix that issue? Or is it basically how it works?
I missed a point. In MaterialApp we should add locale and builder to consume simulated devices' screen size.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.of(context).locale,
builder: DevicePreview.appBuilder,
home: MyApp());
}
}
Set your app's useInheritedMediaQuery to true.

Flutter run stuck on white screen

I have a Flutter issue I can't resolve. I tried all common things like flutter clean, restarting pc, wiping emulator data and few more things still getting stuck on white screen basically.
Launching lib\main.dart on Android SDK built for x86 in debug mode...
✓ Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk...
Connecting to VM Service at ws://127.0.0.1:55863/xq7cW6jF1O8=/ws // this statement stays as its is
void main() => MaterialApp(
color: Colors.black,
home: Scaffold(
backgroundColor: Colors.black,
),
);
Basically connection to VM is not happening.
Edit
My dartDeveloperTool says unable to connect to vm service, but it opens in chrome and doesn't show any widget just clean dartDebugger tool.
Call to OpenGL ES API with no current context (logged once per thread).
Of course, it won't work.
Because you need to wrap it in runApp method. Like this:
void main() {
runApp(
MaterialApp(
color: Colors.black,
home: Scaffold(
backgroundColor: Colors.black,
),
),
);
}
But it's kinda bad practice to put your MaterialApp inside your main() function. Try to move it into a StatelessWidget or StatefulWidget.
Here's the example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: null, // Change null with your own widgets
),
);
}
}
Don't underestimate the importance of runApp() - If you don't use it - your app (which is one big widget) will result in an indefinite white screen because it has no constraints...
According to the documentation it:
/// Inflate the given widget and attach it to the screen. The widget is given constraints during layout that force it to fill the entire screen.
In my case, run app on debug mode working normal but I build file apk for release mode, app only show white screen. I finally found the solution. The problem was with my grade version. I downgrade version of grade in android/build.grade to 3.5.0, it works normally again.
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
}
I just faced a similar issue today and removing the Dart/Flutter extensions and installing them back solved it for me.
I also had the same issue while trying to run my app, I ran flutter clean, flutter doctor everything was green until I notice I was not connected to the internet.
If you are running the app for the first time, just restart your IDE and run your app with internet connection.
I had faced the same issue. In my case culprit was corporate proxy.
I have fixed it by setting Environment variables (User variables section) as I was using Windows machine.
HTTP_PROXY to http://proxy-ip:port
HTTPS_PROXY to http://proxy-ip:port
NO_PROXY to localhost,127.0.0.1
I faced the same issue of white screen with my friend project, the mistake was missing runApp() in Main.dart file, given below
void main() {
WidgetsFlutterBinding.ensureInitialized();
MultiProvider(
providers: [
ChangeNotifierProvider<CircuitProvider>(
create: (ctx) => CircuitProvider()),
],
child: const MyApp(),
),
}
So then it was replaced like,
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider<CircuitProvider>(
create: (ctx) => CircuitProvider()),
],
child: const MyApp(),
),
);
}
I faced with this problem in working app so in my case I've restarted phone and it was ok. Also check memory on your device maybe you have no free space