3

how to avoid orientation changes when keyboard is opened with OrientationBuilder in Flutter ?

Indeed when the keyboard appears the orientation property of OrientationBuilder changes to landscape even if we don't rotate the phone.

Image:

enter image description here

Code :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: OrientationBuilder(builder: (context, orientation) {
            var _children = [
              Expanded(
                  child: Center(
                      child: Text('Orientation : $orientation',
                          textAlign: TextAlign.center))),
              Flexible(
                  child: Container(color: Colors.blue, child: TextField())),
              Flexible(child: Container(color: Colors.yellow)),
            ];
            if (orientation == Orientation.portrait) {
              return Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: _children);
            } else {
              return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: _children);
            }
          })),
    );
  }
}

1 Answer 1

1

How to avoid orientation changes when keyboard is opened with OrientationBuilder, set resizeToAvoidBottomInset to false in Scaffold widget;

Image :

enter image description here

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          resizeToAvoidBottomInset: false, // Here
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: OrientationBuilder(builder: (context, orientation) {
                return Column(
                  children: [
                    Text('Orientation = $orientation',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold)),
                    TextField(
                      decoration: InputDecoration(
                        hintText: 'tap me',
                      ),
                    )
                  ],
                );
              }),
            ),
          )),
    );
  }
}

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.