Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Device Orientation

I wonder why Flutter does wonderfully rotate from Portrait to Landscape if run on an iOS device but does not rotate at all on my Android device ??

As a code example you find a "hello world" example below. Again, also for this simple code-example, Flutter rotates for iOS device out of the box but it does not rotate for Android. Why ??

The same ist true for more complex Apps adding ListViews or other (i.e. iOS rotates nicely the screen, Android does not).

I found something called OrientationBuilder (link1) or MediaQuery.orientation (link2). But this seems only offering the capability to distinguish the device's orientations and then you have to act in code accordingly. This seems like a possible solution but I wonder why I have to invest extra Work for Android devices but not for iOS ?

What I am looking for is an "AUTOMATIC" rotation possibility for Android under Flutter (just as iOS does it out of the box). How could I achieve this ?

Here is two screenshots of my "hello world" example. (iOS rotates out of the box / Android does not):

enter image description hereenter image description here

And here is the Dart-code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter = _counter + 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
like image 621
iKK Avatar asked Dec 17 '18 17:12

iKK


3 Answers

Thanks to the answers of Jagraj Singh and also user1462442, I finally found a way to rotate the Android Emulator.

It is not enough to just rotate the Android Emulator (for example with CMD <- key press or by the settings-menu) - No! In addition, you have to select the small icon on the Android-Emulator phone menu-bar (see red circle on image)...

Don't know why AVD is making it this way....

enter image description here

like image 103
iKK Avatar answered Nov 18 '22 11:11

iKK


In notification panel or system settings of your phone(Android) change the device orientation to automatic. another method is using system chrome lib of flutter , you can change or set preferred orientation , may be this could help,flutter docs

like image 41
Jagraj Singh Avatar answered Nov 18 '22 09:11

Jagraj Singh


Are you running flutter in an emulator? I believe rotate is automatic when I install it into the device. You probably need to trigger it on android emulator settings.

like image 30
user1462442 Avatar answered Nov 18 '22 10:11

user1462442