CODEWITHSUNDEEP
flutter
Adrien Arcuri
Adrien Arcuri

Reputation: 2400

How to avoid orientation changes when keyboard open with OrientationBuilder in Flutter?

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);
            }
          })),
    );
  }
}

Upvotes: 3

Views: 774

Answers (1)

Adrien Arcuri
Adrien Arcuri

Reputation: 2400

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',
                      ),
                    )
                  ],
                );
              }),
            ),
          )),
    );
  }
}

Upvotes: 1

Related Questions